Javasciprt #3

모든 괄호를 없애주는 Spread Operator 활용법1

1. 뭔가 내용물을 빼내고 싶을 때 사용

2. Array에 붙이면 대괄호를 제거해준다.

var 어레이 = ['hello', 'world'];

console.log(.어레이);
//(2) ["hello", "world"]
console.log(...어레이);
//hello world


var 문자 = 'hello'
console.log(문자)
//VM2524:1 hello

console.log(...문자)
//VM2548:1 h e l l o   -->   'h' 'e' 'l' 'l' 'o' ...

문자열도 인덱싱이 가능하기 때문(배열은 아님)




********** 배열 합치기도 가능하다.**********
var a = [1,2,3];

var b = [4,5];

var c = [...a]
console.log(c)
//VM2691:1 (3) [1, 2, 3]

var c = [...a, ...b]
console.log(c)
//VM2713:1 (5) [1, 2, 3, 4, 5]




********** 보기 편해서보다는 deep copy가 가능하기 때문에 사용한다..**********
var a = [1.2,3];
var b = a;

console.log(a)
VM2829:1 (2) [1.2, 3]

console.log(b)
VM2846:1 (2) [1.2, 3]

a[3] = 4;
// 1,2,3,4



이상한점은 b도 1,2,3,4가 된다.

등호로 복사하게 되면 값을 공유하게 되기 때문 (reference data type 이기 때문)

각각 독립적인 값을 가지도록 Array, Object를 복사하라면 Spread Operator를 사용하자 (Deep copy)



var a = [1,2,3];
var b = [...a];

console.log(a)
//VM2889:1 (4) [1, 2, 3, 4]

console.log(b)
//VM2924:1 (3) [1, 2, 3]




**********  오브젝트 합치기 / Deep copy  **********

var o1 = {a: 1, b: 2}
var o2 = {c:3}
var o2 = {...o1,c:3}

console.log(o2)
//VM3176:1 {a: 1, b: 2, c: 3}


o2 = {...o1}
{a: 1, b: 2}
console.log(o2)
//VM3233:1 {a: 1, b: 2}



copy하다가 값 중복이 일어나면 ?
  
// Case 1
var o1 = {a: 1, b: 2}
var o2 = {a:2, ...o1}   //var o2 = {a:2, a: 1, b: 2} --> 가장 뒤의. a: 1이 된다.

console.log(o2)
VM3310:1 {a: 1, b: 2}

// Case 2
var o1 = {a: 1, b: 2}
var o2 = {...o1,a: 2}

console.log(o2)
VM3364:1 {a: 2, b: 2}


********** 함수 파라미터 넣을 때 **********
  
 function 더하기 (a,b,c){
  console.log( a + b +c)
}

더하기(1,2,3);


배열을 넣고 싶을때
[10,20,30]

방법1.
var 어레디 = [10,20,30];
더하기(어레이[0],어레이[1],어레이[2])


방법2.
더하기.apply(undefined,어레이);

방법3.
더하기(...어레이);



**** apply 함수 개념설명 ****
  
var person = {
  인사 : function(){
    console.log(this.name + '안녕');   //person.인사() --> undefined안녕
  }
}

person.인사() //안녕

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

person2에도 person의 메서드를 적용하고 싶다면 ? (person2.인사())

(직접 입력할수도 있지만 수정이 불가능할 경우 문제가된다.)

person.인사.apply(person2) // 손흥민안녕



**** call 함수 개념설명 ****
  
비슷하지만 apply파라미터를 array형태로 집어넣기가 가능하다.
person.인사.apply(person2,1,2)