[모던 자바스크립트 Deep Dive] 26장 - ES6 함수의 추가 기능

함수의 구분

자바스크립트는 ES6 이전까지 함수를 다양한 목적으로 사용했다. 이는 언어의 유연성을 보여주는 특징이었지만, 동시에 여러 문제를 야기했다. 하나의 함수가 일반 함수, 생성자 함수, 메서드 등 여러 역할을 수행할 수 있었기 때문에 코드의 의도를 파악하기 어려웠고, 예상치 못한 동작을 일으킬 수 있었다.

 

ES6 이전의 함수는 모두 callable이면서 동시에 constructor였다. 이는 함수를 일반적인 방식으로 호출할 수 있을 뿐만 아니라, new 연산자와 함께 사용하여 객체를 생성할 수도 있었다는 것을 의미한다. 이러한 특성은 다음과 같은 코드를 가능하게 했다.

var foo = function() {
  return 1;
};

foo(); // 일반 함수로 호출
new foo(); // 생성자 함수로 호출
var obj = { foo: foo };
obj.foo(); // 메서드로 호출

 

이러한 다재다능함은 편리해 보였지만, 실제로는 여러 문제를 초래했다. 예를 들어, 객체의 메서드로 정의된 함수도 생성자 함수로 사용될 수 있었다. 이는 의도치 않은 동작을 유발할 수 있었고, 코드의 가독성을 떨어뜨렸다.

var obj = {
  x: 10,
  f: function() { return this.x; }
};

new obj.f(); // f {} (예상치 못한 새로운 객체 생성)

더욱이, 모든 함수가 프로토타입 객체를 생성했기 때문에 메모리 사용량이 불필요하게 증가했다. 이는 특히 콜백 함수와 같이 일회성으로 사용되는 함수에서 문제가 되었다. 함수가 생성자로 사용될 가능성이 전혀 없음에도 불구하고 프로토타입 객체를 생성하는 것은 비효율적이었다.

 

이러한 문제점들을 해결하기 위해 ES6에서는 함수를 세 가지 종류로 명확히 구분했다. 일반 함수, 메서드, 그리고 화살표 함수가 그것이다. 각 함수 유형은 다음과 같은 특성을 가진다:

1. 일반 함수: constructor이며, prototype 프로퍼티를 가진다. super 키워드는 사용할 수 없지만 arguments 객체는 사용 가능하다.
2. 메서드: constructor가 아니며, prototype 프로퍼티도 없다. 대신 super 키워드를 사용할 수 있고, arguments 객체도 사용 가능하다.
3. 화살표 함수: constructor가 아니며, prototype 프로퍼티도 없다. super와 arguments를 사용할 수 없다.

요약하자면 각 함수 유형의 특성은 다음과 같다.

ES6 함수의 구분	constructor	prototype	super	arguments
일반 함수	O	O	X	O
메서드	X	X	O	O
화살표 함수	X	X	X	X

이러한 구분을 통해 각 함수의 용도를 명확히 하고, 불필요한 기능을 제거함으로써 코드의 의도를 더 명확하게 표현할 수 있게 했다. 또한, 불필요한 객체 생성을 방지하여 메모리 사용을 최적화했다.

 

메서드

ES6에서 메서드의 정의가 크게 변경되었다. 이전에는 객체에 바인딩된 함수를 모두 메서드라고 불렀지만, ES6부터는 메서드 축약 표현으로 정의된 함수만을 메서드라고 한다. 이는 단순한 용어의 변경이 아니라, 함수의 동작 방식에 실질적인 차이를 가져왔다.

 

ES6의 메서드는 다음과 같이 정의한다.

const obj = {
  x: 1,
  foo() { return this.x; } // 메서드
};

이렇게 정의된 메서드는 non-constructor다. 즉, new 연산자와 함께 호출할 수 없다. 이는 메서드가 객체의 동작을 정의하는 용도로만 사용되어야 한다는 개념을 강화한 것이다. 메서드를 생성자 함수로 사용하려는 시도는 TypeError를 발생시킨다.

new obj.foo(); // TypeError: obj.foo is not a constructor

 

또한, ES6 메서드는 prototype 프로퍼티를 가지지 않으며, 프로토타입 객체도 생성하지 않는다. 이는 메모리 사용을 최적화하고, 메서드의 본질적인 용도에 집중할 수 있게 한다.

 

ES6 메서드의 또 다른 중요한 특징은 내부 슬롯 [[HomeObject]]를 갖는다는 것이다. 이 슬롯은 메서드가 바인딩된 객체를 가리키며, super 키워드의 동작을 가능하게 한다. super 키워드를 통해 메서드는 자신이 바인딩된 객체의 프로토타입에 쉽게 접근할 수 있다.

const base = {
  name: 'Lee',
  sayHi() {
    return `Hi! ${this.name}`;
  }
};

const derived = {
  __proto__: base,
  sayHi() {
    return `${super.sayHi()}. How are you doing?`;
  }
};

console.log(derived.sayHi()); // "Hi! Lee. How are you doing?"

이 예제에서 derived 객체의 sayHi 메서드는 super.sayHi()를 통해 프로토타입 체인상의 상위 객체인 base의 sayHi 메서드를 호출한다. 이는 [[HomeObject]]가 있기에 가능한 동작이다.

 

주의할 점은 ES6 메서드가 아닌 함수에서는 super 키워드를 사용할 수 없다는 것이다. 예를 들어, 다음과 같은 코드는 SyntaxError를 발생시킨다.

const derived = {
  __proto__: base,
  sayHi: function() {
    return `${super.sayHi()}`; // SyntaxError
  }
};

 

이러한 변화들은 메서드의 역할을 명확히 하고, 객체지향 프로그래밍의 개념을 자바스크립트에 더 잘 적용할 수 있게 했다. 메서드는 이제 객체의 행동을 정의하는 특별한 함수로, 생성자 기능은 제거되고 super 키워드를 통한 프로토타입 접근이 가능해졌다. 이로 인해 코드의 의도가 더 명확해지고, 실수로 인한 버그 발생 가능성도 줄어들었다.

 

 

화살표 함수

화살표 함수는 ES6에서 도입된 새로운 함수 정의 방식이다. function 키워드 대신 화살표(=>)를 사용하여 더욱 간략한 방법으로 함수를 정의할 수 있다. 하지만 화살표 함수는 단순히 기존 함수를 축약한 표현이 아니다. 화살표 함수는 내부 동작도 기존의 함수보다 간략화되어 있으며, 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하는 대안으로 유용하게 사용된다.

 

화살표 함수 정의

화살표 함수는 함수 선언문으로 정의할 수 없고 함수 표현식으로만 정의해야 한다. 기본적인 화살표 함수의 정의 방식은 다음과 같다.

const multiply = (x, y) => x * y;
console.log(multiply(2, 3)); // 6

 

화살표 함수의 매개변수가 여러 개인 경우 소괄호 () 안에 매개변수를 선언한다. 매개변수가 하나뿐이라면 소괄호를 생략할 수 있다. 매개변수가 없는 경우 소괄호를 생략할 수 없다.

const arrow1 = (x, y) => { ... };  // 매개변수가 여러 개인 경우
const arrow2 = x => { ... };       // 매개변수가 하나인 경우
const arrow3 = () => { ... };      // 매개변수가 없는 경우

 

함수 몸체 정의에 있어서, 함수 몸체가 하나의 문으로 구성된다면 함수 몸체를 감싸는 중괄호 {}를 생략할 수 있다. 이때 함수 몸체 내부의 문이 값으로 평가될 수 있는 표현식인 문이라면 암묵적으로 반환된다.

const power = x => x ** 2;
console.log(power(2)); // 4

 

객체 리터럴을 반환하는 경우에는 객체 리터럴을 소괄호 ()로 감싸주어야 한다. 그렇지 않으면 객체 리터럴의 중괄호 {}를 함수 몸체를 감싸는 중괄호로 잘못 해석한다.

const createObj = (id, content) => ({ id, content });
console.log(createObj(1, 'JavaScript')); // {id: 1, content: "JavaScript"}

 

화살표 함수도 즉시 실행 함수(IIFE)로 사용할 수 있으며, 일급 객체이므로 고차 함수(Array.prototype.map, filter, reduce 등)에 인수로 전달할 수 있다. 이는 기존의 함수 표현식보다 표현이 간결하고 가독성이 좋다.

 

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

화살표 함수는 일반 함수와 몇 가지 중요한 차이점을 가지고 있다.

 

const Foo = () => {};
new Foo(); // TypeError: Foo is not a constructor

- 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor다. 따라서 new 연산자와 함께 호출할 수 없다.

const Foo = () => {};
console.log(Foo.hasOwnProperty('prototype')); // false

- 화살표 함수는 prototype 프로퍼티가 없고 프로토타입도 생성하지 않는다.

 

const arrow = (a, a) => a + a; // SyntaxError: Duplicate parameter name not allowed in this context

- 화살표 함수는 중복된 매개변수 이름을 선언할 수 없다. 일반 함수는 strict mode에서만 중복된 매개변수 이름을 선언하면 에러가 발생하지만, 화살표 함수는 항상 에러가 발생한다.

- 화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다. 따라서 화살표 함수 내부에서 이들을 참조하면 스코프 체인을 통해 상위 스코프의 this, arguments, super, new.target을 참조한다.

 

this

화살표 함수의 가장 큰 특징은 바로 this 바인딩 방식이다. 화살표 함수는 함수 자체의 this 바인딩을 갖지 않는다. 대신 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조한다. 이를 lexical this라고 부른다.

 

이는 "콜백 함수 내부의 this 문제"를 해결하는데 매우 유용하다. 일반 함수로 정의된 콜백 함수 내부의 this는 전역 객체를 가리키는 문제가 있었는데, 화살표 함수를 사용하면 이 문제를 간단히 해결할 수 있다.

class Prefixer {
  constructor(prefix) {
    this.prefix = prefix;
  }

  add(arr) {
    return arr.map(item => this.prefix + item);
  }
}

const prefixer = new Prefixer('-webkit-');
console.log(prefixer.add(['transition', 'user-select']));
// ['-webkit-transition', '-webkit-user-select']

이 예제에서 map 메서드의 콜백 함수로 화살표 함수를 사용했다. 이 화살표 함수 내부의 this는 상위 스코프인 add 메서드의 this를 그대로 참조하므로, prefixer 객체를 가리키게 된다.

 

window.x = 1;
const normal = function() { return this.x; };
const arrow = () => this.x;

console.log(normal.call({ x: 10 })); // 10
console.log(arrow.call({ x: 10 }));  // 1

또한, 화살표 함수는 call, apply, bind 메서드를 사용하여 this를 변경할 수 없다. 항상 상위 스코프의 this 바인딩을 참조한다.

 

super

class Base {
  constructor(name) {
    this.name = name;
  }
  sayHi() {
    return `Hi! ${this.name}`;
  }
}

class Derived extends Base {
  sayHi = () => `${super.sayHi()} How are you doing?`;
}

const derived = new Derived('Lee');
console.log(derived.sayHi()); // Hi! Lee How are you doing?

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

 

arguments

(function () {
  const foo = () => console.log(arguments); // [Arguments] { '0': 1, '1': 2 }
  foo(3, 4);
}(1, 2));

화살표 함수는 함수 자체의 arguments 바인딩을 갖지 않는다. 따라서 화살표 함수 내부에서 arguments를 참조하면 this와 마찬가지로 상위 스코프의 arguments를 참조한다.

 

const sum = (...args) => args.reduce((pre, cur) => pre + cur, 0);
console.log(sum(1, 2, 3, 4, 5)); // 15

 

화살표 함수에서 가변 인자 함수를 구현해야 할 때는 반드시 Rest 파라미터를 사용해야 한다.

 

Rest 파라미터

Rest 파라미터는 ES6에서 도입된 기능으로, 함수의 매개변수를 좀 더 유연하게 처리할 수 있게 해준다. 이 기능은 함수에 전달된 인수들의 목록을 배열로 전달받을 수 있게 해주며, 가변 인자 함수를 구현할 때 매우 유용하다.

 

기본 문법

Rest 파라미터는 매개변수 이름 앞에 세 개의 점(...)을 붙여 정의한다. 이렇게 정의된 Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다. 다음은 Rest 파라미터의 기본적인 사용 예시다.

function sum(...numbers) {
    return numbers.reduce((acc, num) => acc + num, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // 15

이 예제에서 ...numbers가 Rest 파라미터다. 함수 호출 시 전달된 모든 인수가 numbers 배열에 담겨 함수 내부로 전달된다.

 

Rest 파라미터는 일반 매개변수와 함께 사용할 수 있다. 이 경우, Rest 파라미터는 반드시 마지막 매개변수여야 한다. 함수에 전달된 인수들은 매개변수와 Rest 파라미터에 순차적으로 할당된다.

function introduce(name, age, ...hobbies) {
    console.log(`이름: ${name}, 나이: ${age}`);
    console.log(`취미: ${hobbies.join(', ')}`);
}

introduce('홍길동', 30, '독서', '운동', '여행');
// 이름: 홍길동, 나이: 30
// 취미: 독서, 운동, 여행

이 예제에서 name과 age는 일반 매개변수로, 첫 번째와 두 번째 인수를 각각 전달받는다. 그 이후의 모든 인수는 hobbies 배열에 담겨 전달된다.

 

Rest 파라미터에는 몇 가지 제약사항이 있다.

// 올바른 사용
function correct(...rest) {}

// 잘못된 사용: Rest 파라미터가 마지막이 아님
function incorrect(...rest, param) {} // SyntaxError

// 잘못된 사용: Rest 파라미터를 여러 개 사용
function alsoIncorrect(...rest1, ...rest2) {} // SyntaxError

1. Rest 파라미터는 함수 정의에서 단 하나만 선언할 수 있다.
2. Rest 파라미터는 반드시 마지막 매개변수여야 한다.

또한, Rest 파라미터는 함수 객체의 length 프로퍼티에 영향을 주지 않는다.

function foo(...rest) {}
console.log(foo.length); // 0

function bar(a, b, ...rest) {}
console.log(bar.length); // 2

함수 객체의 length 프로퍼티는 함수를 정의할 때 선언한 매개변수의 개수를 가리키지만, Rest 파라미터는 이 개수에 포함되지 않는다.

 

 

Rest 파라미터와 arguments 객체

Rest 파라미터가 도입되기 전에는 함수에 전달된 인수들을 다루기 위해 arguments 객체를 사용했다. arguments 객체는 함수 호출 시 전달된 인수들의 정보를 담고 있는 순회 가능한 유사 배열 객체로, 함수 내부에서 지역 변수처럼 사용할 수 있었다.

 

그러나 arguments 객체는 배열이 아닌 유사 배열 객체이기 때문에, 배열 메서드를 사용하려면 Function.prototype.call이나 Function.prototype.apply 메서드를 사용해 arguments 객체를 배열로 변환해야 하는 번거로움이 있었다.

function sum() {
    // arguments 객체를 배열로 변환
    var array = Array.prototype.slice.call(arguments);
    return array.reduce(function (acc, cur) {
        return acc + cur;
    }, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // 15

 

반면 Rest 파라미터를 사용하면 인수 목록을 배열로 직접 전달받을 수 있어, 이러한 번거로움을 피할 수 있다.

function sum(...args) {
    return args.reduce((acc, cur) => acc + cur, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // 15

Rest 파라미터를 사용한 방식이 더 간결하고 가독성이 좋다는 것을 알 수 있다.

 

const sum = (...args) => args.reduce((acc, cur) => acc + cur, 0);

console.log(sum(1, 2, 3, 4, 5)); // 15

화살표 함수에서의 사용도 주목할 만하다. 화살표 함수는 자체적인 arguments 객체를 갖지 않는다. 따라서 화살표 함수로 가변 인자 함수를 구현해야 할 때는 반드시 Rest 파라미터를 사용해야 한다.

 

이처럼 Rest 파라미터는 ES6에서 도입된 강력한 기능으로, 함수의 매개변수를 유연하게 처리할 수 있게 해주며 특히 가변 인자 함수를 구현할 때 매우 유용하다.

 

 

매개변수 기본값

자바스크립트에서 함수를 호출할 때, 매개변수의 개수와 인수의 개수가 일치하지 않아도 에러가 발생하지 않는다. 이는 자바스크립트 엔진이 매개변수와 인수의 개수를 체크하지 않기 때문이다. 그러나 이러한 특성은 때때로 예기치 않은 결과를 초래할 수 있다.

 

예를 들어, 다음과 같은 함수가 있다고 가정해보자.

function sum(x, y) {
    return x + y;
}

console.log(sum(1)); // NaN

이 함수에 인수를 하나만 전달하면, y는 undefined가 되고, 결과적으로 NaN이 반환된다. 이는 의도하지 않은 결과일 가능성이 높다.

 

이러한 문제를 해결하기 위해 ES6 이전에는 다음과 같은 방어 코드를 사용했다.

function sum(x, y) {
    x = x || 0;
    y = y || 0;
    return x + y;
}

그러나 이 방식은 코드가 길어지고 가독성이 떨어진다는 단점이 있다.

 

ES6에서는 이 문제를 해결하기 위해 매개변수 기본값(Default Parameter)이라는 새로운 기능을 도입했다. 이를 사용하면 함수 내에서 수행하던 인수 체크 및 초기화를 간소화할 수 있다.

 

다음은 매개변수 기본값을 사용한 예시다.

function sum(x = 0, y = 0) {
    return x + y;
}

console.log(sum(1, 2)); // 3
console.log(sum(1));    // 1
console.log(sum());     // 0

이 방식을 사용하면 인수를 전달하지 않거나 undefined를 전달한 경우에 지정한 기본값이 적용된다. 코드가 간결해지고 가독성이 향상되는 것을 볼 수 있다.

 

매개변수 기본값 사용 시 주의해야 할 점들이 있다.

 

function logName(name = 'Anonymous') {
    console.log(name);
}

logName();          // Anonymous
logName(undefined); // Anonymous
logName(null);      // null
logName('');        // (빈 문자열)

- 매개변수 기본값은 매개변수에 인수를 전달하지 않았거나 undefined를 전달한 경우에만 유효하다. null이나 다른 falsy 값을 전달하면 그 값이 그대로 사용된다.

 

function invalidFunc(...rest = []) {
    // SyntaxError: Rest parameter may not have a default initializer
}

- Rest 파라미터에는 기본값을 지정할 수 없다. 다음과 같은 코드는 문법 에러를 발생시킨다.

 

function foo(x, y = 0) {
    console.log(arguments.length);
    console.log(x, y);
}

console.log(foo.length); // 1

foo(1);    // arguments.length: 1, x: 1, y: 0
foo(1, 2); // arguments.length: 2, x: 1, y: 2

- 매개변수 기본값은 함수 객체의 length 프로퍼티와 arguments 객체에 영향을 주지 않는다.

 

바로 위의 코드에서 foo.length가 1인 이유는 함수 객체의 length 프로퍼티가 첫 번째 기본값을 갖는 매개변수 이전까지의 매개변수 개수만을 나타내기 때문이다.

 

function getDefault() {
    return new Date().getDay() ? 'Weekday' : 'Weekend';
}

function greeting(name, day = getDefault()) {
    console.log(`Hello ${name}, today is a ${day}.`);
}

greeting('John'); // 요일에 따라 다른 결과 출력

매개변수 기본값은 함수를 정의할 때 값을 지정하는 것이 일반적이지만, 동적으로 기본값을 할당할 수도 있다.

 

이러한 매개변수 기본값 기능은 함수를 더 안전하고 유연하게 만들어준다. 인수가 전달되지 않았을 때의 동작을 명확히 정의할 수 있어 버그를 줄이고 코드의 가독성을 높일 수 있다. 또한 함수 호출 시 불필요한 인수 전달을 줄여 코드를 더 간결하게 만들 수 있다.

 

 

요약

함수의 구분

• ES6에서는 함수를 사용 목적에 따라 일반 함수, 메서드, 화살표 함수로 명확히 구분했다.
• 각 함수 유형은 constructor 여부, prototype 프로퍼티 소유 여부, super와 arguments 사용 가능 여부 등에서 차이가 있다.

메서드

• ES6에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다.
• 메서드는 non-constructor로, new 연산자로 호출할 수 없다.
• 메서드는 내부 슬롯 [[HomeObject]]를 가지며, 이를 통해 super 키워드를 사용할 수 있다.

화살표 함수

• 화살표 함수는 function 키워드 대신 화살표(=>)를 사용하여 더 간략한 방법으로 함수를 정의한다.
• 화살표 함수는 항상 익명 함수로 정의하며, 생성자 함수로 사용할 수 없다.
• 화살표 함수는 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다.
• 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조한다(lexical this).

Rest 파라미터

• Rest 파라미터(...)는 함수에 전달된 인수들의 목록을 배열로 전달받는다.
• Rest 파라미터는 함수 정의 시 매개변수 이름 앞에 세 개의 점(...)을 붙여 정의한다.
• Rest 파라미터는 반드시 마지막 매개변수여야 하며, 단 하나만 선언할 수 있다.
• 화살표 함수에서 가변 인자 함수를 구현할 때는 반드시 Rest 파라미터를 사용해야 한다.

매개변수 기본값

• ES6에서는 매개변수 기본값을 사용하여 함수 내에서 수행하던 인수 체크 및 초기화를 간소화할 수 있다.
• 매개변수 기본값은 매개변수에 인수를 전달하지 않았거나 undefined를 전달한 경우에만 유효하다.
• 매개변수 기본값은 함수 객체의 length 프로퍼티와 arguments 객체에 영향을 주지 않는다.
• 매개변수 기본값은 함수를 정의할 때 값을 지정하는 것이 일반적이지만, 동적으로 기본값을 할당할 수도 있다.

 

예상문제 [🔥]

https://github.com/junh0328/prepare_frontend_interview?tab=readme-ov-file

본래는 위 링크에서 예상문제를 발췌했으나, 이번 파트의 경우 그러한 문제가 없기에 직접 만듦.

ES6에서 도입된 화살표 함수의 특징과 일반 함수와의 차이점에 대해 설명해주세요.

화살표 함수는 ES6에서 도입된 함수 정의 방식으로, 일반 함수와 몇 가지 중요한 차이점이 있습니다.

• 첫째, 화살표 함수는 더 간결한 문법을 제공합니다. 'function' 키워드 대신 화살표(=>)를 사용하여 정의합니다.
• 둘째, 화살표 함수는 항상 익명 함수입니다. 따라서 함수 표현식으로만 정의할 수 있습니다.
• 셋째, 가장 중요한 차이점으로, 화살표 함수는 자체적인 this 바인딩을 갖지 않습니다. 대신 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조합니다. 이를 'lexical this'라고 부릅니다. 이 특성은 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하는 데 매우 유용합니다.
• 넷째, 화살표 함수는 생성자 함수로 사용할 수 없습니다. 즉, new 연산자와 함께 호출할 수 없습니다.
• 다섯째, 화살표 함수는 arguments 객체를 생성하지 않습니다. 대신 Rest 파라미터를 사용하여 가변 인자를 처리할 수 있습니다.
• 마지막으로, 화살표 함수는 자체적인 super 바인딩을 갖지 않습니다.

이러한 특징들로 인해 화살표 함수는 특히 콜백 함수나 메서드가 아닌 함수를 간결하게 표현할 때 유용하게 사용됩니다.

 

Rest 파라미터와 arguments 객체의 차이점에 대해 설명해주세요.

Rest 파라미터와 arguments 객체는 모두 함수에 전달된 인수들을 다루는 방법을 제공하지만, 몇 가지 중요한 차이점이 있습니다.

• 첫째, 형태와 사용법의 차이입니다. arguments 객체는 함수 내부에서 자동으로 생성되는 유사 배열 객체입니다. 반면 Rest 파라미터는 함수 정의 시 매개변수 앞에 '...'을 붙여 명시적으로 선언합니다.
• 둘째, Rest 파라미터는 실제 배열입니다. 따라서 배열 메서드를 직접 사용할 수 있습니다. 반면 arguments 객체는 유사 배열 객체이므로, 배열 메서드를 사용하려면 Array.prototype.slice 등을 사용해 배열로 변환해야 합니다.
• 셋째, Rest 파라미터는 나머지 인수들만을 포함합니다. 즉, 명시적으로 선언된 매개변수를 제외한 나머지 인수들을 배열로 전달받습니다. 반면 arguments 객체는 함수에 전달된 모든 인수를 포함합니다.
• 넷째, 화살표 함수에서의 사용 가능 여부입니다. 화살표 함수는 arguments 객체를 생성하지 않지만, Rest 파라미터는 사용할 수 있습니다.
• 마지막으로, Rest 파라미터는 함수 정의 시 선언하므로 보다 명시적이고 가독성이 좋습니다.

이러한 차이점들로 인해, 최신 자바스크립트에서는 arguments 객체보다 Rest 파라미터를 사용하는 것이 권장됩니다.

 

ES6에서 도입된 매개변수 기본값의 특징과 장점에 대해 설명해주세요.

ES6에서 도입된 매개변수 기본값은 함수 매개변수에 기본값을 직접 설정할 수 있게 해주는 기능입니다.

주요 특징과 장점은 다음과 같습니다:

• 첫째, 함수 호출 시 인수를 전달하지 않거나 undefined를 전달했을 때 지정된 기본값이 적용됩니다. 이는 함수의 안정성을 높이고, 예상치 못한 에러를 방지합니다.
• 둘째, 함수 내부에서 수행하던 인수 체크 및 초기화 로직을 함수 선언부로 이동시킬 수 있어, 함수 본문을 더 깔끔하게 유지할 수 있습니다.
• 셋째, 매개변수 기본값은 함수를 호출할 때마다 평가됩니다. 따라서 동적으로 기본값을 할당할 수도 있습니다.
• 넷째, 매개변수 기본값은 함수의 length 프로퍼티에 영향을 주지 않습니다. 즉, 기본값이 지정된 매개변수와 그 뒤에 오는 매개변수는 length에 포함되지 않습니다.
• 다섯째, 매개변수 기본값을 사용하면 함수 호출 시 불필요한 인수 전달을 줄일 수 있어, 코드를 더 간결하게 만들 수 있습니다.

이러한 특징들로 인해 매개변수 기본값은 함수를 더 안전하고 유연하게 만들어주며, 코드의 가독성과 유지보수성을 향상시킵니다.