構造分解の割り当て

例1

const profile = {
    name: "철수",
    age: 8,
    school: "다람쥐초등학교"
}
// 1. 새 변수에 profile 객체의 name의 키와 value를 직접 할당해줌.
const name = profile.name
name	// '철수'

// 2. 구조분해할당
const {age, school} = profile
age		// 8
school	// '다람쥐초등학교'

例2

function useQuery(aaa){
    return{
        data: {
            fetchBoard: {
                writer: "철수",
                title: "제목",
                contents: "내용"
            }
        },
        loading: "로딩중!"
    }
}

useQuery("FETCH_BOARD")		// {data: {…}, loading: '로딩중!'}data: {fetchBoard: {…}}loading: "로딩중!"[[Prototype]]: Object

const { data, loading} = useQuery("FETCH_BOARD")

data						// {fetchBoard: {…}}
data.fetchBoard.writer		// '철수'
data.fetchBoard.title		// '제목'
data.fetchBoard.contents	// '내용'
loading						// '로딩중!'

例3

const classmates = ["철수", "영희", "훈이"]

const child1 = classmates[0]
child1		// "철수"

const [, child2, child3] = classmates
child2		// "영희"
child3		// "훈이"

例4

function useState(aaa){

    const myState = aaa  // 초기값으로 사용
    const setMyState = (bbb) => {
        console.log(`state를 ${bbb}로 바꿔줄게!~`)
    }
    return [myState, setMyState]
}

const [count, setCount] = useState(10)
setCount(20)	// state를 20로 바꿔줄게!~

// setCount()를 qqq[1](50)형식으로도 쓸 수 있어!
const qqq = useState(30)
qqq[0]	// 30
qqq[1](50)	// tate를 50로 바꿔줄게!~

例5

function getChild(){
    return {
        name: "chulsu",
        age: 13,
        school: "cocamp"
    }
}

const {school} = getChild()

school		// 'cocamp'

例出力の交換方法

function getClassmates(aaa, bbb){
    return [bbb,aaa]
}

const [child1, child2] = getClassmates('훈이','맹구')

child1	// '맹구'
child2	// '훈이'