[ES6] 08. Spread Operator 활용방법 2 & apply, call 함수 알아보기

fe.syhan·2023년 10월 31일

JS 기초

목록 보기
36/52
post-thumbnail

#3. array를 파라미터로 사용할 때

function 더하기(a,b,c){
   console.log(a + b + c)
}

var 어레이 = [10, 20, 30];

어레이라는 자료 안에 있는 모든 숫자 10, 20, 30을 더하기() 함수의 파라미터로 사용하고 싶다면

더하기(10, 20, 30);

직접 손으로 적거나

더하기(어레이[0], 어레이[1], 어레이[2]);

와 같이 해야 할 것이다.

하지만 spread 연산자를 사용하면

function 더하기(a,b,c){
   console.log(a + b + c)
}

var 어레이 = [10, 20, 30];

더하기(...어레이);

10, 20, 30을 더해준 결과가 출력이 된다.

spread 연산자가 없던 시절,

function 더하기(a,b,c){
   console.log(a + b + c)
}

var 어레이 = [10, 20, 30];

더하기(...어레이);  //요즘방식
더하기.apply(undefined, 어레이);  //옛날방식

apply 라는 내장 함수를 사용했었다.

apply / call


var person = {
    인사 : function(){
      console.log(this.name + '안녕')
    }
}
  
var person2 = {
    name : '손흥민'
}

person 이라는 오브젝트에는 인사() 라는 함수가 있다.

person2 에는 name: ‘손흥민’ 이라는 자료가 있다.

그런데 person에 있는 인사()person2 에서도 쓰고 싶다면

person2 에 직접 인사() 를 작성하면 된다.

간혹 불가능한 경우가 있는데 이 때 apply를 사용 하면 된다.

var person = {
    인사 : function(){
      console.log(this.name + '안녕')
    }
}
  
var person2 = {
    name : '손흥민'
}

person.인사.apply(person2);

person.인사() 를 쓰는데 person2 라는 오브젝트에 적용해서 실행해라 또는

person.인사() 를 쓰는데 person2 라는 오브젝트에 있는 함수처럼 실행해라 하는 의미 이다.

apply 함수의 사용법은

실행할함수.apply(적용할곳);

이고 똑같은 기능을 하는 call 이라는 함수가 있다.

var person = {
    인사 : function(){
      console.log(this.name + '안녕')
    }
}
  
var person2 = {
    name : '손흥민'
}

person.인사.apply(person2);
person.인사.call(person2);

apply 와 call은 결과와 사용법이 같다.

차이점이 하나 있는데,

person.인사() 에 파라미터를 넣어서 실행하고 싶은 경우

person.인사.apply(person2, 파라미터);

person.인사.call(person2, 파라미터);

인데

apply는 파라미터를 [array]로 한꺼번에 집어넣을 수 있고,

call은 1,2,3 일반 함수처럼 사용해야 한다.

var person = {
    인사 : function(){
      console.log(this.name + '안녕')
    }
}
  
var person2 = {
    name : '손흥민'
}

person.인사.apply(person2, [1,2,3]);
person.인사.call(person2, 1,2,3);

0개의 댓글