실무에서 많이 쓰이는 es6 와 es11의 주요 특징

이 포스팅은 '드림 코딩 by 엘리' 라는 유튜브 채널의 영상을 보고 매우 공감되고 도움이 되는 내용을 정리했다. 실무에서 많이 쓰고 있고 놓치고 있는 것들도 있어서 나에게 정리하는 시간이 된 것 같다.

ES6

1. Shorthand property names

자바스크립트에서 Object는 항상 key와 value로 이루어진다.
그래서 보통 다음과 같은 형태로 이루어진다.

const name = '동화책'
const publisher = '동화출판사'

const Book = {
    name : name
    publisher : publisher
}

//위와 아래 Book은 출력해보면 동일한 결과를 보여준다.

const Book = {
    name,
    publisher
}

위와 같이 Book Object의 각 Key에 Value를 대입할때 미리 선언해둔 변수를 가져올 수 있다.
그러나 위와 같이 하면 Key와 변수명이 동일해서 자칫 헷갈릴 수가 있다.
이렇게 Key와 변수명이 같은 경우는 이제 간단하게 축약할 수 있다.

2. Destructuring Assignment

아래와 같은 Book Object에서 각 Key의 Value를 가져와 새로운 변수에 넣고 싶을 때가 있다.

const Book = {
    name : name
    publisher : publisher
}

const name = Book.name
const publisher = Book.publisher

이제는 위와 같이 할 필요 없이, 다음과 같이 줄일 수 있다.

const { name, publisher } = Book

변수 name과 publisher가 Book Object의 Key와 같은 명칭이기에 가능하다.
만약 다른 이름으로 선언하고 싶다면?

const { name : bookName, publisher : bookPublisher } = Book

이렇게 하면 이제 bookName과 bookPublisher 변수에 Book.name, Book.publisher가 할당된다. 그래서 콘솔에 찍을 때도 console.log(bookName, bookPublisher) 로 사용한다.

이는 배열에서도 마찬가지인데,

const Books = ['동화책', '소설책']
const [first, second] = Books

이렇게 사용할 수 있다.
즉, Object인 경우엔 { }로, Array인 경우엔 [ ]로 문법만 맞춰주면 된다.

3. Spread Syntax

'...' 구문을 사용할 수 있다.
예를 들어, ...Books 라고 한다면 Books 배열의 모든 요소를 나열한다고 보면 된다.

let Books = ['동화책', '소설책']
const copyBooks = [...Books]

이러면 copyBook에 Books 요소들을 "복사"하게 된다.
"복사"를 할 때는, Books 변수의 주소값을 가져온다.** (중요!)**

const copyBooks2 = [...Books, '그림책']

이렇게 선언한 변수 copyBooks2는 '동화책, '소설책', '그림책' 을 가진 배열이지만

Books[0] = '사전'

처럼 Books의 값을 변경하면 이를 복사해온 다른 변수들에도 영향이 있다.
즉, copyBooks2를 출력하면 '사전','소설책','그림책' 으로 변경되어있다.

4. Default parameters

이제 함수의 파라미터(인자)의 기본값을 간단하게 선언할 수 있다.

function write(writer = '제이슨'){
    console.log(writer) // '제이슨' 이라고 출력된다.
}

5. Ternary Operator

const component = isBook? 'Book' : 'Candy'

component 변수는 isBook의 T/F 여부에 따라 Book이나 Candy값이 할당된다.

6. Template Literals

console.log('오늘 읽어 볼 책은' + name + '이다. 출판사는 ' + publisher + '이다.');
console.log(`오늘 읽어볼 책은 ${name}이다. 출판사는 ${publisher}이다.`);

아래 console.log 문과 같이 ` 를 사용하여 좀 더 가독성있도록 사용할 수 있다.

ES11

1. Optional chaining

{
    const Book = {
        name : '동화책',
        publisher : '동화출판사',
        detail : {
            price : '20000',
            date : '20201130'            
        }
    }
    const Book2 = {
        name : '소설책',
        publisher : '소설출판사'
    }
}

function printBookPrice(book){
    console.log(book.detail.price)
}

위 코드에서 printBookPrice 함수에 Book2 변수를 넣으면 에러가 발생한다.
일반적으로 함수를 작성하면 파라미터 값의 유효성을 검증하여 에러를 방지하는데 보통 아래와 같이 했었다.

console.log(book && book.detail && book.detail.price)

그러나 이제는 좀 더 가독성과 코드의 심미성?을 위해 아래와 같이 사용할 수 있다.

console.log(book?.detail?.price);

2. Nullish Coalescing Operator

//어떤 변수에 아래와 같은 값이 들어 있으면 false이다.
//false, '', 0, null, undefined

1.
const name = '동화책'
const bookName = name || '소설책'
//동화책

2.
const name = ''
const bookName = name || '소설책'
//소설책

3.
const name = ''
const bookName = name ?? '소설책'
//''

2번 경우는 개발자의 의도가 무엇일까?
아마도 name이 비어있으면 그대로 빈 값이 나오게 하고 싶었을지도 모른다.
그러나 주석에 쓰여있는 대로 '소설책'으로 할당된다. ''는 false로 취급되기 때문이다.
그래서 3번과 같이 '??' 연산자를 이용해서 이 같은 현상을 방지할 수 있다.

여기까지 정리해보았다.
다음은 위 내용을 그대로 잘 설명해준 유튜브 영상을 첨부한다.