ES6 화살표함수(arrow function) & thisArg

시작하기 전에

해당 블로그에 작성되는 글은 주인장의 지극히 주관적인 생각이 다수이며, 대부분의 지식은 구글링을 통해 얻고 있기 때문에 옳지않은 정보가 있습니다. 

잘못된 부분이나 수정해야 하는 부분이 있다면 과감히 덧글을 남겨주세요! 모르는게 많은 새싹입니다

오늘의 주제

오늘의 주제는 es6에서 추가된 arrow function과 this 입니다. 자바스크립트를 처음부터 다시 보고 있던 찬라에 평소에 많이 헷갈리던(?) 그런 내용들을 다시 한번 보며 복습하는 의미로 정리해 보았습니다.

화살표 함수(Arrow Function) 그리고 thisArg

es6에 새로 추가된 문법 Arrow Function(이하 화살표 함수)과 this의 쓰임에 대해 알아봅니다.

기본적으로 화살표함수는 기존에 존재하던 함수 선언방법을 좀 더 편리하게 es6문에 따라 변경된 문법입니다.

기존의 방법과 비슷하지만 모든 기능이 같지는 않습니다.

화살표 함수 표기법

- function을 생략해도 됩니다.

- 함수에 매개변수가 단 하나 뿐이라면 괄호도 생략 가능합니다. 

- 함수 바디가 표현식 하나라면 중괄호와 return 또한 생략 가능합니다.

화살표 함수 특징

- this를 바인딩하지 않는다.

- arguments가 존재하지 앖는다.

- new.target을 바인딩하지 않는다.

- 생성자를 갖지 않는다.

- prototype을 갖지 않는다.

기본문법은 다음과 같습니다.

# 기명 함수로의 선언
const exam = function test() {
return 'Hello world!'
}
​
# 익명 함수로의 선언
constexam = function() {
 return 'Hello world!'
}
​
# 새로 추가된 화살표 함수 선언
const exam = () => {
 return 'Hello world!'
}
​
const exam = () =>'Hello world!'
const exam = params1 => params1+1

this를 만들지 않아요!

# 뭐든지 예제로 보는게 제일 편한듯 하다.
# 자, 봐보자
const obj = {
   name: 'dongsu',
   test: function() {
   console.log('1st', this)
     functioninnerTest() {
       console.log('2nd', this)
     }
  return innerTest()
 }
};
obj.test();

위의 예제에서의 첫번째 this는 obj객체를 바라봅니다.
두번쨰 this는 window객체 혹은 undefined를 나타낼 것입니다.

일반적으로 this객체는 부모와 자식간의 상속에서 발생합니다. 
자바스크립트에서 생성자 혹은 객체의 프로퍼티(메소드)를 사용하지 않는경우 this는 전역객체가 됩니다.

위의 코드에서 함수 innerTest는 생성자 혹은 메소드가 아니기 때문에 전역객체를 가리키게 됩니다.

그렇기 때문에 크롬 브라우저에서 테스트를 해보면 두번째 this가 window 객체를 바라보게 되는것이죠

그렇다면 화살표 함수를 사용했을때는 어떻게 될까?

기본적으로 화살표 함수는 this객체를 bind하지 않습니다. 아래 예제 코드를 통해 확인해 봅시다.

# test1
const obj = {
  name: 'dongsu',
  test: function() {
     console.log('1st', this)
     const inner = () => {
       console.log(this)
   }
   return inner();
 }
}
// 첫번쨰 this는 obj 객체를 두번쨰 this 또한 obj객체를 나타냅니다.
​
# test2
constobj={
name: 'dongsu',
test: () =>{
   console.log('1st', this)
   constinner=() =>{
     console.log('2nd'this)
  }
   returninner();
}
}
// 첫번쨰 this는 window 객체를 두번쨰 this 또한 window 객체를 나타냅니다.
// 화살표 함수에서는 call, apply를 사용할 수 없습니다.

또한, 화살표 함수는 arguments를 바인딩하지 않습니다.

const array = [1,2,3,4,5]
​
const arg = ([param1, param2, ...param3]) {
  console.log(param1, param2, param3)
  console.log(arguments)
}
​
arg(array);
// 1, 2, [3,4,5]
// arguments is not defined

new.target 사용이 불가합니다.

const construct = () => {
console.log(new.target)
}
​
// SyntaxError: new.target expression is not allowed here
// 만들지도 못하게 합니다.

생성자를 사용할 수 없다.

const test1= function() {
  console.log("Hello world!")
}
​
const test2 = () => {
  console.log("Hello world!")
}
​
const m = new test1();
const n = new test2();
​
// Hello world!
// TypeError: test2 in not a contructor

이름을 거꾸로 찍는 예제!

this의 스코프와 기존 함수선언 및 화살표 함수 선언의 차이점을 유의하면서 보시면 될 꺼 같습니다.

# 간단한 예제를 만들어 보자!
​
// 오류나는 예제
const o ={
 name: 'dongsu',
 reverseWord: function() {
   function getReverseWord() {
     let word=null;
     for(leti=this.name.length-1; i>0; i--) {
       word+=this.name[i]
    }
     return word
  }
   return reverseWord()
}
};
​
​
// 맞는 예제
const o = {
 name: 'dongsu',
 reverseWord: function() {
   constself=this;
   function getReverseWord() {
     let word='';
     for(leti=self.name.length-1; i>=0; i--) word+=self.name[i];
     return word
  }
  return getReverseWord();
 },
};
​
​
const o = {
 name: 'dongsu',
 reverseWord: function() {
  constgetReverseWord=() =>{
    console.log(this)
    let word='';
    for(let i=this.name.length-1; i>=0; i--) word+=this.name[i];
    return word
  }
  return getReverseWord();
 },
};