Spread Operator
마침표를 연달아서 3개... 찍으면 그게 spread operator 라는 문법인데 이는
"괄호제거 해주는 연산자" 이다.
var ary = ['hello', 'world'];
console.log(ary);
console.log(...ary);실행결과
[ 'hello', 'world' ]
hello world이렇게 괄호를 제거해준다. 또 다른 활용은
var 문자 = 'hello';
console.log(문자[0]);
console.log(문자[1]);
console.log(문자);
console.log(...문자);실행결과
h
e
hello
h e l l ospread 를 문자에 붙이면 알파벳을 하나씩 펼쳐준다.
(혹은 그냥 문자의 안보이는 대괄호를 제거해준다고 암기)
이러한 기능을 가진 Spread Operator 의 활용은
1. Array 합치기에 매우 자주 사용한다.
var a = [1,2,3];
var b = [4,5];
var c = [여기엔 1,2,3,4,5 가 들어오게 만들려면?];
----------------------------------------------
var c = [...a, ...b];c를 출력해보면 [1,2,3,4,5]가 되어 있다.
... 연산자를 이용해서 괄호를 없앤 a와 b를 집어넣은 것이다.
2. Array 복사에 매우 자주 사용한다.
var a = [1,2,3];
var b = a;
console.log(a);
console.log(b);array를 복사한다고하면 보통 이런 방법으로 하는데 이러면
a의 값을 바꾸면 b의 값도 똑같이 바뀌는 일이 일어난다.
자바스크립트에서는 복사가 아니라 값을 공유받는 다는 표현이 더 정확할 것이다.
( 등호 쓰면 값을 복사한게 아니라 [1,2,3] 값이 저기있어요~ 라고 가리키는 화살표를 복사하신 것이기 때문 )
그래서 값을 공유하지 않고 각각 독립적인 값을 저장하도록
spread를 이용하면 된다.
var a = [1,2,3];
var b = [...a];
console.log(a);
console.log(b)spread를 이용해서 a값의 괄호를 제거해준 다음에 다시 괄호를 씌우는 것인데
이러면 a와 b의 값 공유가 일어나지 않는다.
3. Object 합치기/복사에 매우 자주 사용한다.
var o1 = { a : 1, b : 2 };
var o2 = { c : 3, 그리고 o1에 있는거 전부.. }o2를 만들고 싶은데 o1에 있던 내용들을 그대로 가져다가 추가하고 싶다.
그럼 spread operator를 사용하면 되는데 이 연산자는 대괄호 뿐만아니라 중괄호도 제거해주기 때문이다.
var o1 = { a : 1, b : 2 };
var o2 = { c : 3, ...o1 };
console.log(o2);o2라는 오브젝트를 출력해보면 a, b, c키 값이 다 들어있다.
참고 1) 오브젝트의 key값 중복이 발생하면 ?
var o1 = { a : 1, b : 2};
var o2 = { a : 3, ...o1 };
console.log(o2);o2를 o1항목을 추가해서 만들고 싶은데 a라는 키값이 이미 존재한다.
이렇게 a값 중복이 발생하면 무조건 뒤에 오는 a값으로 덮어쓴다.
그래서 출력해보면 a : 1 이라는 자료가 담겨져있다.
참고 2)
spread 연산자는 함수소괄호, 오브젝트 중괄호내, 어레이 대괄호내에서 보통 사용하셔야합니다.
다른 곳에서 그냥 썼다간 에러가날 수 있습니다.
4. array를 파라미터형태로 집어넣고 싶을 때 사용한다.
function Plus(a, b, c)
{
console.log(a + b + c)
}
var ary[3] = {10, 20, 30};ary에 있는 자료형을 Plus함수의 파라미터로 이용하고 싶으면
Plus(ary[0], ary[1], ary[2]);
------------------------------
Plus(10, 20, 30);이렇게 해야하는데 spread 연산자를 사용하면
Plus(...ary);이렇게 하면된다.
spread 연산자가 없을 때는 apply라는 함수를 사용했는데
Plus.apply(undefined, ary);이렇게 했다
apply함수는 객체지향 문법에서 가끔 등장하니 확인하고 가자
apply, call 함수
사용 방법
실행할함수.apply(적용할곳);이 함수를 실행하는데 저기에다가 적용해서 실행해주세요
코드로 확인해보면
var person = {
greeting : function(){
console.log(this.name + 'Hi')
}
}
var person2 = {
name : '손흥민'
}person에 존재하는 person.greeting()라는 함수를 person2에서도 쓰고 싶을때
person2에 greeting() 함수를 코딩하여 집어넣으면 되는데
이것이 불가능한 경우 apply를 사용하면되는데
person.greeting.apply(person2);이렇게 사용하면된다.
같은 기능을하는 call함수도 있는데
person.greeting.call(person2);call 함수는 실행 결과도 똑같고 사용 방법도 같다.
하지만 파라미터를 넣어서 사용하는 함수에서 차이점이 있는데
person.greeting.apply(person2, 파라미터);
person.greeting.call(person2, 파라미터);이 때 apply는 파라미터를 [array]로 한꺼번에 집어넣을 수 있고
call은 그냥 1,2,3 이렇게 일반 함수처럼 만 집어넣을 수 있다.
person.greeting.apply(person2, [1,2,3]);
person.greeting.call(person2, 1,2,3);이렇게 말이다.
개념을 알았으니 아까 위에서 나온 코드를 설명해보면
Plus.apply(undefined, ary);"Plus함수를 실행하는데 undefined로 적용하여 실행시키고 파라미터로 ary를 넣어줘라"
라는 뜻이다.
undefined는 아무곳에도 적용해서 실행하지 않게하기 위해 적은 내용인데 Plus()함수는 어디에도 적용할 필요가 없으니까요.
근데 비워두면 문제가 생기기 때문에 아무 값이나 집어넣은 것입니다.
