1. ES6란?

프론트엔드 개발자라면 모르면 안되는 기능들이 수두룩하다.

• ECMA라는 국제 기구에서 만든 표준문서인 ECMAScript(=ES)의 6번째 개정판 문서에 있는 표준 스펙을 말한다.
• 2015년에 출시된 ES6가 다른 ES 시리즈에 비해 가장 많이 불리는 이유는 이 때의 자바스크립트가 현재 대표적인 기능이 많이 탑재되었기 때문이다(화살표함수, const와 let 등).
• ES6 이전의 문법은 도태된 느낌이 강해서 ES6가 자바스크립트 표준의 느낌이 강하다고 개인적으로는 생각한다.

2. ES6 기능

1) Ternary Operator

• 조건이 true / false에 따라 분기처리 할 때 사용

조건 ? true일 때 코드 : false일 때 코드

2) Destructing

• 구조 분해 할당으로 불리며 변수를 선언함과 동시에 배열과 객체의 값들을 바로 할당할 수 있는 방법이다.

① 배열

const array = [1, 2, 3]
const [a, b, c] = array
// a, b, c는 각각 변수로서 a에는 1이 담기고 b에는 2가 담기고 c에는 3이 담김

② 객체

const object = {
	name: "Choi",
    age: 26,
    gender: "male"
}

const {name, age, gender} = object
// name에는 "Choi"가 담기고 age는 26이 담기고 gender에는 "male"이 담긴다.
// name 변수를 선언함과 동시에 값이 할당된 것이다.

const {name: myName, age: myAge, gender: myGender} = object
// 물론 key의 이름에 종속되지 않고 변수명을 바꿔서 할당할 수도 있음

• 참고로 배열은 원하는 변수명으로 할당할 수 있으나 객체의 경우에는 일반적으로 key의 이름을 그대로 변수로 써야 한다.
• 물론 변수명을 바꿔서 할당할 수도 있다.

③ 함수

• 함수의 인자가 객체인 경우에도 파라미터에서 사용가능하다.

const param = {
	name: "Choi",
    age: "26",
    gender: "male"
}

const getUserInfo = ({name, age, gender}) => {}

getUserInfo(param)

3) 화살표 함수

• 함수 작성법으로 한줄 코드 작성이 가능할 경우 깔끔한 함수 작성이 가능해서 좋더라

const function = (parameter1, parameter2) => {}

4) const let

• ES6 이전에 쓰던 변수 선언 타입인 var은 호이스팅, 블락 스코프 무시, 상수변수 개념 미존재 같은 안정성을 해치는 문제점을 해결하는 변수 타입이다.
• const는 상수, let은 변수의 역할을 한다.

5) Default Parameter

• 함수의 파라미터가 required가 아닌 optional인 경우 기본 값을 지정해줄 수 있다.
• 물론 인자로 기본 값과 다른 값을 넘겨주면 그 값을 참조한다.

const getUserInfo = (name, age, gender="male") => {}

getUserInfo("Choi", 26)
// gender는 male이 된다.

getUserInfo("Choi", 26, female)
// gender는 female이 된다.

6) Rest Parameter

• 파라미터가 너무 많은 함수인 경우 전체의 인자를 하나의 파라미터 배열로 받는 방법이다.

const getUserInfo = (...userInfo) => {
	console.log(userInfo);
    // ["Choi", 26, male, cool, nice, rich]
}
const getUserInfo=(name, age, ...userInfo)=>{
	console.log(userInfo);
    // [male, cool, nice, rich]
}

getUserInfo("Choi", 26, male, cool, nice, rich)

• 일부는 평범한 파라미터로 받고 싶다면 두 번째 함수처럼 작성하면 된다.
• 단, Rest Parameter는 무조건 파라미터의 마지막에 와야 한다.

7) 숏컷

• 객체에서 key와 value의 이름이 같은 경우 축약해서 쓸 수 있다.

const name = "Choi"
const age = 26
const gender = male

const userInfo={
	name: name,
    age: age,
    gender: gender
}
를 축약해서

const userInfo={
	name,
    age,
    gender
}
로 사용가능하다.

8) Spread Operator

• 배열이나 객체 안에 있는 내용들을 풀어서 나열한다는 뜻이다.
• 여러 배열을 풀어서 하나의 배열로 다시 합치는 기능을 할 때 많이 썼다(concat의 기능처럼).
• 그리고 배열을 복사할 때나 아이템을 추가할 때나 소파에서도 많은 경우에 활용됐다.

const array1 = [1, 2, 3]
const array2 = [4, 5, 6]

const newArray = [...array1, ...array2]

console.log(newArray)
// [1, 2, 3, 4, 5, 6]

9) 백틱 string

• 변수와 문자를 섞어 쓸 때 편리하게 작성할 수 있게 도와준다.

const name = "Choi"

const oldVer = "Hi" + name + "is here"
const newVer = `Hi ${name} is here

3. ES11

1) Optional Chaining

• 리액트에서 자주 활용하게 되는 기능이다.
• SPA의 특성상 유동적인 데이터를 담는 state를 활용하게 되니 렌더링 시 데이터 페칭의 시간동안 state가 비어 있는 경우 에러가 난다. 이 때 데이터를 불러와서 state에 담길 동안 에러를 띄우지 않고 기다려주는 용도로 활용했다.
• 객체에 주로 사용하는데 이 것의 값이 있나요? 있다면 이 걸 찾아주시고 이게 있다면 그 것이 이 값을 가지고 있다면 이렇게 해주세요

const data = {
	userInfo: {
    	name: "Choi"
    }
}

console.log(data?.userInfo?.name)

2) false를 판단하는 연산자

① || 연산자

• null, undefined, 0 , "", false 를 false로 인식한다.

② ?? 연산자

• 0과 ""을 제외하고 null, undefined, false를 false로 인식한다.

4. 기타

• ES7 : async / await

  콜백함수 저리가

5. 생각

• 나는 비교적 최근 자바스크립트를 배운 지라 이 기능들을 당연히 알고 있었는데 신기능에 속하는 편이라고 하더라.
• 정말,, 좋을 때 공부를 시작한거구나,, 라는 생각이 들 정도로 무엇하나 빼먹지 못할 정도로 지금 다 유용하게 사용하고 있는 기술들이다.
• 2015년이면 고3이었는데 내가 미성년자일 때 개발하시던 분들은 대체 어떤 싸움을 하고 계셨던 걸까..