FE/리뷰

[모던 자바스크립트 딥다이브] 26장 ES6 함수의 추가 기능

따봉치치 2024. 4. 27. 22:46
728x90

 

 

함수의 구분
  • ES6 이전의 함수는 사용 목적에 따라 명확히 구분되지 않음
    • 모든 함수는 callable이면서 constructor임
    • 메서드 또한 생성자 함수로 호출 가능함
    • 콜백 함수도 가능
    • 사용 목적에 따라 명확한 구분이 없어 실수를 유발할 가능성이 있고 성능에 좋지 않음
  • ES6 이후 함수를 사용 목적에 따라 세가지 종류로 명확히 구분
ES6 함수의 구분 constructor prototype super arguments
일반 함수 O O X O
메서드 X X O O
화살표 함수 X X X X

 

 

메서드
  • 메서드 축약 표현으로 정의된 함수
  • 메서드는 인스턴스를 생성할 수 없는 non-constructor => 생성자 함수로서 호출 불가
  • 자신을 바인딩한 객체를 가리키는 내부 슬롯 [[HomeObject]]를 가짐 => super 참조 가능
화살표 함수
  • function 키워드 대신 화살표를 사용하여 기존의 함수 정의 방식보다 간략하게 함수 정의
  • 내부 동작도 기존의 함수보다 간략함

 

화살표 함수 정의
  • 함수 정의
    • 함수 표현식으로 정의해야함
  • 매개변수 선언
    • 인자가 한개면 소괄호 생략 가능
    • 인자가 없으면 생략 불가
  • 함수 몸체 정의
    • 함수 몸체가 하나의 문으로 구성되면 중괄호 생략 가능
    • 함수 몸체 내부의 문이 값으로 평가될 수 있는 표현식인 문이라면 암묵적으로 반환됨
    • 객체 리터럴 반환하는 경우 객체 리터럴을 소괄호로 감싸 주어야 함
  • 특징 
    • 즉시 실행 함수로 사용 가능
    • 일급 객체임
    • 콜백 함수로서 정의할 때 유용
// 함수 정의 
const multi = (x,y) => x*y;

// 매개변수 정의
const arrow = x => {};
const arrow = () => {}; 

//함수 몸체 정의
const power = x => x**2;
const arrow = () => const x = 1; // SyntaxError 발생

const create = (id, content) => ({id, content});

 

 

화살표 함수와 일반 함수의 차이
  1. 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor
  2. 중복된 매개변수 이름을 선언할 수 없음
  3. 화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않음 => 스코프 체인을 통해 상위 스코프의 this, arguments, super, new.target 참조함

 

화살표 함수의 this
  • 콜백 함수의 this 문제를 화살표 함수로 해결 가능 => 내부 함수인 콜백 함수의 this가 상위 함수의 객체에 바인딩된 것이 아니라 전역 객체에 바인딩된 문제
  • 화살표 함수는 함수 자체의 this를 갖지 않음
  • 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조함 => lexical this
  • 화살표 함수로 메서드를 정의하는 것은 피해야 함

 

화살표 함수의 super
  • 함수 자체의 super 바인딩을 갖지 않음
  • 화살표 함수 내부에서 super를 참조하면 this와 마찬가지로 상위 스코프의 super를 참조함

 

화살표 함수의 arguments
  • 함수 자체의 arguments 바인딩을 갖지 않음
  • arguments를 참조하면 상위 스코프의 arguments를 참조함
  • 화살표 함수로 가변 인자 함수를 구현해야할때는 반드시 Rest 파라미터 사용해야 함

 

Rest 파라미터
  • Rest 파라미터는 매개변수 이름 앞에 세개의 점 ...을 붙여서 정의한 매개변수
  • Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받음
  • 일반 매개변수와 Rest 매개변수 함께 사용 가능 => Rest 파라미터는 반드시 마지막 파라미터여야하고 단 하나만 선언해야 함
function foo(param, ...rest) {
	console.log(param); // 1
    console.log(...rest); // [2, 3, 4, 5]

};
foo(1,2,3,4,5);

 

 

Rest 파라미터와 arguments 객체
  • ES5에서는 함수 정의 시 매개변수의 개수를 확정할 수 없을 때 arguments 객체를 활용해 인수를 전달받음
  • arguments 객체 : 호출시 전달된 인수들의 정보를 담고 있는 순회 가능한 유사 배열 객체
  • 배열 메서드를 사용하려면 배열로 변환해야 하는 번거로움 있음!
  • ES6에서는 Rest 파라미터를 사용해 가변 인자 함수의 인수 목록을 배열로 직접 전달받을 수 있음
매개변수 기본값
  • 인수가 전달되지 않은 매개변수의 값은 undefined => 의도치 않은 결과나 에러 발생 가능
  • ES6에서 도입된 매개변수 기본값을 사용하면 인수 체크 및 초기화 간소화 가능
function f(x = 0, y = 0) {
	return x + y;
}
728x90