IM 코스 2일차.
첫날엔 어려운게 없어서 방심을 조금했다. 오늘은 정말 '이게 무슨말일까?' 하는 생각이 들 정도로 모호한 개념들을 배웠다. 아직 익숙치 않아서 그런가 pre 첫날 변수를 선언할 때가 떠올랐다. 이것도 하다보면 적응이 되겠지 싶었다. 오늘 배운 내용은 화살표함수/ this/ call/ apply/ bind 크게 이 다섯 가지였다. 그 외에 ES6 문법 몇개였다.
화살표 함수는 아주 유용했다. return이 한개만 있는 함수는 깔끔하게 화살표 함수로 정리가 가능했다.
예를 들면
let introduction = function (who) {
return function(greet) {
return greet + ', my name is ' + who
}
}
let iAm = introduction('Sangrae')
console.log(iAm('Hello')) // Hello, my name is Sangrae이 함수를 화살표 함수로 간단하게 줄여 본다면,
let introduction = who => greet => greet + ', my name is ' + who
let iAm = introduction('Sangrae')
console.log(iAm('Hello')) // Hello, my name is Sangrae이렇게 줄여질 수 있다. 한번에 이해가 가지 않는다면 하나하나 줄여 나가는 것도 좋다. 나는 function, {}, return 이 세가지를 묶어서 '=>'로 바꿔 준다고 외웠다. 그럼 뒤에서 부터 하나하나 지워 보자.
- greet가 매개변수로 있는 익명함수.
let introduction = function (who) {
return greet => greet + ', my name is ' + who
}- who를 매개변수로 하고있는 함수
let introduction = who => greet => greet + ', my name is ' + who너무 간단해서 설명이 민망할 정도이다. 그러나 처음엔 너무나도 헷갈렸다.
다음은 this와 call, apply, bind에 관한 것이다.
this는 아주 특이한 키워드이다. 환경에 따라 this의 값은 달라진다. 주의 해야할 점은 this는 화살표 함수에서 제기능을 하지 못 한다는것과 함수 호출, 글로벌에서는 사용이 권장 되지 않는다. 이유는 생각한대로 this의 값을 참조하지 않고 전역객체에서 참조해 버리기 때문에 원하는 값이 나오지 않는다. 이건 그냥 알고만 있으면 되고 최대한 지양하자.
예)
function greeting() {
return `Hello, my name is ${this.name}, ${this.age} years old.`
}
const iAm = {
name: 'Sangrae',
age: 29
}
console.log(greeting(iAm)) // Hello, my name is undefined, undefined years old.예상하는 결과와 달리 this는 iAm 객체를 찾지 못한다.
그럼 this값을 원하는 문맥으로 이동 시키기 위해 어떻게 해야할까? 바로 call, apply 이 두가지다. 이 둘은 공통적으로 첫 번째 인자는 항상 this이고 두번째 인자는 call은 파라미터 apply는 배열이다. 만약 지정해줄 this가 없을 땐 null을 쓰면된다.
greeting 함수엔 this가 있기에 call의 첫 번째 인자를 채워주자.
- call
function greeting() {
return `Hello, my name is ${this.name}, ${this.age} years old.`
}
const iAm = {
name: 'Sangrae',
age: 29
}
console.log(greeting.call(iAm)) // Hello, my name is Sangrae, 29 years old.this가 제대로 지정되어 값을 가져왔다. 그리고 apply도 this를 이용할 때의 쓰임은 마찬가지다 그러나 한가지 다른 점은. 예를들어 greeting 함수가 매개변수를 가지고 있고 그 매개변수를 이용할 때의 경우를 생각해보자.
- apply(call과의 차이점)
function greeting(occupation, company) {
return `Hello, my name is ${this.name}, ${this.age}years old.
${occupation ? ' I am a ' + occupation : ''}${company ? ' from ' + company + '.': ''}`
}
console.log(greeting.apply(iAm, ['devloper','codestates']))
//Hello, my name is Sangrae, 29years old. I am a developer from codestates.
console.log(greeting.call(iAm, ...['devloper','codestates']))
//Hello, my name is Sangrae, 29years old. I am a developer from codestates.이렇게 call과 apply의 사용법과 차이를 알아보았다.
마지막으로 bind. bind는 call과 유사하게 this및 인자를 바인딩할 수 있다. 즉, 호출이 따로 필요하다는 말이다.
- bind
function something() {
return this
}
let iAm = 'a boy'
let youAre = 'a girl'
let boy = something.bind(iAm)
let girl = something.bind(youAre)
console.log(boy()) // a boy
console.log(girl()) // a girl아직은 모든게 이해가 되지는 않는다. 그러나 분명 사용할 곳은 있다. 다음에 코딩을 할 때 스스로 이것들을 상기 시키면서 하자. 그러면 어느순간 익숙해질 것이라 믿는다.
