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이었는데 내가 미성년자일 때 개발하시던 분들은 대체 어떤 싸움을 하고 계셨던 걸까..