[ES6] 3. tagged literals & Spread Operator

지렁·2023년 9월 28일

Tagged Literals

문자 해체분석기능

실행할 함수이름을 쓰시고 소괄호 대신 백틱 문자를 붙이기
➡️ 함수 뒤에 백틱으로 문자 를 붙여 실행하면 그 문자열을 문자와 변수로 해체분석할 수 있다

첫째 파라미터 문자들은 백틱 내의 순수 문자만 골라서 Array로 만들어놓은 파라미터
둘째 파라미터 변수들은 백틱 내의 ${} 변수를 담는 파라미터로 변수 개수대로 작성해야함 혹은 ...vars 가능

예제 1 )

var pants = 20;
      var socks = 100;
      function A(letter, ...vars) {
        console.log(letter[1] + vars[0] + letter[0] + vars[1]);
      }

      A`바지${pants} 양말${socks}`;

예제 2 )

var pants = 0;
      var socks = 100;
`바지${pants} 양말${socks}`;
      function A(letter, ...vars) {
        if (vars[0] == 0) {
          console.log("바지 다 팔렸어요 양말" + vars[1]);
        }
       
      }

      A`바지${pants} 양말${socks}`;

Spread Operator

괄호를 제거 해주는 연산자

spread 연산자는 함수소괄호, 오브젝트 중괄호내, 어레이 대괄호내에서 사용해야 한다

var array = ['hello', 'world'];
console.log(array); // ['hello', 'world']
console.log(...array); //  hello world

문자에 붙이면 문자에 붙은 괄호를 제거해준다

var letter = 'hello';
console.log(letter); // hello
console.log(...letter); // h e l l o

✅ 활용법

1. Array/Object의 합치기/복사에 자주 사용

[ 합치기 ]

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

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

[ 복사하기 ]

자바스크립트에서 복사를

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

이렇게 하면 안된다

이유 : 등호복사는 값 공유를 하게 됨 => 참조형

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

2. 함수 파라미터 넣을 때 사용

function Add(a, b, c) {
console.log(a + b + c);
}
let array = [10, 20, 30];
Add(...array);

과거에는 array 내의 모든 데이터를 파라미터로 입력하기 위해서 apply 메소드를 사용했었다

function Add(a, b, c) {
console.log(a + b + c);
}
let array = [10, 20, 30];
Add.apply(undefined,array);

Add( ) 함수를 실행하는데 undefined에 적용해서 실행하고 파라미터로 array를 입력한다는 뜻

비워두면 문제 생기니 undefined를 입력하지만 사실은 함수실행을 위해서 아무값이나 입력해도 괜찮다

🤔 apply( ) / call ( ) 란?

ES5 문법인 자바스크립트 내장 함수

apply ()

함수 옮겨와서 실행해줘~
실행할함수 . apply (적용할곳);
var person = {
	greet: function () {
	console.log(this.name + "안녕"); // this :  person 객체
	},
};
var person2 = {
	name: "손흥민",
};
person.greet.apply(person2);
person.greet 을 person2에서 실행해달라는 뜻

call ()

apply랑 같은데 파라미터 입력에서 차이가 있다

apply는 파라미터를 [array]로 한꺼번에 입력 가능

call은 1,2,3 이렇게 일반 함수처럼 입력 가능