ES6 : 템플릿 문자열, 전개연산자, 가변과 불변 변수

템플릿 문자열

` (백틱) 안에 변수와 연산식, 문자열을 혼용한다.

 

var string1 = '안녕하세요';
var string2 = '반갑습니다.';

var greeting = string1 + ' ' + string2;

greeting
"안녕하세요 반갑습니다."

var product = {name : '도서', price:'4200'};
var message = '제품'+ product.name + ' 의 가격은 ' + product.price +' 입니다.';

message
"제품도서 의 가격은 4200 입니다."

var multiLine = '문자열1\n문자열2';

multiLine
"문자열1
문자열2"


var value = 1;
var value1 = 2;
var bool = false;

var operator1 = '더한 값은 '+ (value + value1) +' 입니다.';
var operator2 = '불리언 값은 ' +(bool ? '참' : '거짓') + '입니다';

operator1
"더한 값은 3 입니다."
operator2
"불리언 값은 거짓입니다"

스스로 보기에 굉장히 당연해 보이는 이 것이 템플릿 문자열을 사용하면 간단히 끝난다.

greeting = `${string1} ${string2}`;

"안녕하세요 반갑습니다."

message = `제품 ${product.name} 의 가격은 ${product.price} 입니다.`;

"제품 도서 의 가격은 4200 입니다."

multiLine = `문자열1
문자열2`;

"문자열1
문자열2"

operator1 = `더한 값은 ${value + value1} 입니다.`

"더한 값은 3 입니다."

operator2 = `불리언 값은 ${bool ? '참' : '거짓'} 입니다`;

"불리언 값은 거짓 입니다"

---

전개 연산자

배열[] , 함수(), 객체{} 를 전개한다. ...를 사용한다.

var array1 = ['one','two'];
var array2 = ['three','four'];

var combined = array1.concat(array2);

combined
(4) ["one", "two", "three", "four"]

combined = [array1[0], array1[1], array2[0], array2[1]];
(4) ["one", "two", "three", "four"]

combined = [].concat(array1,array2);
(4) ["one", "two", "three", "four"]


var first = array1[0];
var second = array1[1];
var three = array1[2] || 'empty';


function fuc(arguments) {
    var args = Array.prototype.slice.call(this, arguments);
var first = args[0];
var others = args.slice(1,args.length);
}

전개 연산자를 사용하면 간단히 끝난다.

combined = [...array1, ...array2];
(4) ["one", "two", "three", "four"]

[first,second,three,...others] = combined;

first
"one"
second
"two"
three
"three"
others
["four"]

[first,second,three='empty',...others] = array1;
(2) ["one", "two"]

first
"one"
second
"two"
three
"empty"
others
[]

function funcc(...args) {
    var [first, ...others] = args;
}

객체

var objOne = {one:1, two:2, other:0};
var objTwo = {three:3, four:4, other:-1};

combined = {
    one : objOne.one,
    two : objOne.two,
    three : objTwo.three,
    four : objTwo.four,
}

{one: 1, two: 2, three: 3, four: 4}

combined = Object.assign({},objOne,objTwo);
{one: 1, two: 2, other: -1, three: 3, four: 4}

combined = Object.assign({}, objTwo,objOne);
{three: 3, four: 4, other: 0, one: 1, two: 2}

var other = Object.assign({},combined);

other
{three: 3, four: 4, other: 0, one: 1, two: 2}

delete other.one

other
{three: 3, four: 4, other: 0, two: 2}

전개연산자 사용

combined = {
    ...objOne,
    ...objTwo
}
{one: 1, two: 2, other: -1, three: 3, four: 4}

combined = {
    ...objTwo,
    ...objOne   
}
{three: 3, four: 4, other: 0, one: 1, two: 2}

var {...other} = combined;
{three: 3, four: 4, other: 0, one: 1, two: 2}

var {one, ...others} = combined;

one
1
others
{three: 3, four: 4, other: 0, two: 2}

...보면 볼수록 놀랍다.

 

---

가변변수와 불변변수

• let : 가변변수 
• const : 상수

다만, const 는 할당이 불가능하고 값 변경은 가능하다.

 

해당 코드는 다른 값을 할당하고 있는 것을 보여준다.

let num = 1;
num = num * 3;
3

let str = '문자';
str = '다른문자';
"다른문자"

let arr = [];
arr = [1,2,3];
(3) [1, 2, 3]

let obj = {}
obj = {name : 'soomin',age : 28}
{name: "soomin", age: 28}

const 는 값 할당이 불가능 하다.

const cNum = 1;
cNum = cNum * 3;

VM5875:2 Uncaught TypeError: Assignment to constant variable.
    at <anonymous>:2:6
    
const cStr = '문자';
cStr = '다른문자';
VM5973:2 Uncaught TypeError: Assignment to constant variable.
    at <anonymous>:2:6
    
const cArr = [];
cArr = [1,2,3];
VM6039:2 Uncaught TypeError: Assignment to constant variable.
    at <anonymous>:2:6
    
const cObj = {};
cObj = {name : 'soomin', age : 28}
VM6142:2 Uncaught TypeError: Assignment to constant variable.
    at <anonymous>:2:6

---

하지만 const 는 값 변경은 가능하다. 이는 즉 무결성을 해친다.

cArr.push(1);
1

cArr.splice(0,0,0);
[]

cArr
(2) [0, 1]

cArr.pop();
1

cArr
[0]

cObj.name = '이름';

cObj
{name: "이름"}

Object.assign(cObj,{name : '새이름'});

cObj
{name: "새이름"}

개발자 자체적으로 , 무결성을 지켜야한다는 의미가 된다. 즉, 할당된 값은 변경하지 않고, 새로운 값을 만들어 내야한다.

const cnum2 = cNum * 3;

cnum2
3

const cstr2 = `${cStr} 문자`

cstr2
"문자 문자"

const carr = cArr.concat(1);

carr
(2) [0, 1]

const carr1 = [...cArr, 2, 3]

carr1
(3) [0, 2, 3]

const carr2 = cArr.slice(0,1);

carr2
[0]

const [cfirst ,csecond, ...others] = carr2;

cfirst
0
csecond
undefined
others
[]

const cobj = {name : 'soosoo'};

const cobj1 = {name : cobj.name, age:29}

cobj1
{name: "soosoo", age: 29}

const cobj2 = {...cobj1, greeting: `hello`};

cobj2
{name: "soosoo", age: 29, greeting: "hello"}

const {name, ...cothers} = cobj2;

name
"soosoo"

cothers
{age: 29, greeting: "hello"}

---

무결성을 지키지 않거나, 지키는 함수

• push / concat
• splice / slice
• pop / slice
• shift / slice

---

** 불변변수는 변수의 값이 변하는 것을 쉽게 판단하게 끔한다. 이는 디버깅시 굉장히 중요하다고 생각한다.

 

가변변수를 적극사용하고 몸에 익혀야한다.

---