Intro
나보다 잘하는 개발자에게 질문을 하다가 문득 들은 말이다
ES6문법은 다 아시구요?
네. 압니다.
정말요?
원래 2번은 물어본다는 그 분의 말이었지만, 다시 생각해보니 리스트를 읊을 정도는 아니었고,
첫 면접 질문도 그거였다. ES5와 ES6 문법의 차이가 뭐냐는 질문이었고 얼어붙어서 아무런 답도 못했다.
ES6 문법 아는 게 뭐 있냐고 물어보면 간단히라도 5개는 답해보자.
코드 설명까지 하면 너무 길어져서 용어만 간략히 했다. 키워드를 담았으니 자세 내용은 따로 검색하자.
W3CSchool
공식적으로는 여기에 ES6 문법이 나와 있다. 사실 우리가 사용하던 것들 중에 ES6 문법이 많다.
2015년 기준이다.
https://www.w3schools.com/js/js_es6.asp#mark_let
1. let, const
누누이 들은 말. 전역변수 말고 지역변수 써라, 블록 레벨로 코드를 관리해라.
var를 쓰지 말고 let을 쓰고, 재할당 할것 아니면 const로 바꿔라. 이 let과 const도 ES6다.
2. Class
자바스크립트는 원래 클래스란 개념이 없다. 자바에서 객체지향 개념으로 클래스가 있는데,
ES6에 오면서 Class 개념이 생겼다. 문법은 거의 같다. static, final, super(), constructor() {} 로 해서 만든다.
3. Promise
비동기의 표본이다. 함수 A 실행이 확실히 끝난 후에 함수 B가 실행되었으면 좋겠을 때, 프로미스를 쓴다.
.then().then().then()으로 실행 함수를 연결하고, .catch()로 에러를 잡았다.
4. Symbol
심볼은 immutable한 primitive값이다. (불변의 원시값)
Symbol() 함수를 호출해서 매번 유니크한 심볼을 만들고, 그 심볼은 객체 프로퍼티의 키에 사용된다.
5. 파라미터 기본값
함수를 정의할 때 파라미터의 기본값을 func (x = 10) { 식으로 정할 수 있다는 것.
이것도 ES6다.
6. Rest 파라미터
... 이 Rest 파라미터다. 이 파라미터는 파라미터들 중에 제일 마지막에 위치해야 한다.
func test (content, result, ...args) {} 식으로 말이다.
7. String, Array 메서드
String, Array 클래스 메서드가 몇 개 추가되었다. String.includes(), Array.findIndex() 등인데 w3school 참고
8. Math 객체 메서드 추가
Math.sign(), Math.trunc() 등이 추가되었다.
9. Number의 신규 프로퍼티, 메서드 추가
EPSILON
MIN_SAFE_INTEGER
MAX_SAFE_INTEGER가 추가되었다.
isSafeInteger() 메서드 등도 추가되었다.
10. isNaN(), isInfinite()
global 메서드 2개가 ES6에서 신규 추가되었다.
숫자인지 체크하는 isNaN(), isInfinite()도 ES6다.
11. Object.entries()
객체에서 key와 value를 모두 추출하는 자바의 entrySet() 와 동일하다.
12. Module
우리는 한 파일에 모든 코드를 다 작성할 수 없어서 폴더별로 나누어 파일을 작성하고 export, import를 한다.
나의 경우 간혹 가다가 import할 때 {} 여부로 에러를 낸다.
중괄호 없는 import는 해당 라이브러리, 모듈 전체를 가져오는 것이고,
{}를 쓰면 특정 이름 있는 객체 등을 가져올 때라고 한다.
+) w3School에서는 이후로 연도별로 신규 추가 문법을 설명한다.
인터넷에서 추가로 나온 문법 몇 개도 적어본다.
13. 화살표 함수
() => {} 식의 문법인 화살표 함수.
그냥 함수의 this는 나 자신을 가리키지만, 화살표 함수의 this는 나보다 1단계 상위인 부모를 가리킨다.
그래서 항상 추적하기 까다롭다는 this를 일반 함수보다 더 예측하기 쉽다.
14. 객체 구조분해할당
const { applyId, name, price } = props.applicationapplication 객체 내부의 속성들을, props.application.price를 변수 price에 담는 것보다 더 간결하고 직관적이어서 좋다.
15. for ...of 문
기존 for문보다 편리한 for문이다. iterable 자리에는 반복 가능한 배열 등을 넣으면 되겠지.
for (const value of iterable) {
console.log(value);
}16. Spread 연산자
나는 배열을 풀어 쓸때 ...을 많이 썼다. 하지만 객체 내부 요소들을 풀 때도 쓸 수 있다.
useState()가 객체로 되어 있는데 onChange에서 1개의 요소 값만 바꾸고 싶지만,
실제로는 {}를 변경해서 setState()를 한다.
그럴 때 setForm({...form, title: '변경된 내용'}); 식으로도 쓰지.
최근에 플젝에서 리소스 대량 삭제 axios 메서드를 봤는데 [...resrceList] 식으로 배열을 풀어서 던져주더라고. 뭐 그랬습니다.
Outro
다음에 누가 ES6 문법 뭐 아냐고 물어보면
Promise, Symbol, let과 const, Class, 화살표 함수, 스프레드 연산자, 매개변수 기본값을 말해보자.
이 글을 쓰게 만든 문법 다 아냐고 물어봐준 그 분께 감사를.
