[JavaScript] Arrow Function에 없는 것

bbio3o·2021년 2월 22일
0

JavaScript

목록 보기
11/13
post-thumbnail

유투브 출처를 보고 정리한 내용입니다.

📌 ES6 화살표 함수와 기존 함수 선언의 차이


1. 함수이름

function myfunc() {
}

const myfunc = function() {
}

const myfunc = () => {
}

화살표함수에서는 함수에 이름을 쓰는게 불가능해 변수에 화살표 함수를 할당해주어야합니다.


2. this

const btn = document.getElementById('btn');
                                    
var myObj = {
  count: 5,
  setCounter: function() {
    console.log(this.count); // 5
  btn.addEventListener('click', (function() {
  	console.log(this);
  }).bind(this.count)); // 5
 }
} 

myObj.setCounter();

// 위는 아래와 같습니다.
var myObj = {
  count: 5,
  setCounter: function() {
    console.log(this.count); // 5
  btn.addEventListener('click', ()=> {
  	console.log(this.count); // 5
  });
 }
}

myObj.setCounter();

함수는 함수가 실행될 때 함수 자신의 스코프 안에 자기만의 this가 존재합니다.
하지만 화살표 함수에는 this가 존재하지 않습니다.
this가 존재하지 않아 call(), bind(), apply() 메서드가 작동하지 않습니다.

const myClass = function() {
  console.log(this);
}

new myClass();

this가 없기 때문에 화살표 함수로는 위와 같은 생성자 인스턴스를 만들 수 도 없습니다.
화살표 함수는 이와 같이 contructor를 쓸 수 없기 때문에 프로토타입이 존재 하지 않는다 는 것을 말합니다.


3. arguments

const myFunc = function() {
  console.log(arguments);
}

const myFunc2 = (...args) => {
  console.log(args); // [1,2,3,4]
}

new myFunc(1,2,3,4);

위와 같이 파라미터를 여러개 넘기면 arguments 속성을 통해 유사배열이 콘솔에 출력됩니다.

하지만 화살표 함수 스코프 내에는 this가 존재 하지 않았던 것처럼 arguments도 존재하지 않습니다.

매번 파라미터를 하나씩 받아오는 대신 ES6 문법인 ...args를 써서 배열로 인자들을 받아 올 수 있습니다.

여기서 arguments는 배열처럼 보이는 유사배열이지만 ...args는 실제 배열입니다.

function outer() {
  const myFunc = () => {
  console.log(arguments);
  }
  myFunc2();
}

outer(1,2,3,4);

재미있는 것은 위와 같이 화살표 함수 선언 밖에 outer function이 있는 경우는 Arguments가 출력되는데,
화살표 함수 자신의 스코프에서 arguments를 찾지 못해서 outer 스코프에서 찾게 된 경우입니다.

Arrow Function의 이점

  • 타이핑 수가 줄어듭니다. -> 코드 가독성 향상
  • this 바인딩을 해주지 않아도 선언된 위치의 바깥쪽 this를 쓰고 싶다면 그냥 화살표 함수를 써주면 됩니다.
profile
그림도 그리는 개발자 🎨👩‍💻

0개의 댓글