2. JavaScript 응용 - 배열/객체의 비 구조화 할당, 변수 값의 변경

1 ) 배열의 비 구조화 할당

let arr = ["1", "2", "3"];

let one = arr[0];
let two = arr[1];
let three = arr[2];

console.log(one, two, three);


//출력
1 2 3

반복되는 긴 코드를 짧게 줄여줄 수 있음.

 

let arr = ["1", "2", "3"];

let [one, two, three] = arr;
console.log(one, two, three);


//출력
1 2 3

배열 안에 변수를 선언해 주고 그 변수에 arr의 배열을 할당해 주면 됨.

 

let [one, two, three] = ["1", "2", "3"];
console.log(one, two, three);


//출력
1 2 3

두 줄의 코드를 합쳐서 한 줄로 만들수도 있음.

 

let [one, two, three, four = "4"] = ["1", "2", "3"];
console.log(one, two, three, four);


//출력
1 2 3 4

배열 안에 선언한 변수에 기본값을 설정하여

할당되는 변수에 값이 없더라도

변수에 기본값을 설정하였기에 설정한 값이 출력됨.

 

 

 

2 ) 변수 값의 변경

let a = 10;
let b = 20;

[a, b] = [b, a];
console.log(a, b);


// 출력
20 10

두 변수인 a와 b의 값을 서로 바꿀 수도 있음.

[a, b] = [b, a]; 를 하여

a에는b의 값을 b에는 a의 값을 저장하게 됨.

 

 

 

3 ) 객체의 비 구조화 할당

let object = {one: "1", two = "2", three = "3"};

let {one, two, three} = object;
console.log(one, two, three);


//출력
1 2 3

배열과 마찬가지로 객체에도 비 구조화 할당을 할 수 있음.

객체 안에 변수를 선언해 주고 그 변수에 object의 객체값을 할당해 주면 됨.

let object = {one: "1", two = "2", three = "3"};

let { one: oneOne, two, three, four = "4" } = object;
console.log(oneOne, two, three, four);


//출력
1 2 3 4

객체 안에 선언한 변수명을 변경하고 싶을 땐

one: oneOne 을 하여 one인 변수명을 oneOne인 변수명으로 변경함.

또한, 배열에서와 마찬가지로

객체 안에 선언한 변수에 기본값을 설정하여

할당되는 변수에 값이 없더라도

변수에 기본값을 설정하였기에 설정한 값이 출력되도록 할 수 있음.