ECMA Script(ES) 문법

JavaScript 표준인 ECMAScript에서는 주기적으로 보다 편리한 코드 작성을 위한 새로운 문법을 업데이트 하고 있다.

새로운 버전 명은 ES5, ES6~ 와 같은 방식으로 표기하기도 하고, 해당 연도를 뜻하는 ES2015, ES2016으로 표기하기도 한다.

ES6와 ES2015가 동일한 버전의 다른 표기법이라고 볼 수 있다.

 

현재는 ES2023까지 나온상태

 

자주 사용되는 ES문법

Spread Operator - 전개 연산자(ES6, ES2015~)

주로 객체와 배열에서 사용한다.

ex) 원본 배열을 기반으로 하는 새로운 배열 생성 및 배열 내 요소들을 풀어내고자 할 때

const cookies = ['초코', '오렌지'];
const newCookies = ['바닐라', ...cookies, '포도']; // ['바닐라', '초코', '오렌지', '포도'];

 

Destructuring assignment - 구조 분해 할당(ES6~)

파이썬의 Unpacking과 비슷한 문법

특정 객체(ex, 배열, 객체 등)의 구조(Structure)를 분해하여 독립된 요소들로 모은 후 개별 변수들에 할당한다는 의미

de(반의어) structuring : 구조를 깨다

객체 구조 분해 할당:

• 객체의 속성을 변수로 추출할 때 사용합니다.
• 속성의 이름을 기반으로 분해하며, 순서는 중요하지 않습니다.
• 원하는 속성 이름을 중괄호 {} 안에 명시합니다.
• 변수 이름은 객체의 속성 이름과 일치해야 하지만, :를 사용하여 다른 이름을 할당할 수도 있습니다.

예시:

javascriptCopy code
const person = { name: 'John', age: 30 }; const { name, age } = person; // 'name'과 'age' 속성을 추출 console.log(name); // John console.log(age); // 

배열 구조 분해 할당:

• 배열의 요소를 변수로 추출할 때 사용합니다.
• 요소의 순서에 따라 분해하며, 이름은 중요하지 않습니다.
• 원하는 요소의 위치를 대괄호 [] 안에 순서대로 명시합니다.
• 배열의 순서대로 변수에 할당됩니다.

예시:

javascriptCopy code
const numbers = [1, 2, 3]; const [first, second] = numbers; // 첫 번째와 두 번째 요소를 추출 console.log(first); // 1 console.log(second); //

요약:

• 객체 구조 분해: 속성 이름을 기반으로 하며, 순서는 무시됩니다.
• 배열 구조 분해: 요소의 순서를 기반으로 하며, 이름은 무시됩니다.

이러한 차이점은 데이터 구조에 따라 적절한 방식으로 변수에 값을 할당할 때 유용하게 사용됩니다.

 

Optional chaining - 옵셔널 체이닝(ES11, ES2020 ~)

객체의 프로퍼티에 접근할 때 . 를 활용하는데, 만약 프로퍼티가 null일 경우 에러가 발생한다.

따라서 에러 방생 대신에 값이 할당되지 않았다는 undefined로 반환시켜서 에러를 방지하고자 할 때 사용하는 연산자라고 할 수 있다.

-> 즉, 접근하고자 하는 어떤 값이 존재할 수도 있고, 존재하지 않을 수도 있을 때 사용

const user = {
  name: 'Alice',
  cellphone: {
        number: '010-5555-5555',
    }
};
 
const homePhones = user?.homePhones;
console.log(homePhones);