✔ Template literals (10강)
: 자바스크립트에서 문자를 다루 때 어려운 점을 해결
백틱
1. 문자 중간 엔터키 입력 가능
2. 문자 중간에 변수를 넣을때 편리함
var hello = `안녕하세요
저는 `;
var name = `홍길동`;
var age = `20`
console.log(`${hello}
바로바로
${name}입니다`);
3. 자바스크립트 문자로 HTML 작성 할 때 유용
var aa = `
Tagged Literals
: ES6는 함수로 문자 해체분석기능을 만들 수 있음
-
문자 중간중간 단어 순서를 바꾸거나 변수를 제거할 때 유용함
-
맨 마지막줄에서 함수를 실행시킬 때 소괄호가 아니라 문자를 이용해서 함수를 실행시킬 수 있음
var welcome = `반갑습니다 ${name}님!`
function func(){
return 10
}
func`반갑습니다 ${name}님!` // >> 10 리턴해체분석
: 함수뒤에 백틱문자백틱 를 붙여 실행하면 그 문자열을 해체분석할 수 있음
첫번째 파라미터는 백틱 내의 순수 문자만 골라서 Array로 만들어 놓은 파라미터두번째 파리미터부터는 백틱 내의 ${}변수를 담는 파라미터
var name = `홍길동`;
var age = `20`
function 해체분석(letters, variable1, variable2){
console.log(letters);
console.log(variable1 + variable2 + letters[2] + letters[1] + letters[0]); // 문자열 재조함, 분석 가능
console.log(variable1);
console.log(variable2);
}
해체분석`반갑습니다 ${name}${age}님!` //함수뒤에 `문자`
✔ Template literals 예제(11강)
단어 순서 바꾸기
var pants = 20;
var socks = 100;
function change(letters, v1, v2){
console.log(letters[0] + v2 + letters[1] + v1)
}
change`바지는${pants} 양말은${socks}`;
다른 문자 표시
var socks = 100;
var pants = 0;
function change2(letters, v1, v2){
if(v1 == 0){
console.log(letters[0]+" 품절" + letters[1] + v2);
}
}
change2`바지는${pants} 양말은${socks}`;
✔ Spread Operator (12강)
마침표를 연달아서 3개... 찍는 spread operator라는 문법
→ 괄호를 제거 (함수소괄호, 오브젝트 중괄호내, 어레이 대괄호내에서사용)
Array 내에서 사용
array에 붙어있던 괄호를 제거
var arr = ['hello', 'world']
console.log(arr);
console.log(...arr);
문자에서 사용
문자를 array처럼 출력할 수 있는데 문자에 spread를 붙이면 문자를 하나씩 펼쳐서 보여줌
var string = 'hello'
console.log(string);
console.log(...string);
console.log('h','e','l','l','o');
console.log(string[0]); // h
console.log(...string[2]); // l
Array 합치기/복사
Array 합치기
var arr = [1,2,3];
var brr = [4,5];
var crr = [...arr, ...brr];
console.log(crr);
Array 복사
등호로 복사
등호로 복사를 하시면 a와 b 변수는 [1,2,3]을 각각 따로 하나씩 가진게 아니라 값 공유
cuz. 값을 복사한게 아니라 [1,2,3] 값을 가르키는 화살표를 복사한 것
var arr1 = [1, 2, 3];
var arr2 = arr1;
console.log(arr1);
console.log(arr2);
arr1[3] = 4;
console.log(arr1);
console.log(arr2); // [1, 2, 3, 4] // 등호로 복사하면 arr2도 arr1과 값을 공유deep copy
값을 공유하지 않고 각각 독립적인 값을 저장하도록 array를 복사하려면 spread 사용
var arr3 = [1, 2, 3];
var arr4 = [...arr3];
arr3[3] = 4;
console.log(arr3);
console.log(arr4);
→ arr3만 변경
Object 합치기/복사
var obj3 = {a : 1, b : 2};
var obj4 = {...obj3, c : 3};
console.log(obj3);
console.log(obj4);
obj3.a = 8;
console.log(obj3);
console.log(obj4);
→ spread로 복사했기 때문에 obj4의 a는 변경되지 않음
오브젝트의 key값 중복 발생 시
가장 뒤에 오는 값 출력
var obj5 = {a : 1, b : 2};
var obj6 = {a : 100, ...obj5};
var obj7 = {...obj5, a : 100};
console.log(obj6); // 가장 뒤에 있는 것을 적용
console.log(obj7); 
✔ Spread Operator & apply & call (13강)
Spread Operator 파라미터
function hap(a, b, c){
console.log(a+b+c);
}
hap(1, 3, 5);
//spread Operator
var arr = [1, 3, 5]
hap(...arr);apply
spread 연산자가 없을 때 사용 한 js 내장함수
- 객체지향 문법에 가끔 사용함
hap(...arr);
hap.apply(undefined, arr); // 위와 같음
// hap() 함수를 실행하는데 undefined에 적용해서 실행하고 파라미터로 arr을 집어넣어라apply 함수의 사용법
실행할함수.apply(적용할곳);
var person = {
hello : function (){
console.log(this.name + ' 안녕');
}
}
var person2 = {
name : '홍길동'
}
console.log(person2.name);위와 같은 함수에서 person에 만들어놓은 멋진 person.hello()라는 함수를 person2에서도 사용할 필요가 있을 때 사용
→ 함수를 실행하는 데 다른 오브젝트에서 적용해서 실행 할 때
유용한 함수들을 내가 원하는 곳에 붙여서 쉽게 실행가능
var person = {
hello : function (){
console.log(this.name + ' 안녕');
}
}
person.hello();
var person2 = {
name : '홍길동'
}
console.log(person2.name);
person.hello.apply(person2); // person.hello를 person2를 적용
// 즉, 아래와 같음
var person2 = {
name : '홍길동',
hello : function (){
console.log(this.name + ' 안녕');
}
}call
apply와 call은 실행 결과도 똑같고 사용법도 똑같음
BUT. person.hello()에 파라미터를 넣어서 실행하고 싶은 경우에는
person.인사.apply(person2, 파라미터);
person.인사.call(person2, 파라미터);
이러 차이가 있음
- apply는 파라미터를 [array]로 한꺼번에 집어넣을 수 있고
- call은 그냥 1,2,3로 일반 함수처럼 만 집어넣을 수 있음
person.hello.apply(person2, [1, 2,3])
person.hello.call(person2, 1,2,3) 