[Vue] Vuex 시작하기 전에...

🚗 ES6+ 에서 Obj를 간결하게 선언

const name = 'deok'
const obj1 = {
    name: name,
    sayHello: function() {
        return `Hi my name is ${this.name}`
    }
}

const obj2 = {
    name,
    sayHello() {
        return `Hi my name is ${this.name}`
    }
}

• obj1과 ob2는 완전히 같다.

🚓 객체의 비구조화(destructuring)

const student = {
    name: 'deok',
    email: 'deok@deok.com',
    phone: '01012345678'
}

// 1번
// const name = student.name
// const email = student.email
// const phone = student.phone

// 2번
// const { name } = student
// const { email } = student
// const { phone } = student

// 3번
const { name, email, phone } = student

• 객체가 된다는 개념이 아닌 student 객체를 해체하겠다는 느낌.
• 키와 변수명이 같아야한다. 순서는 상관 없음.

function getStudentInfo1(student) {
    console.log(`Hi, my name is ${student.name}, email is ${student.email}`)
}

function getStudentInfo2({ name, email, phone }) {
    console.log(`Hi, my name is ${name}, email is ${email}`)
}

• {} 를 통해 객체가 들어온다고 생각하여 먼저 분해를 하고 시작.

function saveStudent1(name, email, phone, id, ...) {
    return 
}
saveStudent('deok', '@deok.com', '01012345678')

function saveStudent2({ name, email, phone }) {
    return
}
saveStudent(student)

• 객체를 넣으면 쉽게 할 수 있다. ( 사용자 입장에서 매우 편리함)
• 들어오는 인자는 하나지만 내부에서는 비구조화를 통해 나눠진다.