ES6 - function

geonmyung·2020년 7월 31일

ES6랑 친해지기

목록 보기

3/5

모던 자바스크립트(javascript) 개발을 위한 ES6 강좌를 수강하면서 새롭게 알게 된 점이나 궁금했던 내용들을 적어보려고 합니다!

1. this context

const obj = {
  runTimeout(){
    setTimeout(function(){
      console.log(this === window); 
    }, 200);
  }
}

obj.runTimeout(); // true

여기서 this가 가리키는 게 window라는 것을 알 수 있다.

※ 잠깐만!! 용어 정리!!

window란?

브라우저의 요소들과 자바스크립트 엔진, 그리고 모든 변수를 담고 있는 객체
window는 모든 객체의 조상으로 전역객체(글로벌객체)라고도 한다.

그리고 runTimeout함수 안에서 printName함수를 호출하려고 하면 에러가 발생하는데 this가 obj 오브젝트가 아닌 window 오브젝트를 가리키기 때문이다.

const obj = {
  runTimeout(){
    setTimeout(function(){
      this.printName();
    }, 200);
  },
  
  printName(){
    console.log("hi! my name is jacob");
  }
}

obj.runTimeout(); // error

어떻게 이 문제를 해결할 수 있을까?

문제해결 방법 #1 (bind로 감싸준다)

const obj = {
  runTimeout(){
    setTimeout(function(){
      this.printName();
    }.bind(this), 200);
  },
  
  printName(){
    console.log("hi! my name is jacob");
  }
}

obj.runTimeout(); // "hi! my name is jacob"

문제해결 방법 #2 (arrow function을 이용해준다)

const obj = {
  runTimeout(){
    setTimeout(() => {
      this.printName();
    } ,200);
  },
  
  printName(){
    console.log("hi! my name is jacob");
  }
}

obj.runTimeout();

만약 arrow function을 사용해서 this를 출력한다면 obj 객체가 나오는 것을 볼 수 있다.
arrow function을 사용하면 함수안의 this는 상위 scope의 this를 가리킨다.(Lexical this)

const obj = {
  runTimeout(){
    setTimeout(() => {
      console.log(this); // obj
      console.log(this === window); // false
      this.printName();
    } ,200);
  },
  
  printName(){
    console.log("hi! my name is jacob");
  }
}

obj.runTimeout();

2. default paramaters

function multiple(num1, num2){
  return num1 * num2;
}

console.log(multiple(3)); // NaN

만약에 default paramater을 설정하면 NaN이 아니라 우리가 원하는 값이 나오도록 만들 수 있다.

function multiple(num1, num2=2){ // 만약 오른쪽 값이 없다면 2를 곱해주세요
  return num1 * num2;
}

console.log(multiple(3)); // 6

function multiple(num1, num2 = {value : 1}){ // 객체형태도 가능하다
  return num1 * num2.value;
}

console.log(multiple(3)); // 3

3. rest paramaters

인자값이 매번 다른 함수에서 사용되는 방법!

function check(...arg_array){
  console.log(toString.call(arg_array)); // "[object Array]"
  const result = arg_array.every((v) => typeof v === "number");
  console.log(result); // false
}

const result = check(1,2,3,4,5,"6");