rest parameter와 arrow function

김서현·2025년 1월 17일

frontend

목록 보기

17/34

1. Rest Parameter (나머지 매개변수)

Rest Parameter는 함수에 전달되는 여러 개의 값을 하나의 배열로 모아주는 기능.
쉽게 말해, 함수가 얼마나 많은 값을 받을지 모를 때 유용.

설명

함수가 호출될 때 전달된 값(인자)을 배열로 처리할 수 있습니다.
... (점 세 개)를 사용합니다.

예시 코드

function sum(...numbers) {
  // numbers는 배열로 모든 인자를 받음
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3)); // 6
console.log(sum(10, 20, 30, 40)); // 100

한 줄 요약

함수에 여러 값을 넘겨주면 Rest Parameter가 배열로 묶어서 처리!!

**2. Arrow Function (화살표 함수)

Arrow Function은 간단하게 함수를 작성할 수 있는 방법.
일반적인 함수 선언보다 코드가 짧아지고 간결.

설명

function 대신 => (화살표)를 사용하여 함수 작성.
코드가 짧아질 뿐 아니라, this 키워드가 다른 함수와 다르게 작동해서 더 직관적.
즉, 일반 함수(function)과 달리 this를 고정시킵니다.// 추가 공부 예정. 넘나 어려운 것.
this는 함수가 작성된 위치의 주인을 사용합니다. (헷갈리지 않음!)

예시 코드

// 일반 함수 선언
const add = function (a, b) {
  return a + b;
};

// 화살표 함수로 동일한 기능 작성
const addArrow = (a, b) => a + b;

console.log(add(2, 3)); // 5
console.log(addArrow(2, 3)); // 5

추가 예시 (1줄 함수)

화살표 함수로 한 줄로 작성이 가능:

const greet = (name) => `Hello, ${name}!`;

console.log(greet("Alice")); // Hello, Alice!

요약

Rest Parameter: 여러 값을 함수로 전달할 때 배열로 처리.
Arrow Function: 함수를 짧고 간단하게 화살표(=>)로 작성.

참고

일반 함수에서의 this

예시 1: 객체 안에서 함수 호출

const obj = {
  name: "Alice",
  sayName: function () {
    console.log(this.name); // 'this'는 obj를 가리킴
  },
};

obj.sayName(); // 출력: Alice

여기서 this는 obj를 가리켜. 왜냐하면 sayName()을 obj가 호출했기 때문!

예시 2: 그냥 호출하면?

function sayName() {
  console.log(this.name); // 'this'는 전역 객체를 가리킴
}

sayName(); // 출력: undefined (브라우저에서는 window.name)

함수가 독립적으로 호출되면, this는 브라우저에서는 window를, Node.js에서는 전역 객체를 가리켜.

Arrow Function에서의 this

Arrow Function은 this를 "고정"시킴
일반 함수는 호출 방식에 따라 this가 바뀌지만, Arrow Function은 this가 작성된 위치의 주인을 사용해.

예시: 일반 함수와 Arrow Function의 차이

const obj = {
  name: "Alice",
  sayName: function () {
    const inner = () => {
      console.log(this.name); // Arrow Function은 obj를 그대로 사용
    };
    inner();
  },
};

obj.sayName(); // 출력: Alice