9/1[TIL]화살표 함수, this 키워드, call/apply/bind 메소드

  9월의 첫날이다. 코스를 시작할 때는 여름이었지만 이제 조금 있으면 가을... 시간이 정말 빨리 가는 것 같다. 오늘은 프리코스에서 풀었던 적이 있는 Koans과제를 진행했다. 물론 문제는 다르지만 이름만 같은... 그때 와의 차이점은 이전의 것은 vs코드로 코딩을 하고 저장하고 html 파일로 새로고침을 하여 테스트 결과를 확인하였지만 이번에는 터미널에서 바로 확인하는 것이 큰 차이였던 것 같다. 문제를 하나씩 풀고 저장 후 터미널에서  $ npm run test:koans 명령어를 통해 패스 유무를 확인하는데  패스할 문제가 많다 보니

 

  프리코스에서 약간 다룬 적이 있었던 화살표 함수와 this 키워드, call/apply/bind 메소드를 좀 깊게 배우고 koans 과제를 진행하였는데 화살표 함수 즉, 애로우 펑션은 보통 함수 표현식을 축약한 형태로 표시하는 것이다. 함수 선언 시 function을 습관처럼 사용했기에 이를 잘 사용하기에는 시간이 약간 걸릴 것 같지만 사용하니 훨씬 코딩도 깔끔해지고 시간도 절약되는 거 같아 꼭 잘 쓰고 싶은 마음이 생겼다. 사용할 때 주의할 점이 몇 가지 존재하는데 우선 애로우 펑션을 사용할 때 return 이 생략 가능한데 이때 {} 중괄호를 사용할 수 없다는 것이다. 이를 소괄호로 사용하게 되고 이마저도 파라미터가 하나인 경우에는 괄호 생략 또한 가능하다. 하지만 함수 내 표현식이 두 줄 이상일 때는 return을 생략하지 않고 중괄호로 잘 구분하는 게 편할 것 같다. 화살표 함수는 다음에 배울 차례였던 this 키워드를 가지지 않으며 call/apply/bind 메소드를 사용할 수 없다고 한다.

 

  this는 호출 시점에서 실행 함수가 가리키는 객체이며, 다른 말로는 실행 함수의 호출자라고 할 수 있을 것 같다. 참고로 함수를 실행하는 방법에는 Global, Function 호출, Method 호출, new 키워드를 이용한 생성자 호출, .call/.apply 호출 이렇게 다섯 가지가 존재한다. this 바인딩 패턴을 이 다섯 가지와 맞춰보면 Global과 Function 호출에 관해서는 사용하지 않는 것이 좋다고 한다. 앞서 말한 두 가지의 케이스를 보며 koans 과제를 풀면서도 module.exports 와 global의 향연을 보니 더욱더 헷갈렸던 것 같다. 쉽게 말하면 global은 완전 전체적인 것이고 module.exports 같은 경우는 node 바운더리 안에서만 이라고 한다. 

그리고 아래 표에 나머지 3가지의 특성을 알 수 있다.

Method 호출	부모 객체 (실행 시점에 온점 왼쪽에 있는 객체)	하나의 객체에 값과 연관된 메소드를 묶어서 사용할 때 주로 사용함
new 키워드를 이용한 생성자 호출	새롭게 생성된 인스턴스 객체	객체 지향 프로그래밍에서 주로 사용함
.call 또는 .apply 호출	첫번째 인자로 전달된 객체	this 값을 특정할 때 사용하며, 특히 apply의 경우 배열의 엘리먼트를 풀어서 인자로 넘기고자 할 때 유용함

 

  학습한 강의 내용을 바탕으로 koans를 진행하였는데 강의 상으로 두리뭉실하게 이해했던 부분이 koans 과제를 진행하면서 어느 정도 이해가 가기 시작했다. '백문이 불여일견'이라는 말이 이거구나 싶었다.

결과 값 = {
    name : "황시목",
    company : {
        name : "대검찰청",
        department : "대검중수부",
        role : {
            name : "검사",
        },
    },
    age : 38,
};