자바스크립트 화살표 함수 그냥 함수 차이

공부한 블로그글 을 정리한 내용입니다.

https://yceffort.kr/2020/05/difference-between-function-and-arrow

Home

https://hhyemi.github.io/2021/06/09/arrow.html

JavaScript - 화살표 함수와 일반 함수의 차이 - CODE:H

this

console.log(this === window) // true

this 는 현재 실행 문맥을 뜻한다. 누가 호출했냐를 뜻한다.

 

const hello = {
  hi: function () {
    console.log(this === window)
    console.log(this)
  },
}
hello.hi() 
// false
// {hi: ƒ}

hi에서 this를 호출하게되면 this는 hi가 된다.

 

function createObject() {
  console.log('Inside `createObject`:', this.foo, this)
  return {
    foo: 42,
    bar: function () {
      console.log('Inside `bar`:', this.foo, this)
    },
  }
}

createObject.call({ foo: 21 }).bar()

//Inside `createObject`: 21, {foo: 21}
//Inside `bar`: 42, bar: f

그런데 call 함수를 보게 되었다.

call 함수가 뭘까?

2022.02.11 - [우당당탕 풀스택] - 자바스크립트 call, bind

자바스크립트 call, bind

 

위 console.log에서 call 함수로 {foo:21} 이 넘어가게 되고 , bar 가 호출 되는 시점에서 this는 return 문 안을 가르키게 된다. 

 

화살표 함수에서는

function createObject() {
  console.log('Inside `createObject`:', this.foo, this)
  return {
    foo: 42,
    bar: () => console.log('Inside `bar`:', this.foo, this),
  }
}

createObject.call({ foo: 21 }).bar()

//Inside `createObject`: 21, {foo: 21}
//Inside `bar`: 21, {foo: 21}

bar 가 호출되었을때의 this가 가장 상위를 가르키게 된다. 가장 상위는 처음에 call 파라미터로 들어온 {foo:21}이다.

 

생성자 함수로 사용가능한지.

일반 함수는 생성자 함수로 사용이 가능하다.

그러나 화살표 함수는 생성자 함수로 사용할 수 없다. prototype 프로퍼티를 가지고 있지 않기 때문이다.

function fun() {
  this.num = 1234;
}
const arrFun = () => {
  this.num = 1234;
};

const funA = new fun();
console.log(funA.num); // 1234

const funB = new arrFun(); // Error

 

arguments 사용 가능 여부

일반 함수 에서는 함수가 실행 될때 암묵적으로 arguments 변수가 전달되어 사용할 수 있다.

그러나 화살표 함수에서는 arguments 변수가 전달되지 않는다.

function fun() {
  console.log(arguments); // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
}

fun(1, 2, 3);

일반 함수는 arguments 변수가 전달되어서 [1,2,3]이 찍힌다.

 

그러나 

const arrFun = () => {
  console.log(arguments); // Uncaught ReferenceError: arguments is not defined
};

fun(1, 2, 3);

화살표 함수는 arguments를 정의할 수 없다고 나온다.