JavaScript 자료구조와 자료형

구조 분해 할당

• 객체나 배열을 변수로 분해할 수 있게 해주는 특별한 문법

배열 분해하기

<script>
let arr = ["Bora", "Lee"]; //이름과 성을 요소로 가진 배열

let [firstName, surname] = arr; //구조 분해 할당을 이용함

const[f,s] = arr; //상수로 대입 받기도 가능

/*let firstName = arr[0];
let surname = arr[1];*/ //위 코드와 같음

console.log(firstName); //Bora
console.log(surname); //Lee

</script>

응용 코드

<script>
let [firstName, surname] = "Bora Lee" .split(' ');
//split 메서드 호출 결과로 배열 반환, 배열을 바로 변수로 대입
</script>

• 구조 분해 할당 적용할 떄 대입문의 왼쪽에는 변수, 상수, 속성 등 이 올 수 있다.

<script>
let user ={ };
[user.name, user.surname] = "Bora Lee" .split(' ');

console.log(user.name); //Bora
console.log(user.surname); //Lee

</script>

• 쉼표를 사용해 특정 요소를 무시 할 수 있다.

<script>
let [firtsName, ,lastName] = ["Jae","Jeon","Lim"];

console.log(firstName); //Jae
console.log(lastName); //Lim

</script>

Spread syntax(...)로 나머지 요소 가져오기

• 배열 앞쪽에 위치한 값 몇 개만 필요하고 그 이후 나머지 값들은 한데 모아서 저장하고 싶을 때 (...)연산자를 사용한다.

<script>
let [firtsName,middleName, ...rest] = ["Jae","Jeon","Lim","is my name"];

console.log(firstName); //Jae
console.log(middleName); //Jeon

//rest는 배열
console.log(rest[0]); //Lim
console.log(rest[1]); //is my name];
console.log(rest.length); //2

</script>

기본값

• 할당 하려고 하는 변수의 개수가 분해하려고 하는 배열의 길이보다 크더라도 에러가 발생하지 않는다.

<script>
let[firstName,surname] = []; //대입할 값이 없으므로 undefined 값이 나옴

console.log(firstName); //undefined
console.log(surname); //undefined

</script>

• (=)을 이용하면 기본으로 할당해 줄 값인 기본값을 설정 가능

<script>
let [name = "Guest", surname = "Anonymous", title="MyName"] = ["JaeYeon","Lim"];

console.log(name); // JaeYeon (배열에서 받아온 값)
console.log(surname); // Lim (배열에서 받아온 값)
console.log(title); // MyName (기본값)

</script>

객체 분해하기

• 구조 분해 할당 문법을 이용하여 객체도 분해 가능

• 할당 연산자 우측에는 분해 할 객체를, 좌측에는 상응하는 객체 프로퍼티의 "패턴"을 입력

<script>
let option = {title:"Menu", width: 100, height:200}; //let 괄호 안의 변수순서가 바뀌어도 동일하게 동작
let {title, width, height} = option;

console.log(title); //menu
console.log(width); //100
console.log(height); //200
</script>

• 좌측 패턴에 콜론(:)을 사용하여, 객체 프로퍼티 값을 기존 프로퍼티 키와 다른 이름을 가진 변수에 저장이 가능하다.

<script>
let option = {title:"Menu", width: 100, height:200};

let {width:w, height: h, title} = option; //width는 w변수에 height는 h변수에 title은 그대로 title변수에 저장

console.log(title); //menu
console.log(w); //100
console.log(h); //200
</script>

• 프로퍼티가 없는 경우를 대비해 할당 연산자(=)를 사용하해 기본값 설정도 가능하다.

<script>
let option = {title:"Menu"};
let {title, width = 100, height = 200} = option; // =을 이용해 width,height 기본값 지정

console.log(title); //menu
console.log(width); //100
console.log(height); //200
</script>

• 콜론(:)과 할당 연산자(=)를 동시에 사용 가능

<script>
let option = {title:"Menu"};
let {title, w = 100, h = 200} = option; // =을 이용해 width,height 기본값 지정

console.log(title); //menu
console.log(w); //100
console.log(h); //200
</script>

• 전개구문(...)을 사용하면 배열에서와 같이 나머지 프로퍼터를 객체에 할당할 수 있다.

<script>
let option = {title:"Menu", width: 100, height:200};
let {title, ...rest} = option;

console.log(title); //menu
console.log(rest.width); //100
console.log(rest.height); //200
//rest에는 객체가 할당됨
</script>