[포스코x코딩온] JS 구조 분해 할당 & 클래스

이론으로 처음 들어본 듯한 표현식의 이름이라 생소했다.

swap 부분에서는 다른 언어로 코드를 짜는 것보다 훨씬 코드가 짧고 간결해서 보기 좋았다. 

그리고 자바에서 하던 get set..을 여기서 또 만났다. 언어를 많이 접한다는 건 좋은 거니까..ㅎㅎ

자바스크립트 es5까지만 해도 자바스크립트에는 클래스가 없었다고 한다. ES6 버전이 되면서 클래스와 비슷한 구조 문법을 추가하였다고 하니, 사용하는 것이 개발자의 숙명이지 않을까 라는 생각이 든다. 

구조 분해 할당

구조 분해 할당은 배열이나 객체의 속성을 해체해 그 값을 개별변수에 담는다.

구조 분해 할당에는 배열 구조 분해와 객체 구조 분해가 있으며, 할당이라는 말이 익숙하듯 "변수의 값을 할당한다"랑 비슷하다. 

 

배열 구조 분해

const[변수] = 배열;

1. 각 변수에 배열의 인덱스 순으로 값을 대응함으로써 직관적인 사용이 가능하다.
2. 구조 분해 없이도 두 변수의 값 교환도 가능하다.
3. 변수를 선언할 때는 변수의 순서와 선언을 일치시켜줘야 한다. 
4. 필요하지 않은 값은 [a, ,b] (= , , 비어있는 곳) 반환 값을 무시할 수 있다. 
5. 앞에 변수에서 선언한 부분을 제외하고 나머지 부분을 모두 한 변수에 할당할 수 있다. 

 

기존 변수 할당

const lists = ['apple', 'grape'];
console.log(lists[0]);

// apple

 

선언에서 분리된 변수 할당

const lists = ['apple', 'grape'];

//배열 안에서 새로운 변수 할당도 가능
[item1, item2, item3 = 'peach'] = lists; 

//1. 배열 구조 분해
console.log(item1); //apple 
console.log(item2); //grape
console.log(item3); //peach

//2. 변수 교체
let x = 1,y = 2;
console.log(x, y); //(1, 2)
[x, y] = [y, x];
console.log(x, y); //(2, 1)

//3. 변수의 선언과 순서는 일치
const { a, b } = { a: 10, b: 10 };
const {a, c} = {a: 10, b:10};
console.log("a", a); //10
console.log("c", c); //undefined

//4. 일부 반환 값 무시하기
function f() {
  return [1, 2, 3];
}

const [num1, , num2] = f();
console.log(num1); // 1
console.log(num2); // 3

//5. 배열의 나머지 할당
const [fruit1, ...fruit2] = ['apple','banana', 'peach'];
console.log(fruit1); // apple
console.log(fruit2); // [ 'banana', 'peach' ]

 

객체 구조 분해 

const {변수} = 객체;

• 변수의 선언과 분리하여 변수에 값을 할당할 수 있다.
• 객체 안의 속성을 변수명으로 사용한다. 
• 중복될 때는 : 를 이용해 새 변수를 선언하고 원래의 값을 새 값으로 할당할 수 있다

기본 할당

const obj = {
  key1: 'one',
  key2: 'two',
};

console.log(obj.key1);  //one

선언

const { key1: newkey, key2, key3 = 'three' } = obj;
console.log("key1: ", key1);    //one
console.log("key2 : ", key2);   //two

//중복될 때 새로운 변수 이름 선언
console.log("newkey:", newkey);     //one

 

spreed 연산자

•  ... 을 사용해 배열의 값을 쉽게 빼온다. 

const arr = [1, 2, 3, 4, 5];
console.log(...arr); //1 2 3 4 5

 

rest ...

• 남은 인수들을 묶어서 배열로 반환해 준다. 
• 변수명을 rest라고 사용하지 않아도 되지만, 개발자들 사이에서 암묵적인 룰이라고 한다. 

 

const data = { c: 30, d: 40, e: 50, f: 60 };
const { c, d, ...rest } = data;

console.log("c: ", c) //30
console.log("d: ", d)//40
console.log("rest : ", rest) //rest :  { e: 50, f: 60 }

 

클래스 

객체를 생성하기 위한 템플릿이다.

클래스는 데이터와 이를 조작하는 코드를 하나로 추상화 한다.

이게 뭔 말인지는 나도 코드를 보고 이해했다. 조금 더 자바의 객체 지향적 성향을 표현한 듯한 문법이다. 

 

클래스 선언

constructor은 인스턴스의 생성과 클래스 필드를 초기화 하며 클래스 안에 한 개만 존재할 수 있다. 

클래스 필드의 선언과 초기화를 constructor 내부에서 실행하는데 선언한 클래스 필드는 클래스가 생성할 인스턴스에 바인딩 된다. 이 인스턴스를 통해 외부로 참조되는 것이다...!

(자바와 다른 점은 인스턴스 변수를 지정하지 않고 this. 문법으로도 자동 생성될 수 있다는 점이다.)

//클래스 등장 = 일종의 작업지시서
class TV {
  name = '';
  price = 0;
  size = '';
  company = '';

  constructor(name, price, size, company) {
    // this : 여기 클래스 안에 있는 속성
    // this.name : 이 클래스 안에 있는 name!
    this.name = name;
    this.price = price;
    this.size = size;
    this.company = company;
  }

  getPrice() {
    return this.price + '만원';
  }

  setPrice(price) {
    this.price = price;
  }
}

const newTv1 = new TV('aaa tv', 2000, '56inch');
console.log(newTv1.getPrice()); //2000만원
newTv1.setPrice(4000);
console.log(newTv1.getPrice()); //4000만원

 

클래스 상속

상속을 통해 클래스의 기능을 재사용할 수 있다. 

extends 를 통해 자식이 부모를 상속했다고 생각하면 된다. 부모 - 자식 의 관계라고도 부른다. 

//하위클래스
class Product {
  name = '';
  price = 0;

  constructor(name, price) {
    this.name = name;
    this.price = price;
  }

  getPrice() {
    return this.price + '만원';
  }
}

// 상속
class Laptop extends Product {
  weight = '';
  constructor(name, price, weight) {
    super(name, price);
    this.weight = weight;
  }
}

let laptop = new Laptop('삼성tv', 5000, '55');
console.log(laptop.price); //5000
console.log(laptop.getPrice())  //5000만원

//부모 클래스는 자식 클래스의 값을 사용하지 못합니다. 
let parent = new Product('tv', 1000);
console.log(parent.weight)  //undefined

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

구조 분해 할당 - JavaScript | MDN

 

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-ES6-Class-%EB%AC%B8%EB%B2%95-%EC%99%84%EB%B2%BD-%EC%A0%95%EB%A6%AC

📚 자바스크립트 클래스 문법 - 완벽 가이드