15강 / Spread Operator 활용방법 2 & apply, call 함수 알아보기

3. array를 파라미터형태로 집어넣고 싶을 때 쓴다.

일단 예시를 들기 위해 함수를 하나 만들어보자.

function plusTest(a,b,c){
   console.log(a + b + c)
}
plusTest(1,2,3);

파라미터를 3개 받아와서 전부 더해주는 plusTest라는 함수를 만들어봤다.
그런데 여기 파라미터를 집어넣을 때
직접 1,2,3이라고 작성해서 넣는게 아니라
이미 존재하는 array에 있던 내부 자료들을 쏙 집어넣고 싶으면 어떻게할까?

그니까 예를 들면...

function plusTest(a,b,c){
   console.log(a + b + c)
}

let arrayTest = [10, 20, 30];

arrayTest라는 자료 안에 있는 모든 숫자 10,20,30을 plusTest() 함수의 파라미터로 집어넣으려면 어떻게 해야할까?

plusTest(10,20,30);

이렇게 직접 손으로 적거나

plusTest(arrayTest[0], arrayTest[1], arrayTest[2]);

이렇게 하거나 해야한다.

근데 그게 귀찮으면 spread 연산자를 쓰면 된다.

function plusTest(a,b,c){
   console.log(a + b + c)
}

let arrayTest = [10, 20, 30];
plusTest(...arrayTest);

그러면 출력했을 때 10, 20, 30을 더해준 결과가 잘 출력된다.

▼ spread 연산자가 없던 시절엔 이런 식으로 작성했었다.

function plusTest(a,b,c){
   console.log(a + b + c)
}

let arrayTest = [10, 20, 30];
plusTest(...arrayTest);//요즘방식
plusTest.apply(undefined, arrayTest);//옛날방식

apply라는 이상한 함수를 뒤에 붙여서 실행을 했었는데 이게 뭔지 자세히 알아보도록 하자.
왜냐면 나중에 객체지향 문법같은거 배울 때 가끔 등장하는 함수들이기 때문이다.

---

apply, call 함수가 뭔지 알아보자

일단 예시를 들기 위해 object를 두개 만들어보자.

let person = {
    greet : function(){
      console.log(this.name + '안녕')
    }
}

let person2 = {
    name : '손흥민'
}

person이라는 object에는  greet라는 함수를 만들어 넣었고
person2는 name : '손흥민' 이라는 자료만 넣었다.

그런데 person에 만들어놓은 person.greet()라는 함수를 person2에서도 사용하고싶다.
그럼 어떻게 해야할까?

person2에다가 직접 greet()라는 함수를 코딩해서 집어넣으면 된다!
근데 그게 불가능한 경우가 가끔 있다.

그럴 때 apply를 쓰면 된다.
apply는 이 함수를 실행하는데.. 저기 object에다가 적용해서 실행해주세요~ 라는 뜻이다.
한번 apply를 사용해보자.

let person = {
    greet : function(){
      console.log(this.name + '안녕')
    }
}

let person2 = {
    name : '손흥민'
}

person.greet.apply(person2);

▲ 맨 마지막줄에 적은 코드가 뭔 의미냐면
person.greet()라는 함수를 쓰는데 person2라는 object에 적용해서 실행해라~
또는 person.greet()라는 함수를 쓰는데 person2라는 object에 있는 함수처럼 실행해라~ 라는 뜻이다.

apply 함수의 사용법은
실행할함수.apply(적용할곳);
이라고 보면 된다.

이제 apply만 기억해주면 여러가지 유용한 함수들을 내가 원하는 곳에 붙여서 쉽게 실행가능하다.

근데 이거랑 아주 똑같은 기능을 하는 함수가 하나 더 있다. call 이라고 있다.

let person = {
    greet : function(){
      console.log(this.name + '안녕')
    }
}

let person2 = {
    name : '손흥민'
}

person.greet.apply(person2);
person.greet.call(person2);

▲ apply와 call은 실행 결과도 똑같고 사용법도 똑같다.
하지만 차이점이 하나 있는데, 내가 person.greet()에 파라미터를 넣어서 실행하고 싶은 경우에는
person.greet.apply(person2, 파라미터);
person.greet.call(person2, 파라미터);
이렇게 실행해야하는데
이 때 apply는 파라미터를 [array]로 한꺼번에 집어넣을 수 있고
call은 그냥 1,2,3 이렇게 일반 함수처럼 만 집어넣을 수 있다.

let person = {
    greet : function(){
      console.log(this.name + '안녕')
    }
}

let person2 = {
    name : '손흥민'
}

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

▲ 파라미터 집어넣는 방법만 좀 차이가 있지 아무튼 call, apply의 실행내용은 똑같다.
apply함수는 저렇게 array 내의 데이터를 파라미터로 한꺼번에 집어넣을 수 있다는 유용한 기능을 제공하기 때문에
옛날 개발자들이 파라미터가 많은 함수를 만들 때 자주 사용했다.
그럼 이제 아까 함수에 array 집어넣는 예제가 이해가 가기 시작한다.

function plusTest(a,b,c){
   console.log(a + b + c)
}

let arrayTest = [10, 20, 30];
plusTest(...arrayTest);//요즘방식 넣기
plusTest.apply(undefined, arrayTest);//옛날방식 넣기

이제 이게 옛날방식이다. ⬇️

plusTest.apply(undefined, arrayTest)

plusTest() 함수를 실행하는데 undefined에 적용해서 실행해주시고요 파라미터로 어레이를 집어넣어주세요~ 라는 뜻이다.
이러면 편법같은 느낌이 들지만 array를 풀어헤쳐서 파라미터로 집어넣을 수 있다.

Q. 근데 undefined에 적용하는건 뭔소리인가요?

A. 그냥 아무곳에도 적용해서 실행하지 않게하기 위해 적은 내용이다. 그냥 쌩으로 plusTest() 함수가 실행된다.
왜냐면 plusTest()함수는 어디에도 적용할 필요가 없가 때문이다. 근데 비워두면 문제가 생기기 때문에 아무 값이나 집어넣은 것이다.

결론은 spread 연산자가 생긴게 다행이다!

---