2021/06/04 자바스크립트

구조 분해 할당

객체데이터는 구조 분해 할당을 할 때 이름으로 구분하여 추출합니다.

const user = {
  name: 'Dongit',
  age: 25,
  email: 'abcd1234@gmail.com'
}

const { name, age, email, address } = user

console.log(`이름은 ${name} 입니다.`)
console.log(`나이는 ${age} 입니다.`)
console.log(`이메일은 ${email} 입니다.`)
console.log(`주소는 ${address} 입니다.`)

// 이름은 Dongit 입니다.
// 나이는 25 입니다.
// 이메일은 abcd1234@gmail.com 입니다.
// 주소는 undefined 입니다.

 

변수의 기본값은 할당연산자를 통해서 지정해 줄 수 있습니다.

const { name, age, email, address = 'Korea' } = user
console.log(`주소는 ${address} 입니다.`)
//주소는 Korea 입니다.

변수의 이름을 다르게 지정하고 싶다면 콜론을 사용하여 활용할 이름을 선언할 수 있습니다.

const { age, name, email: Email, address = 'Korea' } = user
console.log(`이메일은 ${Email} 입니다.`)
//이메일은 abcd1234@gmail.com 입니다.

 

배열데이터는 구조 분해 할당을 할 때 순서로 구분하여 할당을 합니다.

const fruits = ['Apple', 'Banana', 'Cherry']
let [a, b, c, d] = fruits
console.log(a, b, c, d)

Apple Banana Cherry undefined

중간데이터만 필요하다면 순서를 명시해줘서 데이터를 할당 할수 있습니다.

 

const [, b] = fruits
console.log(b) //Banana
------------------------
const [, , b] = fruits
console.log(b) //Cherry

 

전개 연산자 (Spread)

전개연산자를 사용하면 배열을 쉼표로 구분하여 각각의 아이템으로 전개합니다.

 

const fruits = ['Apple', 'Banana', 'Cherry']
console.log(fruits)
console.log(...fruits) //전개연산자
//console.log('Apple", 'Banana', 'Cherry')

function toObject(a, b, c) {
  return {
    a: a,
    b: b,
    c: c
  }
}
console.log(toObject(...fruits))
//{a: "Apple", b: "Banana", c: "Cherry"}

' ... ' 은 나머지 매개변수라는 의미로도 사용됩니다.

 

const fruits = ['Apple', 'Banana', 'Cherry', 'Orange']

function toObject(a, b, ...c) {
  return {
    a: a,
    b: b,
    c: c
  }
}
console.log(toObject(...fruits))
//{a: "Apple", b: "Banana", c: ["Cherry", "Orange"]}

위의 함수가 지저분하니 축약하여 깔끔하게 정리해보겠습니다.

속성의 이름과 변수의 이름이 같으면 문자를 하나만 남겨놔도 쓸 수 있습니다.

객체 데이터를 화살표 함수 내부에서 축약형으로 반환하고 싶다면 소괄호 안에 객체 데이터를 정의해야 합니다.

 

//function toObject(a, b, ...c) {
//  return {
//  a: a,
//    b: b,
//    c: c
//  }
//}

const toObject = (a, b, ...c) => ({ a, b, c })
console.log(toObject(...fruits))
//{a: "Apple", b: "Banana", c: ["Cherry", "Orange"]}

 

데이터 불변성

원시 데이터: String, Number, Boolean, undefined, null .. 

참조형 데이터: Object, Array, Function 

 

원시 데이터는 눈에 보이는 결과 값이 다르면 다른 데이터라고 생각하면 됩니다.

참조형 데이터는 그냥 봤을 때는 값이 같더라도 같은 메모리를 참조하고 있지 않으면 다른 데이터로 인식됩니다.

//참조형 데이터

let a = { k: 1 }
let b = { k: 1 }
console.log(a, b, a === b) //{k: 1} {k: 1} false
a.k = 7
b = a
console.log(a, b, a === b) //{k: 7} {k: 7} true
a.k = 2
console.log(a, b, a === b) //{k: 2} {k: 2} true
let c = b
console.log(a, b, c, a === c) //{k: 2} {k: 2} {k: 2} true