JavaScript - Arrow Function

in JS on 공부, Javascript


기존에는 함수 표현식으로 함수를 여러개 만들었다.

var a = function(){
  return new Data()
}

var = () => {
  return new Date()
}

//function 지우고 뒤에 화살표 붙이면 된다.

var b = function(a){
  return a * a
}

var b = (a) => {
  return a*a
}

// 함수 내용에 리턴 값 밖에 없을 때는

var a = () => new Date(); //이렇게까지도 가능하다.

arrow 함수는 애가 () 어떤걸 받아서 => 뒤에게 될 것이다. 이런 뜻이다.

또 인자가 하나밖에 없는 경우는

var b = a => a*a

//인자부분에 씌우는 괄호도 생략이 가능하다.


var e = function (x){
  return {
    x: x
  }
}

//위 같은 애들은

var e = x => ({ x })

//() 괄호를 붙여서 명시적으로 객체임을 나타낸다.

var f = function(a){
  return function(b){
    return a + b;
  }
}

var f = a => b => a + b; //로 바꿀 수 있다.

var y = f(1);
var z = y(2);

var z = f(1)(2);

인자가 없을 때는 괄호를 무조건 붙여야 하는데, 이게 귀찮아서 없는 인자를 받는다는 것도 있다.

var b = _ => 10; // _와 $만 변수 맨 앞에 올 수 있다.
const b =_=> 10; //떨떠름한 이모티콘이 된다 ^^

실행컨텍스트 생성시 this 바인딩을 하지 않음

const obj = {
  a: function(){
    console.log(this) //obj
    
    const b = () => {
      console.log(this) //obj. this는 외부 스코프에서 찾음.
    }
    
    const b = function(){
      console.log(this) // window. 바인딩 할게 없어서 전역 객체 binding. b.call(this)를 해야 obj.
    }
    
    b()
  }
}

obj.a()

const a = () => {
  var x = 10;
}

a();

var는 블럭 스코프에 영향을 받지 않으므로 만약 블럭 스코프면 전역으로 x=10이 될 것이고 함수 스코프라면 그 안에 갇혀서 전역으로 인식이 안 될 것이다.

결과적으로는 arrow function은 함수 스코프를 생성한다. 다만, 실행컨텍스트 생성시 this를 바인딩하지 않을 뿐이다.

this를 바인딩을 못한다.

또한 생성자로 쓸 수 없다.

fucntion sum(){
  console.log(this);
}

const sum2 = () => {
  console.log(this);
}

const b = new sum()

const c = new sum2() //안된다.

//concise method //arrow function

  1. prototype 프로퍼티가 없어서 생성자 함수로 못 쓴다.
  2. arguments, callee -> hidden. invoke 해야만 값을 얻을 수 있다.

method는 메소드로만. 따른데서는 함수로 쓸 수 없었다. arrow는 함수로만.

const b = {
  name : '하하',
  bb(){
    return this.name;
  },
  a: x=> {
    return this.name;
  }
}

b.bb(); //하하
b.a(); //window.name을 참조함. 함수로서의 기능.