2021/1/7 ES6 문법공부

Hiring Assesement 문제들을 다 풀었다.
Immersive Course를 위해 ES6문법을 미리 공부해도 좋다고 하셔서, 그러기로 했다.

(▲ 🍊みかんと一緒にした Hiring Assesement🍊)

코드스테이츠가 코딩의 첫걸음인 나는 당연하게도 ES6가 뭔지 1도 모른다...
ES6가 뭔지 찾아보았다.

이게 막 ES5, ES7, ES8 등등이 함께 검색되는 걸로 보아서, 시리즈물인듯 싶다.
(1탄 2탄 이런 느낌으루... 탄 수를 거듭할 수록 새롭고 좋은 기능들이 업뎃되는 듯...)
그 중에서 'ES5를 배워야 하냐, ES6를 배워야 하냐'를 온라인닝겐들께서 묻는걸로 보아서,
ES5와 ES6가 좀 큰 분기점이 되는 건가 싶기도하고...?
사실 모... <아님말고>이긴함

아무튼 ES6문법을 공부하라 하셨으니, ES6문법을 공부해본다.

🏹 화살표 함수

• 고차함수에서 배웠던 filter, map, reduce, forEach 등등을 축약해서 간단하게 쓰는 정도의 함수인 것 같음. 아래와 같은 식으로!

let evens = [2, 4, 6, 8,];

//기존에 배웠던 방식
let odds = evens.map(function(n){
  return n + 1 
  });

// 화살표함수를 쓰면?
let odds = evens.map(n => n + 1);

• 화살표함수는 항상 익명함수
• this의 값을 현재 문맥에 바인딩 시킨다고 하는데, 이거는 무슨 말인지 잘 모르겠음. "일반 함수의 자신을 호출하는 객체를 가리키는 dynamic this와 달리 arrows 함수는 코드의 상위 스코프(lexical scope)를 가리키는 lexical this를 가집니다." 라고 하는데, 모르겠으니까 일단 적어놓겠다.

📥템플릿 리터럴

• 얘는 보다 보니까 이게 ES6인지도 모르고 이미 쓰고 있던 듯...
• 문자열 리턴 해줄 때 +연산자를 통해 줄줄이 쏘세지로 엮어주던 것을 백틱으로 전체를 한 번만 감싸고 '${}'얘로 구멍 뽕뽕 뚫어서 써라, 이거인 것 같음, 아래와 같이.

// 줄줄이 쏘세지 방식
let meIntroduceMyself = 'My name is ' + name + '. I'm ' + age + ' years old.'

// 템플릿 리터럴
let meIntroduceMyself = `My name is ${name}. I'm ${age} years old.`

• 모 이래저래 상황마다 써야되는 게 있겠지만? 나는 템플릿리터럴이 더 좋은 것 같다. 귀찮게 따옴표랑 더하기 연산자 안써줘도 되고, 띄어쓰기 계산? 안 해줘도 되니까.

멀티라인 문자열🖋

• 나는 코딩 첨 배울 때 백틱이 뭔지도 몰랐고, 키보드 어디쯤에 있는지도 잘 몰랐음. 그러나 코딩 배우다보니까 백틱 너무너무 좋고, 손글씨 쓸 때도 따옴표 백틱으로 쓰고 싶다. 암튼, ES6문법 보니까 백틱이 아주 유용한 듯.
• 아래와 같이 쓸 수 있다고 합니다.

// 5탄에서는...
let harryPotter = 'Mr. and Mrs. Dursley, of number four Privet Drive,\n\t'
  + 'were proud to say that they were perfectly normal,\n\t'
  + 'thank you very much.\n\t'
  
// 근데 나는 원래 딱히 라인 바꿔가면서 써본 적이 없어서... 암튼 ES6에서는...
var harryPotter = `Mr. and Mrs. Dursley, of number four Privet Drive, 
  were proud to say that they were perfectly normal, 
  thank you very much.`

🤽기본 매개변수

• 함수 써줄 때도 디폴트 인자 선언해주기 위해서 일일이 써주던 것을, 깔끔하게 써줄 수 있음.

// 예전에는...
let link = function (height, color, url) {
    var height = height || 50
    var color = color || 'red'
    var url = url || 'http://azat.co'
    ...
}

// ES6에서는...
let link = function(height = 50, color = 'red', url = 'http://azat.co') {
  ...
}

🙇🏻‍♂️참고 페이지

• https://blog.asamaru.net/2017/08/14/top-10-es6-features/