[JavaScript] 2주차 - property shothand, spread operator, rest parameter, template literal

다 처음 듣는 개념임.... ㅎ..

 

1. 단축 속성명 : property shothand (코드계의 별다줄 같은 느낌...)

const name = "kim";
const age = 30;

원래대로라면

const obj = { 
name : name, 
age : age,
}

이지만,

각각의 key값의 이름이 같을땐 생략이 가능하다.

const name = "kim";
const age = 30;

const obj = { name, age}

이렇게도 가능! 이것이 바로 단축 속성명 a.k.a 프로퍼티 숏핸드

 

2. 전개 구문 : spread operator

배열의 경우

let arr = [1,2,3,4]

console.log(arr) // [1,2,3,4]
console.log(...arr) // 1 2 3 4

만약 arr 배열에 5를 추가하고 싶으면

let arr = [1,2,3,4]
let newarr = [...arr, 5] => arr 배열을 풀어서 거기에 5를 추가한 다음에 [] 배열로 다시 묶는다.

console.log(newarr) // [1,2,3,4,5]

=======================================================

객체의 경우

let user = {name : "kim", age: 30,}
let user2 = {...user, birthday:"today"}

console.log(user) // {name : "kim", age: 30}
console.log(user2) // {name : "kim", age: 30, birthday:"today"}

 

3. 나머지 매개변수 : rest parameter 

function example(a,b,c) {
  console.log(a,b,c)
};

example(1,2,3); // 1 2 3

=========================================

function example(a, b, c, ...args){
  console.log(a,b,c) // 1 2 3
  console.log(...agrs) // 4 5 6
};

example(1,2,3,4,5,6);

 

4. 템플릿 리터럴 : template literal

console.log("hello, world") // hello, world
=>
console.log(`hello, world`) // hello, world
=>
console.log(`hello, world ${3*3}`) // hello, world 9
=>
const hi = "안녕!"
console.log(`${hi} hello, world ${3*3}`) // 안녕! hello, world 9


``이 주는 가장 큰 장점!

기본적으로 '' 또는 ""는 멀티라인을 지원하지 않음. 즉 한줄짜리밖에 못씀!!!! 
근데 ``은 다르다. 무려 멀티라인 지원 가넝

console.log(`
    안녕 자바스크립트야.
        너는 정말 
            이야 너는 정말
                날 힘들게 하는구나 하하핳
    `)

이게 가능한것이 바로 템플릿 리터럴인것이다 하하핳...