literals, Spread Operator, Apply/Call 함수

문자열을 작성하는 방법으로는 ' ' 나 " "를 주로 사용한다. 이 두가지 이외에도 ` `(backtick, backquote)라고 하는 esc 버튼 바로 밑 버튼을 사용할 수 있다. ` `를 사용하면 줄바꿈을 쉽게 사용하여 문자열을 만들 수 있으며, 중간에 변수를 넣는 template을 사용할 수 있다.

 

1. ` `의 장점 (Template Literal)

1. 문자열의 줄바꿈 하여 출력할 수 있다.
2. 중간에 변수를 넣어 출력할 수 있다.
3. html 태그를 묶어서 담을 수 있다.

var 문자 = `안녕하세요 반갑습니다
            방문해주셔서 감사합니다`;
var 소개 = `안녕하세요 ${문자}.`
var 템플릿 = `<div>${문자}</div>`

2. Tagged Literal

• 문자나 문자열을 특정 단위로 쪼개서 재배열하거나 다양한 조합을 할 수 있다.
• 보통 이들을 해체하는 함수와 ` `를 함께 사용한다.

function Tag(문자들, 변수들){
	console.log(문자들);
    console.log(변수들);
    }
    
// 함수 사용
Tag`안녕하세요 저는 ${이름} 입니다.`

• 함수를 호출할 때 소괄호가 아닌 백틱(` `)을 사용한다. 각각의 문자열 단위는 ${ }를 기준으로 나뉘며, 어레이에 담긴다. 그리고 각각의 문자 단위에 접근할 때는 일반 어레이 접근과 마찬가지로 인덱스를 사용한다. 두 번째 파라미터에는 ${ }로 담긴 변수가 출력되며, 여러 개일 경우 파라미터를 더 추가할 수 있다.

<script>

    var pants = 20;
    var socks = 100;
    var 문자 = `바지 ${pants} 양말 ${socks}`;

    function 해체분석기(문자들,변수들1,변수들2){
        if (변수들1 === 0){
            var 알림 = 문자들[0] + 변수들1;
            알림 = '바지 안팔아요'
            console.log(알림 + 문자들[1] + 변수들2)
            return
        }
        console.log(문자들[0]+ 변수들1 + 문자들[1] + 변수들2)
        return
    }

    해체분석기`바지 ${pants} 양말 ${socks}`


</script>

• 위 예제 코드는 각각의 문자를 tagged literal로 해체한 뒤 조건에 따라 값을 변경하여 출력하는 것이다. 이 뿐만 아니라 문자들의 인덱스를 변경하면 문자를 뒤집어서 출력할 수 있다.

3. Spread operator

• ... (점 3개)를 사용하여 변수를 나타내는 방법이다. 쉽게 말해 소괄호나 대괄호에 들어있는 데이터 요소를 꺼내오는 연산자이다.
  1. Array가 담긴 변수에 사용하면 대괄호를 제거하고 안의 내용을 담는다.
  2. 문자에 붙이면 문자 하나하나를 해체하여 담는다.

var 어레이 = ['hello', 'world'];
console.log(어레이); // ['hello', 'world']
console.log(...어레이); // hello world

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

• 어레이를 합치거나 복사할 때 사용한다. (Deep copy)

// 용도 1. 어레이 합치기/복사 - 자주 사용, 보기 편해서라기보다는 deep copy 용도
    var a = [1,2,3];
    var b = [4,5];

    var c = [...a]; // var c = [1,2,3] 어레이 복사
    var d = [...a, ...b]; // 어레이 합치기
    console.log(c)

• 만약 x라는 어레이를 y에 복사하고 싶을 때 그냥 var y = x 라고 하면 y는 x의 값을 공유하는 개념이기 때문에 x를 변경하면 y도 같이 변경된다. 따라서 두 어레이가 서로 독립적인 데이터로 남기되 복사를 하고 싶다면( Deep Copy ) Spread operator를 사용해야 한다.

var x =  [1,2,3]
    var y = x// x 어레이를 y에 할당함 문제점 : x에 값을 변경하면 y도 자동으로 변경됨, 등호로 복사하면 값을 공유함
    // reference data type (Array, Object)의 경우 값을 공유함, 함부로 복사 주의!

    // 독립적인 값을 갖도록 복사하는 방법 (Deep copy) - Spread operator 사용
    var x =  [1,2,3]
    var y = [...x]

•  오브젝트를 합치거나 복사할 때도 마찬가지로 사용한다.
  • 만약 값이 중복되는 오브젝트를 복사할 경우 복사되는 순서에 따라 값이 다르게 변경된다. 뒤에 있는 값 (오른쪽), 즉 제일 나중에 오는 값이 최종적으로 변경되는 값이다.

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

var o3 = { a : 1, b : 2};
var o4 = { a : 2, ...o3}; // a : 1
var o4 = { ...o3, a : 2}; // a : 2

• 함수에 파라미터를 넣을 때도 사용한다.
  
  • 함수 안에 파라미터로 어레이가 들어와서 안의 요소들을 연산하는 작업일 경우

function 더하기(a,b,c){
        console.log(a + b+ c)
    }
더하기(1,2,3); // 6

// [10,20,30] 안의 요소를 더하고 싶은 경우 더하기([10,20,30]) X
var 어레이 = [10,20,30];
더하기(어레이[0], 어레이[1], 어레이[2]); // 해체작업이 너무 번거로움
더하기.apply(undefined, 어레이); // 옛날방식
더하기(...어레이); // 요즘방식

• 파라미터에 Spread operator를 넣으면 괄호를 벗기고 안의 데이터가 담기기 떄문에 간결하게 표현할 수 있다.

4. Apply / Call 함수

• apply와 call은 자바스크립트 내장함수이다.
• 객체를 선언하여 프로그램을 작성할 때, 특정 객체에 있는 함수를 사용하고 싶은 경우에 그 함수를 복사하여 붙여넣는 방법은 다소 번거롭고 귀찮을 수 있다. 또한 객체를 수정할 수 없는 경우라면 더더욱 어려운 상황이다. 이 때 Apply 나 Call 함수를 사용하면 특정 객체의 함수를 대신 갖고와 사용할 수 있다.

var person = {
    인사 : function(){
        console.log(this.name + '안녕')
        }
    }
    
var person2 = {
        name : '손흥민'
    }
    
person.인사.apply(person2)
person.인사.call(person2)

• 위와 같이 person이라는 객체는 인사라는 함수가 있으며, person2에서 인사 함수를 사용하고 싶은 경우에는 apply나 call을 사용한다. 코드의 뜻은 " person의 인사라는 함수를 person2에서 사용하게 해주세요 " 라고 이해하면 쉽다. apply나 call을 사용한 경우 실제 person2에 인사라는 함수가 생성된 것은 아니지만 마치 생성한 것처럼 작동하는 것이다.

    person.인사.apply(person2, [1,2])
    person.인사.call(person2, 1,2)

• apply와 call의 차이점은 apply의 경우 파라미터로 array 형태를 담을 수 있다. 하지만 call의 경우 array 형태로 받을 수 없다.

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

• 아까 위에서 옛날 방식으로 썼던 apply 함수의 경우, 더하기라는 함수를 어레이라는 데이터를 담아서 사용하려고 한 것이다. 이 때 더하기라는 함수를 사용하는 객체의 대상이 없기 때문에 undefined라고 한 것이며, 아무 값을 넣어도 상관이 없다.

 

 

자료 출처 : https://codingapple.com/

코딩애플 온라인 강좌 - 개발자도 단기완성!