모든 괄호를 없애주는 Spread Operator (...)
자바스크립트에서 펼쳐서 늘어놓고 싶을 때 사용하는 연산자.
대괄호를 다 제거해준다! (뭔가를 늘어놓고 싶을 때)
var 어레이 = ['hello', 'world'];
console.log(어레이); // ["hello","world"]
console.log(...어레이); // hello world
문자에 붙이면 펼쳐준다!
문자도 array처럼 인덱싱이 가능하다. 그래서 문자에도 대괄호를 제거해주고 펼쳐준다고 생각하면 된다.
var 문자 = 'hello';
console.log(문자); // 'hello'
console.log(...문자); // h e l l o ('h''e''l''l''o')
// 문자 인덱싱
console.log(문자[0]); //e
어디에 쓰면 좋을까?
1. array 복사 / 합치기 => ⭐Deep Copy!⭐
var a = [1,2,3];
var b = [4,5];
var c = [...a]; // 복사. [1,2,3]
var c = [...a, ...b]; // 합치기. [1,2,3,4,5]
근데 보기 편해서 쓰기보다는 **Deep copy할 때 유용**하다.
Deep copy
var a = [1,2,3];
var b = a;
console.log(a); // [1,2,3]
console.log(b); // [1,2,3]
a에 있는 값을 b에 복사하고 싶다. 그래서 a를 할당했다. 그러면 a와 b는 각각 [1,2,3]이 된다.
근데 array를 이런 식으로 복사하면 약간 이상하다.
var a = [1,2,3];
var b = a;
a[3] = 4;
console.log(a); // [1,2,3,4]
console.log(b); // [1,2,3,4]
b는 건든 적이 없어서 [1,2,3]이 나오길 기대하는데 왜 4가 추가되지?하는 의문이 생긴다. 그냥 등호로 복사하면 값을 공유하게 된다. 그래서 애초에 두 값은 같은 값을 가지게 된다.
**<u>reference data type(Array, Object)</u>은 이런 식으로 값을 복사하면 값을 공유한다.** 각각 독립적인 값을 가지도록 Array, Object를 복사하려면 Spread operator를 이용해야 한다.
var a = [1,2,3];
var b = [...a];
a[3] = 4;
console.log(a); // [1,2,3,4]
console.log(b); // [1,2,3]
2. 오브젝트 합치기 => ⭐Deep Copy!⭐
var o2를 만들 때 o1에 있던 거 그대로 넣고 싶은 경우
var o1 = {a: 1, b: 2};
var o2 = {...o1, c: 3};
console.log(o2); // {a: 1, b: 2, c: 3}
- o1을 o2에 deep copy하려면? spread operator를 쓰세요!
❗유의할 점 - obj를 카피하다가 값 중복이 일어나면?
array와 달리 object는 카피하다가 값이 중복될 수가 있다.
var o1 = {a:1, b:2};
var o2 = {a:2, ...o1};
console.log(o2)/ // {a: 1, b: 2}
var o1 = {a:1, b:2};
var o2 = {...o1, a:2};
console.log(o2)/ // {a: 2, b: 2}
- **가장 뒤에 있는 값으로 적용**이 된다.
❗유의할 점 - 아무데나서 쓰면 안돼요!
var o1 = {a:1, b:2};
...o1; // ❗에러 발생
아무데나서 spread operator를 쓰면 안된다. 밖에서 그냥 쓰면 에러가 난다.
<u>**중괄호, 대괄호, 소괄호 안에서만 써야한다.**</u>
3. 함수 파라미터 넣을 때
function 더하기(a,b,c){
console.log(a + b + c);
}
더하기(1,2,3); // 6
array내의 모든 데이터를 파라미터로 집어넣고 싶은 경우,
function 더하기(a,b,c){
console.log(a + b + c);
}
var 어레이 = [10,20,30];
더하기(어레이[0], 어레이[1], 어레이[2]); // 60 -> array 해체작업 너무 번거롭다!!
예전에는 어레이에 있는 각각 요소들을 함수에 넣고 싶을 땐 apply라는 이상한 함수를 썼다.
apply
더하기.apply(undefined, 어레이);
이게 <code>더하기(어레이[0], 어레이[1], 어레이[2]);</code> 와 동일한 코드다.
지금은
더하기(...어레이);
방식으로 하면 된다.
apply, call 함수 알아보기
apply
- 자바스크립트 내장 함수
- 오브젝트1에 있는 함수를 오브젝트2에 옮겨오고 싶을 때 사용한다.
var person = {
인사: function(){
console.log('안녕');
}
}
person.인사(); // 안녕
여기서 오브젝트 하나를 더 만들어보자.
var person = {
인사: function(){
console.log('안녕');
}
}
var person2 = {
name: '손흥민'
}
보니까 person 오브젝트에 '인사' 함수를 너무 멋있게 잘 만든 것 같다. 그래서 person2에도 적용해주고 싶다. 근데 person2가 수정이 불가능한 상태면 이게 문제가 된다. 이때 사용하는게 apply 함수다.
함수를 옮겨와서 실행해주세요! => person.인사.apply(person2)
var person = {
인사: function(){
console.log('안녕');
}
}
var person2 = {
name: '손흥민'
}
person.인사.apply(person2);
person2.인사(); // 안녕
예제로 더 살펴보자.
var person = {
인사: function(){
console.log(this.name + '안녕');
}
}
var person2 = {
name: '손흥민'
}
person.인사(); // undefined안녕
person.인사.apply(person2);
person2.인사(); // 손흥민안녕
그냥 '인사'라는 함수를 옮겨온 것이다.
call
- apply / call 는 기능은 동일하다. 그래서 상속기능을 할 때 자주 볼 것이다.
- 근데 **apply는 파라미터를 array 형태로 집어넣을 수 있다**.
var person = {
인사: function(){
console.log(this.name + '안녕');
}
}
var person2 = {
name: '손흥민'
}
person.인사.apply(person2, [1,2]); // person2를 복붙하고 1, 2를 파라미터로 넣어 실행함
person.인사.call(person2, 1, 2); // person2를 복붙하고 1, 2를 파라미터로 넣어 실행함
그럼 이전에 작성한 이놈은 뭘까?
더하기.apply(undefined, 어레이);
더하기() 함수에 [어레이] 내의 데이터를 파라미터로 넣고 싶을 때 쓴댔는데, **복붙하는 함수 없이 그냥 실행해주세요** 라는 의미다. 그럼 굳이 apply를 쓴 이유는 **파라미터로 array 집어넣는게 가능해서**다.
근데 뭐 이건 예전 방식이니까 이젠 몰라도 된다!
'Front-End: Web > JavaScript' 카테고리의 다른 글
[코딩애플] js part 2-2. 이상한 Reference data type과 더 이상한 예제 3개 (0) | 2022.10.21 |
---|---|
[코딩애플] js part 2-1. 자바스크립트 함수 업그레이드하기 (default parameter/arguments) (0) | 2022.10.21 |
[코딩애플] js part 1-6. 자바스크립트가 문자 다루는 신기한 방법 - Template literals (strings) (0) | 2022.10.09 |
[코딩애플] js part 1-5. 변수 신문법 총정리 (0) | 2022.10.09 |
[코딩애플] js part 1-4. this & arrow function 연습문제 3개 (0) | 2022.10.09 |