Immersive course의 두 번째 날이다. 내일까지는 첫 번째 스프린트가 진행되는데 오늘 오피스 아워 마지막쯔음, 이걸로 자바스크립트의 기능을 배우는 것은 거의 마지막이 될 것이라고 하셔서 살짝 멘붕. 아직 모르는게 많은데 아뿔싸....
What I learned today
1. Arrow Function
페어 프로그래밍을 진행하며 잘하는 분들이 곧 잘 쓰던 화살표 함수. 드디어 과정에 출몰했다. MDN 공식문서에서도 고차함수를 설명할때 자주 나오기 때문에 알고는 있었지만 막상 사용하려면 햇갈리는 부분이 많아 잠시 미뤄두었는데, 이제 자주 애용해야지.
화살표 함수는 function 키워드를 화살표로 축약할 수 있고, 리턴을 생략할 수 있다. 단, 리턴 생략시는 중괄호(Curly brace)는 사용하면 안된다.
화살표 함수가 적용되는 과정.
const adder = function(x) {
return function(y) {
return x + y
}
} //일반적인 함수 표현식
1. function 키워드를 없앤다.
const adder = (x) => {
return (y) => {
return x + y
}
}
2. 다음으로, 가장 안쪽 리턴을 없앤다.
2-1.리턴 생략시에는 중괄호를 사용하지 않는다.
2-2.파라미터가 하나라면, 소괄호도 생략할 수 있다
const adder = x => {
return y => x + y
}
3. 마지막으로 리턴까지 제거한다.
const adder = x => y => x + y화살표 함수의 특징 :
1 화살표 함수는 함수명을 가질 수 없다.
2.This값을 가지지 않는다. 클로저 함수처럼 context상
가장 가까운 this 값을 취한다.
3.2번 특성에 따라서 call, apply, bind를 사용할 수 없다.
2. Destructing
구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다(MDN).
**배열 할당
1)기본적인 할당
let x = [1,2,3];
let [a, b, c] = x;
a; // 1
b; // 2
c; // 3
2)쉼표로 건너뛰기 가능
let y = [1,2,3,4,5]
let [a,,c,d,e] = y;
a; // 1
c; // 3
d; // 4
e; // 5
3) Spread operator 사용
let z = [1,2,3,4,5]
let [a, ...others] = z
a;//1
others//[2,3,4,5]
Spread oprerator는 중간에 사용할 수 없다. 반드시 마지막에 사용되어야한다.**객체 할당
1)기본적인 할당
const cat = { name: '뚱이', status: '다이어트중' };
const {name} = cat
const {status} = cat
name // '뚱이'
status// '다이어트중'
2) spread operator 사용
const cat = { name: '뚱이', status: '다이어트중' };
const { name, ...args } = cat;
args // {status: '다이어트중' }
3) overWrite!
const cat = { name: '뚱이', status: '다이어트중' };
const cat2 = {
...cat,
name: '뚱이동생',
status: '데려오고싶다'
}
cat2// { name: '뚱이동생', status: '데려오고싶다' };
!주의: ...cat을 먼저 써주어야 그 위에 해당 요소를 덮어쓸 수 있다. 
다음과 같이 객체안의 객체에도 사용 가능.
3. This, Call, Apply, Bind
해당 요소들의 사용법은 PRE시간에 배웠으나 본격적으로 수업을 진행하고 실습하는 시간을 가졌다.
함수의 실행방법은 크게 다섯가지인데, This값을 주의해야 할 때는 특히 그 중 세가지이다.
(Global, Function 호출 상황에서 This는 Window다)
Method.호출
new Foo()
foo.call()
foo.apply()
foo.bind()위 세 가지 상황에서 바인딩되는 this는 상황에 따라 다음과 같이 나타난다.
call,apply 그리고 bind의 공통점과 차이점
call(this, args) // 두 번째~ 인자로 인수를 받는다
apply(this, array) //두 번째~ 인자로 배열을 받는다.
bind(this)
공통점: 첫 번째 인자로 this를 지정한다.
차이점: call,apply는 리턴값을 반환하고 bind는 클로저 함수를 묶어두는 것 처럼, 실행시점까지 binding 해 둘 수 있다.