[JavaScript] : 구조분해 할당 [배열], {객체}, 새로운 값으로의 할당.

구조분해 할당

---

구조분해 할당이란?
ES6문법이 생겨난 이후에 등장한 문법

// 구조분해할당 (destructuring) (de + structure + ing)
// de = not
// structure = 구조

구조를 분해해서 [배열] 혹은 {객체} 하나하나의 요소들을 변수들에 할당해주는 것.

배열에서의 구조분해할당
[] : 순서가 중요

기본개념 예시

var arr = [1, "finger"]; // arr라는 배열이 첫번째 요소는 1이라는 숫자를 가지고 있고, 두번째 요소는 "finger"라는 문자열을 가지고 있다.
var[a, b] = arr; // []배열모양으로 감싼 a와 b에 arr를 할당한다면??

// 다음과 같은 변수 선언 및 할당이 된다.
var a = 1, var b = "finger"

var arr = ["value1", "value2", "value3"]; // arr라는 배열에 3개의 요소가 들어있고,
var [a, b, c] = arr; // a,b,c,라는 변수를 왼쪽과 같이 선언한다면,
console.log(a, b, c); // arr의 요소들이 각각 a,b,c라는 변수에 하나하나 들어가게 된다.

// 출력값
a = value1 b = value2 c = value3

구조분해할당을 통해, 값을 할당 해주려는 변수에 값이 들어오지 않는다면?

var arr = ['value1', 'value2', 'value3']; // 대입해줄 데이터의 값은 총 3개의 요소를 가지고 있고,
var [a, b, c, d] = arr; // arr로부터 요소를 할당받을 변수의 수는 4개인데,
console.log(a, b, c, d); // d의 값도 콘솔로 찍으면 뭐가 나올까?

// 출력값
value1 value2 value3 undefined

위의 구조분해할당식은 요약하면 다음과 같다.

var a = 'value1'; // 각 요소들이 배열의 순서에 맞게 차례대로 a,b,c 변수에 할당되었고,
var b = 'value2';
var c = 'value3';
var d; // d라는 변수에는 할당되는 값이 없으니, d라는 변수를 선언만 해놓은채 콘솔로 확인한것과 같다.

// 그래서 d의 출력값은 undefined

구조분해할당의 초기값 설정

// 위와 같은 식에서 d라는 변수에 할당되는 값이 없어도, 초기값을 잡아둔다면, 콘솔에서 초기값이 출력된다.
// 초기값 설정은 변수 선언을 함과 동시에 []안에서 ="data"로 해준다. 방법은 아래와 같다.

var arr = ['value1', 'value2', 'value3'];
var [a, b, c, d=3] = arr;
console.log(a, b, c, d);

// 위 코드의 출력값
value1 value2 value3 3

위 코드에서 확인 가능하듯이, 구조분해할당시 위와 같은 식으로 각 변수에 초기값 설정이 가능하다는걸 알게되었다.

초기값이 있는 변수에 값이 할당된다면?

var arr = ['value1', 'value2', 'value3', 'newData']; // arr의 마지막 요소에 "newData"라는 새로운 값을 넣어주고 변수에 구조분해할당을 진행해본다.
var [a, b, c, d = 3] = arr;
console.log(a, b, c, d);

// 출력값 
value1 value2 value3 newData

이처럼 초기값이 잡혀있는 변수라고 할지라도, 구조분해할당으로 새로운 값이 할당되면, 새롭데 들어온 값이 출력이 된다.

배열 구조분해할당 정리

• 배열의 구조분해 할당은, "순서"대로 변수에 배열요소의 값이 할당이 되며,
• 할당된 값이 없을때는, 할당을 받지 못한 해당 변수는 undefined를 출력하고,
• 기본적으로 변수의 "초기값" 설정이 가능하며,
• 초기값을 가진 변수에 값이 할당되어 들어올 경우, 새롭게 할당된 값이 출력된다.

---

객체에서의 구조분해할당
{} : key값이 중요

기본개념 예시

var user = {
    name: 'jhon',
    age: 30,
};            // user라는 객체는 key값으로 name과 age를 갖고있다.

var { name, age } = user; // 객체에서 구조분해할당은 서로 맞는 key값을 통해 이루어진다.

// 위의 코드를 다른 말로 표현하면 다음과 같다.

var { name, age } = { name: 'jhon', age: 30, };

// 위 코드를 콘솔로 찍어본다면

var user = {
    name: 'jhon',
    age: 30,
};

var { name, age } = user;

console.log(name, age);

// 출력값
jhon 30

새로운 key값으로 value값을 할당하는 방법

var user = {
    name: 'jhon',
    age: 30,
};
// 처음과 같은 user라는 객체를,

var { name: newName, age: newAge } = user; // 왼쪽과 같게 식을 짜서 구조분해할당을 진행해보면?

console.log(name, age); //name, age로 콘솔을 찍어본다면?

오류 출력

console.log(name, age); // 콘솔로그에서 오류 발생
            ^

ReferenceError: name is not defined   // name 은 정의되지 않았습니다.

위 오류로 알 수 있는 부분은, 객체를 새로운 key값으로 구조분해 할당을 진행하면,

새로운 key에 데이터가 할당이 되고 ! , 할당된 데이터는 새로운 key값을 사용해야 출력이 가능하다 !

위와 같은 오류가 났다는 것은, 정상적으로 새로운 key값에 값이 할당이 진행되었다 라는걸 짐작해볼수 있다.

정확히 확인하기 위해 새로운 key값으로 콘솔을 찍어보자.

var user = {
    name: 'jhon',
    age: 30,
};

var { name: newName, age: newAge } = user;

console.log(newName, newAge);

// 출력값
jhon 30

값이 할당되지 않은 변수의 출력은 오류? undefined?

var user = {
    name: 'jhon',
    age: 30,
};             // name과 age로만 구성된 객체 user에서

var { name, age, gender } = user; // gender라는 새로운 key를 추가해 구조분해 할당을 진행하면,

console.log(name, age, gender);

// 출력값
jhon 30 undefined
// gender의 값은 당연하게도 undefined가 출력

초기값 설정

var user = {
    name: 'jhon',
    age: 30,
};

var { name, age, gender = 'male' } = user; // 배열과 같은방식으로 = 을 사용해 초기값 설정이 가능하다.

console.log(name, age, gender);

// 출력값 
jhon 30 male

초기값을 가진 변수에 데이터가 할당될 경우

var user = {
    name: 'jhon',
    age: 30,
    gender: 'female',
};

var { name, age, gender = 'male' } = user;

console.log(name, age, gender);

// 출력값
jhon 30 female

위와 같이 초기값은 새롭게 할당되는 데이터에 의해서 사라지고 새롭게 할당된 값이 출력되게 된다.

객체 구조분해할당 정리

• 객체에서의 구조분해 할당은 key값이 제일 중요하며,
• 초기값 설정이 가능하고,
• 초기값을 가지고 있더라고 데이터가 할당이 되게되면, 새롭게 할당된 데이터의 값이 출력된다.
• 또한 새로운 key값을 가질 때 name이라는 key값으로 해당 데이터를 "불러왔고", 새로운 변수명인 newName에 "name이 불러온" 데이터의 값이 할당되는 식으로 이루어진다.

 

#자바스크립트 #구조분해할당 #초기값 #새로운_key값에_할당가능 #객체 #배열 #순서와_key값