자바스크립트 ES6(ECMAScript ) 문법

https://hanamon.kr/javascript-es6-%EB%AC%B8%EB%B2%95/

[JavaScript] ES6 문법 - 하나몬

 

ES6(ES2015)는 ECMAScript 6라고도 불리며, 2015년에 발표된 JavaScript의 다음 버전입니다. ES6는 JavaScript 언어에 새로운 기능과 개선된 문법을 도입하여 코드를 더 간결하고 가독성 있게 작성할 수 있도록 돕습니다. 이제 간단히 ES6에서 추가된 주요 기능과 문법을 설명하겠습니다.

1. 변수 선언:
   • let과 const 키워드를 사용하여 블록 스코프 변수를 선언합니다.
   • let: 재할당이 가능한 변수를 선언합니다.
   • const: 재할당이 불가능한 상수를 선언합니다.
2. 화살표 함수(Arrow Functions):
   • 더 간결한 함수 선언 방법으로 =>를 사용하여 함수를 정의합니다.
   • function 키워드 대신 화살표 함수를 사용합니다.
3. 클래스(Class):
   • 객체 지향 프로그래밍을 지원하기 위해 클래스를 도입했습니다.
   • class 키워드를 사용하여 클래스를 정의하고, constructor 메서드를 사용하여 생성자를 정의합니다.
4. 모듈(Module):
   • 모듈 시스템을 도입하여 코드를 모듈화할 수 있게 되었습니다.
   • import와 export 키워드를 사용하여 모듈을 가져오고 내보내기를 합니다.
5. 디스트럭처링(Destructuring):
   • 배열이나 객체의 속성을 추출하여 변수에 할당하는 기능입니다.
   • 배열 디스트럭처링과 객체 디스트럭처링을 지원합니다.
6. 스프레드 문법(Spread Syntax):
   • 배열이나 객체를 펼쳐서 다른 배열이나 객체에 복사하거나 병합하는데 사용합니다.
   • ...을 사용하여 스프레드 문법을 사용합니다.
7. 템플릿 리터럴(Template Literals):
   • 백틱(backtick)(``)으로 둘러싸인 문자열에서 변수를 쉽게 삽입할 수 있습니다.
   • ${}를 사용하여 변수를 삽입합니다.
8. 프로미스(Promise):
   • 비동기 작업을 처리하기 위한 패턴입니다.
   • 비동기 작업이 완료되었을 때 처리할 로직을 등록하여 사용합니다.
9. 클래스 속성과 정적 속성:
   • 클래스 내부에서 static 키워드로 정적(static) 속성을 정의할 수 있습니다.
   • 클래스 내부에서 속성을 선언하고 생성자 없이 값을 할당할 수 있습니다.
10. for...of 루프:
    • 컬렉션의 요소를 순회하는 데 사용합니다.
    • 배열, 문자열, 맵(Map), 셋(Set) 등을 순회할 수 있습니다.

 

화살표 함수

구조분해할당

promise

열심히 배웠는데 기억이 하나도 안나네... 다시보자!

 

 

5. 구조 분해 할당

• 구조분해 할당이란 펼치다란 뜻으로 객체나 배열에서 사용하며, 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정을 말한다.

// 배열에서 Spread 사용

const arr = [1, 2, 3];

const [one, two, three] = arr;

 

one // 1

two // 2

three // 3

 

// 객체에서 Spread 사용

const obj = {

firstName: '하나',

lastName: '몬'

};

 

const { firstName, lastName } = obj;

firstName // 하나

lastName // 몬

 

호이스팅 이슈

 

호이스팅(hoisting)은 JavaScript에서 변수와 함수 선언이 스코프의 상단으로 "끌어올려지는" 동작을 말합니다. 이것은 코드 실행 전에 변수 및 함수 선언이 메모리에 할당되는 것을 의미합니다. 하지만 할당(값의 초기화)은 원래 위치에서 이루어집니다.

호이스팅은 다음과 같은 두 가지 주요 동작으로 설명할 수 있습니다:

1. 변수 호이스팅(Variable Hoisting):
   • 변수 선언은 스코프의 상단으로 끌어올려집니다.
   • 변수의 할당은 원래 위치에서 이루어집니다.
2. 함수 호이스팅(Function Hoisting):
   • 함수 선언은 스코프의 상단으로 끌어올려집니다.
   • 함수 표현식은 호이스팅되지 않습니다.

이러한 호이스팅 동작 때문에 변수와 함수를 선언하기 전에 참조하는 것이 가능하지만, 값 할당 전에 변수를 사용하면 undefined가 됩니다. 호이스팅으로 인한 이슈를 피하기 위해서는 변수와 함수를 스코프의 최상단에서 선언하는 것이 좋습니다. 또한, 함수를 함수 표현식으로 선언할 경우에도 호이스팅으로 인한 문제를 피할 수 있습니다.