자바스크립트 기초) 배열, 객체 구조 분해 할당

 

0. 리액트 useState 할때도 쓰이는 구조분해할당

- 이제는 좀 그만 찾아보자!!

 

1. 배열 구조분해할당

- array 의 하나하나의 요소가 너무 중요한 자료여서 하나의 자료를 하나의 변수에 할당하고 싶을때는?

- 아래처럼 일일히 하나하나씩 할당할것이다.

let array = ['돼지','토끼','양']
let 변수1 = array[0]
let 변수2 = array[1]
let 변수3 = array[2]

 

- 하지만 배열 안에 요소가 100개라면...? 하나씩 let을 선언하면서 변수를 만들어주는 건 귀찮다.

아래처럼 하면 쉽게 담을 수 있다.

let [변수1,변수2,변수3] = ['돼지','토끼','양']

console.log(변수1) // '돼지'
console.log(변수2) // '토끼'
console.log(변수3)// '양'

 

- 아래처럼 3개의 변수를 1개의 변수로 할당할 수 있다.

let people = ['은혜','은주','은서']
let [person1,person2,person3] = people

 

 

- 아래처럼 문자열을 인자 안에 있는 걸 기준으로 나눠서 배열로 반환하는 split을 쓸수도 있다.

let people = '은혜-은주-은서'
let [person1,person2,person3] = people.split('-')

 

- let,const 키워드를 굳이 쓰지 않아도 된다.

[a,b,...c] = [1,2,3,4,5,6]

console.log(a) //1
console.log(b) //2
console.log(3) //[3, 4, 5, 6]

 

- 변수에 기본값을 줄 수도 있다. 

var [d, e, f = 10] = [2, 3]
console.log(f)

 

- 변수를 아예 빈 배열로 저장했다면 undefined가 나온다

var [h, i, z] = []
console.log(h)//undefined

 

- 내가 넣고 싶은 배열요소만 선착순으로 할당도 가능하다

let x = [1, 2, 3, 4, 5];
let [y, z] = x;
console.log(y); // 1
console.log(z); // 2

 

2. 객체 구조분해할당

- 이번에도 객체의 value가 너무 중요해서  value 값을 하나하나씩 변수에 할당하고 싶다. 

- 보통은 아래처럼 키값을 빼서 변수를 만들었을 것이다.

let 선은혜객체 = {나이:28,직무:'프론트엔드'}

let 나이 = 선은혜객체.나이
let 직무 = 선은혜객체.직무

console.log(나이) // 28
console.log(직무) // '프론트엔드'

 

- 객체 안에 프로퍼티(키값과 밸류) 가 몇십줄 이상이라면...? 일일히 let 선언하기 귀찮아~

let {키이름1: 변수명1 , 키이름2 : 변수명2} = {키이름1:값1, 키이름2:값2}

let {name : aa, age:bb, job:cc} = {name:'kim',age:28,job:'nojob'}

 

- 만약, 변수이름이 key 이름과 같다면 아래처럼 생략해도 된다.

let {키이름1,키이름2} = {키이름1:값1 , 키이름2,값2}

let {name,age} = {name:'kim',age:28}

console.log(name)//'kim'
console.log(age) // 28

 

- let, const,var 키워드를 안써도 가능하다. 대신 소괄호로 감싸줘야함

({a,b} = {a:10,b:20}) 

console.log(a) //10
console.log(b) //20

 

 

- 기본값 역시 지정 가능함

let { 성 = 'kim', 나이 = 31 } = {};

console.log(성) //'kim'
console.log(나이) //31

 

🔸연습문제

- 등호를 이용해서 좌우를 똑같이 맞춰주면된다.

왼쪽에는 변수명을 적으면 된다.

//행정학개론,행정법,인사행정,토익,토스를 각각 변수에 담아보세요

    
  let 성적 ={
    학점:{
      행정학개론:'a',
      행정법:'b',
      인사행정:'c'
    },
    영어:['토익880점','토스레벨6']
  }
  
  let{학점:{행정학개론,행정법,인사행정},영어:[토익,토스]} = 성적

 

3. 배열 구조 분해

- 하나의 구조 분해 표현식만으로 두 변수의 값을 교환할 수 있다.

 

만약 a와 b의 값을 교환하려면?

a에 b의 값을 넣는다면 a도 5가 나오고 b도 5가 나오게된다. 결국 값을 바꿔치기 할수가 없게된다.

let a = 1;
let b = 5;

a = b
console.log(a); //5
console.log(b); //5

따라서 아래 방법처럼 임시 변수를 만들어줘야한다.

let a = 1;
let b = 5;
// c라는 임시 변수만들기
let c = a;

a = b //a는 5가 됨
b = c //c가 1이었으니 b는 1이 됨

console.log(a); //5
console.log(b); //1

하지만, 배열구조분해를 해서 아래처럼 바로 요소를 바꿔치기 할 수 있다. 

let a = 1;
let b = 5;

[a,b] = [b,a]

console.log(a) //5
console.log(b) //1

 

4. 함수 파라미터에도 구조분해 문법 사용 가능

- 두개의 파라미터안에 object 내의 Kim, 그리고 age 자료들을 입력하고 싶으면?

함수 인자 안에 obj.name 처럼 키값을 붙여서 넣었을 것이다. 

function 함수(name, age){
  console.log(name);
  console.log(age);
}

var obj = { name : 'Kim', age : 20 }
함수(obj.name, obj.age);

- 하지만 구조분해문법을 써서 가능하다.

함수 인자 안에 obj.name , obj.age를 쓰지 않고도 넣을수 있다.

함수 파라미터 안에 {} 중괄호를 만들어서 키값을 넣어준다

function 함수( { name, age }){
  console.log(name);
  console.log(age);
}

var obj = { name : 'Kim', age : 20 };
함수(obj); //kim, 20

 

- array 도 기존에는 아래처럼 해야했다.

function 함수( name, age ){
  console.log(name);
  console.log(age);
}

var array = [ 'Kim', 30 ];
함수(array[0], array[1]);

- 하지만 배열 구조분해 문법으로 쉽게 가능하다

function 함수( [name, age] ){
  console.log(name);
  console.log(age);
}

var array = [ 'Kim', 30 ];
함수( ['Kim', 30] );

 

 

 

 

출처

코딩애플 매우 쉽게 이해하는 JavaScript 객체지향&ES6 신문법

코딩앙마  구조분해할당

https://velog.io/@sehee-xx/%EA%B5%AC%EC%A1%B0-%EB%B6%84%ED%95%B4-%ED%95%A0%EB%8B%B9-%EB%B0%B0%EC%97%B4-%EA%B5%AC%EC%A1%B0-%EB%B6%84%ED%95%B4