JAVASCRIPT - 중급 5편

* tagged literal

문자를 해체하고 분석하는 기능

문자 중간에 있는 단어 순서를 바꾸거나 변수를 제거할때 유용함

var name = 'Kim';
function wordDismantleAnalysis(word,varialbe) {
	console.log(word); // 문자들을 Array화
  	console.log(varialbe); // ${변수}
}
wordDismantleAnalysis`안녕하세요 ${name} 입니다`
// result: {'안녕하세요', ' 입니다'} , Kim

예시: 순서변경

var name = 'Kim';
function wordDismantleAnalysis(word,varialbe) {
	console.log(word[1] + variable + word[2]) // 순서변경
  // result: " 입니다Kim안녕하세요 "
}
wordDismantleAnalysis`안녕하세요 ${name} 입니다`

* Spread Operator

...Element

1. Array에 붙이면 대괄호 제거

var arr = ['he', 'she'];
console.log(...arr); // result: he she

2. 문자에 붙이면 길이1만큼 전부 쪼갬

var word = 'hello';
console.log(...문자); // result: h e l l o

---

예시

1. Array 합치기 / 복사

var a = [1,2,3];
var b = [4,5];
var c = [...a, ...b]; // result: [1,2,3,4,5]

var a = [1,2,3]
var b = a; // [1,2,3]만 값을 가져야함
a[3] = 4;
console.log(b); // result: [1,2,3,4]
// 이유: reference data type( Array, Object )는 등호("=")를 사용하게 되면 값을 공유하기 때문에
----변경방법----
var b = [...a];

2. Object 합치기 / 복사

var obj1 = { a : 1, b : 2 };
var obj2 = { a : 2, ...obj1 }; // result: { a : 1, b : 2}
// 이유: key값이 중복된다면 가장 마지막의 값으로 변경됌
----변경방법----
var obj2 = { ...obj1, a : 2 } // result: { a : 2, b :2 }

3. 함수 파라미터 넣을 때

function sumAll(a,b,c) {
  console.log(a + b + c)
}
var Arr1 = [10, 20, 30];
sumAll(...Arr1); // result: 60
----과거방식----
sumAll.apply(undefined, Arr1); // 현재는 잘 사용하지 않음

---

주의사항

1. function (...), Object { ... }, Array { ... } 내에서 보통 사용해야 한다

2. key값이 중복되면 가장 뒤에 오는 key값의 값을 가짐

* Apply(), Call()

복사할 요소.함수명.apply(복사할 공간)

복사할 요소.함수명.call(복사할 공간)

1. 다른 객체의 함수를 가져옴

var person = {
  sayHi : function() {
    console.log(this.name + '안녕하세요')
  }
}
var person2 = {
  name = 'kim'
} // person2 에서 인사함수를 가져오길 원함
----사용방법----
person.sayHi.apply(person2)
person.sayHi.call(person2)

---

차이점

함수의 파라미터를 입력할 때

person.인사.apply(person2, [1,2]) // apply는 파라미터에 array 사용가능
person.인사.call(person2, 1,2); // call은 파라미터에 array 사용 불가능