ES6 함수

ES6 함수 이전의 모든 함수는 일반 함수로서 호출 가능 및 생성자 함수로서도 호출이 가능했다.
=> callable(호출할 수 있는 함수), constructor(인스턴스를 생성할 수 있는 함수)

메서드(객체에 바인딩된 함수)도 마찬가지였다.
: constructor => prototype 프로퍼티를 가진다. => prototype 객체도 생성
콜백 함수(함수에 전달되어 보조 함수의 역할 수행)도 마찬가지였다.
: constructor => 불필요한 prototype 객체 생성

=> 사용 목적에 따라 명확한 구분이 없으므로 호출 방식에 제약 X, 생성자 함수로 호출되지 않아도 prototype 객체 생성

함수를 사용 목적에 따라 3 종류로 구분

일반 함수: 함수 선언문이나 함수 표현식으로 정의한 함수, constructor + prototype + arguments

메서드: non-constructor, super

화살표 함수: non-constructor

메서드

매서드 축약 표현으로 정의된 함수

인스턴스를 생성할 수 없는 non-constructor => 생성자 함수로서 호출할 수 없다.

const obj = {
      x: 1,
      foo() { return this.x; },	// 메서드
      bar: function() { return this.x; }	// 일반함수
};

new obj.foo(); // Type error
obj.foo.hasOwnProperty('prototype');	// false

자신을 바인딩한 객체를 가리키는 내부 슬롯 [[HomeObject]]를 갖는다.

=> super 키워드를 사용할 수 있다.

메서드가 아닌 다른 함수는 내부 슬롯 [[HomeObject]]를 갖지 않기 때문에 super 키워드 사용 불가

화살표 함수

function 키워드 대신 화살표를 사용해 기존 함수 정의 방식보다 표현과 내부 동작을 간략하게 함수 정의

콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결

함수 표현식으로 정의, 즉시 실행 함수로 사용 가능

일급 객체 => .map, .filter, .reduce 등 고차함수에 인수로 전달 가능

const arrowFunction = (a,b) => {
	console.log(a+b);
    return { a, b };
};

소괄호() 안에 매개변수 선언
매개 변수
한 개인 경우: 소괄호 생략 가능
없는 경우: 소괄호 생략 불가
함수 몸체
하나의 문: 중괄호 생략 가능
표현식이 아닌 문: 생략 불가능
여러 개의 문: 생략 불가능
객체 리터럴을 반환하는 경우: 객체 리터럴을 소괄호로 감싸주어야 한다.
감싸지 않으면 객체 리터럴의 중괄호 {}를 함수 몸체를 감싸는 중괄호로 잘못 해석

화살표 함수와 일반 함수의 차이

화살표 함수는 인스턴스를 생성할 수 없는 non-constructor
=> prototype 프로퍼티가 업소 prototype도 생성하지 않는다.
중복된 매개 변수 이름을 선언할 수 없다.
=> 일반 함수: 중복된 매개변수 이름 선언 허용(strict mode에서 중복된 매개 변수 선언 시 에러 발생)
=> 화살표 함수: 에러 발생
화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다.
- this, arguments, super, new.target 참조 시 상위 스코프의 this, arguments, super, new.target을 참조
- 화살표 함수 중첩 시 스코프 체인 상에서 가장 가까운 상위 함수 중 화살표 함수가 아닌 함수의 this, arguments, super, new.target을 참조

본 게시글은 모던자바스크립트 Deep Dive - 자바스크립트의 기본 개념 책을 읽고 정리했습니다.
더 자세한 내용은 책을 구매해보시길 권장드립니다!

728x90