| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |
- es6
- 오블완
- async
- tdz
- vue
- 티스토리챌린지
- let
- await
- mobile dev tools
- composition API
- dex모드
- setup 함수
- composition api
- eruda
- 앱 빌드
- html 엔티티
- watchEffect
- synchronus
- 템플릿 문법
- computed
- watch
- Component
- hoisting
- drective
- promise
- reactivity
- ref
- asynchronus
- vitre
- const
- Today
- Total
목록es6 (6)
uxtry
ES6의 import와 export는 JavaScript는 JavaScript 모듈화 시스템의 일부로, 코드를 파일 간에 분리하고 재사용하기 쉽게 해줍니다. 각각의 기능을 살펴보겠습니다. 1.exportexport는 다른 파일에서 사용할 수 있도록 특정 변수, 함수, 클래스 등을 내보내는 역할을 합니다. 기본 내보내기(default export)파일당 하나의 기본 내보내기를 할 수 있습니다.//mymodule.jsexport default function sayHello(){ console.log("Hello");} 명명된 내보내기 (named export)하나의 파일에서 여러 항목을 내보낼 수 있으며, 이름을 지정하여 내보냅니다.//myModule.jsexport const greeting = "Hel..
배열 및 객체 비구조화(Destructuring)는 배열이나 객체에서 값을 추출하여 개별 변수에 쉽게 할당하는 ES6 문법입니다. 이를 통해 코드가 간결해지고 가독성이 좋아집니다. 1. 배열 비구조화 (Array Destructuring)배열 비구조화는 배열의 요소를 쉽게 변수에 할당하는 방법입니다. 배열의 각 위치에 있는 값을 변수에 할당할 수 있습니다.const numbers = [1, 2, 3];const [a, b, c] = numbers;console.log(a); // 1console.log(b); // 2console.log(c); // 3 일부 요소만 할당필요한 위치에 있는 요소만 추출할 수 있습니다.const numbers = [1, 2, 3, 4];const [first, , thir..
기본 매개변수 (Default Parameters)는 함수에서 매개변수가 전달되지 않았거나 undefined 인 경우, 기본값을 사용할 수 있도록 설정하는 기능입니다. ES6부터 도입된 이 기능은 함수 호출 시 인수를 전달하지 않아도 기본값을 자동으로 할당해 코드의 가독성과 안정성을 높입니다. 1. 기본 매개변수 사용법기본 매개변수는 함수 선언 시 매개변수에 = 을 이용하여 값을 설정합니다.function greet(name = "Guest"){ return `Hello, ${name} !`;}console.log(greet()); //Hello, Guest!console.log(greet("Alice")); //Hello, Alice!위 코드에서 greet() 함수는 name 이 전달되지 않은 경우 "..
템플릿 리터럴 (Template Literals)은 ES6에서 도입된 문자열 표기법으로, 기존 문자열 표기 방식에 비해 여러 가지 장점을 제공합니다. 백틱( ` )을 사용하여 문자열을 작성하며, 문자열 내에서 변수와 표현식을 쉽게 삽입할 수 있고, 여러 줄 문자열도 쉽게 표현할 수 있습니다. 1. 기본 문법템플릿 리터럴은 백틱( ` )으로 문자열을 감싸고, ${expression}을 사용해 표현식을 삽입할 수 있습니다.const name = "Alice";const greeting = `Hello, ${name}!`;console.log(greeting); // "Hello, Alice!" 2. 표현식 삽입 ${} 내부에 변수를 넣을 수 있을 뿐 아니라, 다양한 표현식도 사용할 수 있습니다. const ..
화살표 함수(Arrow function)는 ES6에서 도입된 함수 표현 방식으로, 기존의 function 키워드를 사용한 함수와 다르게 간결한 문법과 this 바인딩이 특징입니다. 1.기본문법화살표 함수는 function 키워드 대신 화살표 => 를 사용하여 정의합니다.//기본문법(param1, param2, ...) => { //함수 본문 return result;};//예시const add = (a, b) => a+b;console.log(add(2,3)); //5 2.문법의 간소화화살표 함수는 문법이 간단하여 짧은 함수에 적합합니다.매개변수가 하나일 때: 괄호를 생략할 수 있습니다.const square = x => x * x;console.log(squre(4)); //16본문이 한 줄일때:..
const와 let은 ES6에서 추가된 javascript 변수 선언 키워드 입니다. 두 키워드는 var와 다르게 블록 스코프를 가지며, 변수의 사용번위와 재할당 가능 여부에 차이가 있습니다. 1. let특징: 블록 스코프를 가지며, 재할당이 가능합니다.사용예시:let x = 10;x = 20; //재할당 가능console.log(x); //20스코프: let은 블록 스코프를 가지므로, 선언된 블록(예: { } 사이)내에서만 접근할 수 있습니다.if(true){ let y = 5; console.log(y) //5}console.log(y); //ReferenceError: Y는 defined(초기화)가 아니다. 2. const특징: 블록 스코프를 가지며, 선언과 동시에 초기화가 필요하고 재할당이..