구조분해 할당 (Destructuring assignment)

배열이나 객체의 속성을 해체해 그 값을 개별변수에 담는 것

JavaScript에서 많이 쓰는 자료구조인 배열과 객체를 편하게 사용하기 위함이다. 즉, 객체나 배열에 저장된 데이터의 일부를 가져오고 싶을 때 주로 사용한다.

const arr=['tomato','kiwi','banana'];
const [tom, ki, ba]=arr5;
console.log(tom); //tomato

각각의 배열 요소를 '변수의 이름'이름 접근하기 위해서 사용한다. 변수를 선언한 순서대로 배열의 요소가 할당된다.

배열의 구조 분해 할당

• 각 변수에 배열의 인덱스 순으로 값 대응

const [변수] = 배열 ;
//기존방식
const lists = ['apple', 'grape'];
console.log(lists[0], lists[1]); //apple grape
//구조분해 - 순서가 매우 중요
let [item1, item2] = lists;
console.log(item1); //apple
console.log(item2); //grape

• 구조분해 시 변수의 값이 undefined 일 때 기본값 할당 가능

let lists= ['apple', 'grape'];
[item1, item2, item3='peach']=lists;

console.log(item3); //peach
console

• 변수명으로 접근해서 value값 변경 가능

 item1 = 'banana';
console.log(item1); //banana

• 구조분해 없이 두 변수의 값 교환 가능!

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

객체의 구조 분해 할당

• 객체는 백엔드에서 정보를 저장하는 형태로 그리고 전송하는 형태에 수많이 활용된다. 이때, 객체는 function의 return 값에도 사용된다.( return 값을 객체 형태로 전송하는 것!)

 //객체
 const obj = {
				name: 'jihye',
                age: 25,
                gender: 'woman',
                friend: ['승윤', '혜영', '밍하'],
                hello: function () {
                    console.log('hello world');
                },
                // 문자열로 객체의 key 값 만들 수 있다.
                'kdt-기수': '11기',
            };
            //기존
            console.log(obj.name); //jihye
            //value 변경
            obj.age = 29;
            console.log(obj.age); //29
            obj.hello(); //hello world
            console.log(obj.friend[2]); //밍하
            //객체 배열에 key, value 추가
            obj.city = '서울';
            console.log(obj.city); //서울
            //문자열 key 값 접근하기
            console.log(obj['kdt-기수']); //11기

*문자열 key 값 부르기는 객체명[문자열]

• 이때, 객체의 구조 분해 할당에서는 순서는 상괍없고 key 값과 같은 변수명을 사용해서 해당 key 값에 접근한다.
  그래서 문자열은 변수명으로 선언하지 못하므로 변수명인 key값과 value에는 접근이 불가능하여 구조 분해 할당이 불가하다.

const obj = {
				name: 'jihye',
                age: 29,
                gender: 'woman',
                friend: ['승윤', '혜영', '밍하'],
                hello: function () {
                    console.log('hello world');
                },
                // 문자열로 객체의 key 값 만들 수 있다.
                'kdt-기수': '11기',
            };
//객체의 구조분해
            const { name, city, age } = obj;
            const { friend, hello, age: newAge } = obj;
            console.log(name, city, age); //jihye 서울 29
            console.log(friend, hello, newAge); //승윤 혜영 밍하 console.log('hello world') 29
            // key 값 'age'를 'newAge'로 변경

• key값을 새롭게 선언가능하다!

const { friend, hello, age: newAge } = obj;
console.log(friend, hello, newAge); //승윤 혜영 밍하 console.log('hello world') 29

age라는 key 값을 newAge로 변경한 예시
기존 key 값 : 새로운 key 값

전개구문 spread 연산자

연산자 ...

• 반복 가능한 객체에 사용하는 문법으로 배열, 유사 배열, 문자열 등에 사용 가능하다.
• 객체의 요소에 접근해서 요소들을 하나씩 분리해서 전개요소에 접근해서 반환이 가능하다.
  [1,2,3,4,5]라는 배열의 요소를 전개하기 위해서 ...[1,2,3,4,5]로 접근

*배열

<script>
  		const a = [1, 2, 3];
     	const b = [4, 5];
  //spread 연산자로 배열 합치기
        const spread = [...a, ...b];
        console.log(spread); //[1,2,3,4,5]
  
</script>

---

*객체

<script>
 //객체 접근해보기
            const obj = {
                name: '홍길동',
                age: 18,
                gender: 'man',
            };
            console.log({ ...obj });
            console.log(obj);
</script>

(결과)

---

rest

• 호출 받는 함수의 파라미터에 사용(선언 부분)
• 호출하는 함수의 파라미터 순서에 맞춰 값 설정 후 남은 파라미터 값을 배열로 설정

*배열

  //rest
            const values = [10, 20, 30, 40, 50, 60, 70];
            function get(a, b, c, ...rest) {
                console.log(a); //10
                console.log(b); //20
                console.log(c); //30
                console.log(rest); //40 50 60 70
            }
            get(...values);

!!함수 안에 배열명을 넣을 때 spread연산자를 붙혀서 넣어야 한다!!

JavaScript 클래스

• ES6부터 등장한 객체를 만드는 방법, 틀(template)
• 정해진 틀로 같은 규격의 객체를 여러 개 만들 수 있다. (재사용에 유리)
• new 키워드를 이용해서 미리 만들어둔 클래스 형태로 오브젝트를 만들 수 있다.(new Date에서 사용했었다!)
  
  (자동차라는 정해진 틀로 여러개의 객체 선언)

---

예제. 고양이 객체로 여러개의 고양이 class 선언

<script>
            class Cat {
                //생성자 - 클래스의 인스턴스 생성시 생성하는 것(선택사항)
                constructor(name, age) {
                    //속성
                    this.name = name;
                    this.age = age;
                }
                //메소드- 함수라고 하지 않음.. 유의하기
                mew() {
                    console.log(this.name, '야옹');
                }
                eat() {
                    console.log(
                        `${this.age}살 ${this.name}가 먹이를 먹습니다.`
                    );
                }
            }
            let cat1 = new Cat('나비', 1);
            let cat2 = new Cat('냥이', 2);
            cat1.mew(); //나비 야옹
            cat2.eat(); //2살 냥이가 먹이를 먹습니다.
            console.log(cat1); // {"name": "나비","age": 1}
</script>

---

클래스 안에는 속성constructor와 함수method가 포함된다.
둘다 필수는 아닌 선택사항이다.

클래스 상속 extends

예시. Apart 클래스 안에서 House 클래스 안에 있는 함수method나 속성constructor를 사용하고 싶을 때 확장자 사용

<script>
  //상속
            class House {
                door() {
                    console.log('문 있음.');
                }
                window() {
                    console.log('창문있음.');
                }
            }

            const house1 = new House();
            house1.door(); //문 있음.
  //Apart에 House의 class 값들을 모두 사용할 수 있도록 클래스 상속
            class Apart extends House {
                elevator() {
                    console.log('엘베가 있음');
                }
            }

            const apart = new Apart();
            apart.door(); //문있음
</script>

---

실습. 넓이 구하기

<script>
   class Shape {
                constructor(width, height) {
                    this.width = width;
                    this.height = height;
                }
                getArea() {
                    return this.width * this.height;
                }
            }
            let rec1 = new Shape(3, 4);
            console.log(rec1.getArea()); //12
</script>

사각형의 넓이 구하는 Shape 클래스의 getArea() method!

---