1️⃣ Spread Operator를 활용한 배열 전개
목적
- 배열 내부의 데이터를 함수의 파라미터로 한 번에 전달
- 기존 방식: 각 인덱스에 접근해 하나씩 전달하거나 apply()를 사용해야 함
- 최신 방식: spread operator(
...)를 사용하여 배열 요소들을 펼쳐서 인자로 전달
예제
function 더하기(a, b, c) {
console.log(a + b + c);
}
var 어레이 = [10, 20, 30];
// 요즘 방식: Spread Operator
더하기(...어레이); // 결과: 60
과거 방식 (apply 사용)
- Spread operator 이전에는 apply()를 이용해 배열을 파라미터로 전달했음
더하기.apply(undefined, 어레이); // 결과: 60
참고:
apply의 첫 번째 인자인
undefined는 함수 실행 시 특정 객체에 바인딩하지 않겠다는 의미로 사용합니다.
2️⃣ apply와 call 함수
목적
- 함수의 실행 컨텍스트(this)를 변경하여 다른 객체의 메소드를 활용할 수 있음
기본 개념
- apply()와 call() 모두 같은 기능을 수행하지만, 파라미터 전달 방식에서 차이가 있음
예제: 두 객체를 활용한 인사 함수
var person = {
인사: function() {
console.log(this.name + ' 안녕');
}
};
var person2 = {
name: '손흥민'
};
// person 객체의 인사() 함수를 person2의 context로 실행
person.인사.apply(person2); // 출력: "손흥민 안녕"
person.인사.call(person2); // 출력: "손흥민 안녕"
파라미터 전달 방식 차이
- apply:
-
두 번째 인자로 배열을 전달해, 해당 배열의 요소들이 함수의 파라미터로 사용됨
person.인사.apply(person2, [1, 2, 3]);
-
- call:
-
인자를 직접 나열해 전달함
person.인사.call(person2, 1, 2, 3);
-
요약:
- apply와 call 모두 함수를 실행할 때 this를 원하는 객체로 지정할 수 있음
- 단, apply는 파라미터를 배열 형태로, call은 콤마로 구분된 형태로 전달한다.
📌 정리
- Spread Operator:
- ES6부터 도입되어 배열의 요소를 간편하게 함수 인자로 전달할 수 있음
- 가독성이 좋고 코드가 간결해짐
- apply & call:
- 함수의 실행 컨텍스트를 변경해 재사용성을 높임
- 특히, 파라미터 전달 방식에서 차이가 있으며, 상황에 맞게 선택하여 사용
- 실무 활용:
- 가능하면 spread operator를 사용해 가독성과 유지보수성을 높이고,
- 특정 상황(예: 기존 라이브러리 코드 또는 복잡한 컨텍스트 바인딩)에서는 apply와 call을 활용하면 좋습니다.
