[포스코X코딩온] JS 구조분해 할당

포스팅 주제

• 구조분해 할당 (Destructuring assingment)
• spread
• 클래스(Class)

---

 

이전 포스팅에서 구조분해를 조금 다루었는데, 이번에는 구조분해에 대해서 조금더 알아보고자 합니다.

 

구조분해 할당(Destructuring assignment)

구조분해 할당?

• 배열이나 객체의 속성을 해체해 그 값을 개별변수에 담는 것
• JS에서는 자료구조인 배열과 객체를 많이 쓰는데 이것들을 좀 더 편하게 사용하기 위해 사용한다.
• 배열 구조 분해
• 객체 구조 분해

 

<배열의 구조 분해 할당>

index[0], index[1]과 같이 인덱스에 접근하는 것이 아닌 각 배열의 요소를 변수의 이름으로

접근하기 위해서 사용합니다.

 

사용법

• const [변수] = 배열;
• 각 변수에 배열의 인덱스 순으로 값 대응
• 구조 분해 시 변수의 값이 undefined 일 때 기본값을 할당할 수 있다.
• 구조 분해 없이 두 변수의 값을 교환 가능하다.

 

// 구조분해 할당

//  1. 배열 구조분해할당
//  순서가 중요함

const arr1 = [1,2,3,4,5];
const arr2 = ['a','b','c'];

const [one, two, three, four, five] = arr1;
console.log(one, two, three, four, five);

const [x,y,z,alpha] = arr2;
console.log(x,y,z,alpha); //alpha는 값이 없다. undefined

const list = ['apple', 'orange'];
const [f1,f2,f3 = 'bannana'] = list
console.log(f1,f2,f3); //값이 없는 f3에 기본값이 부여 bannana

let num1 =1, num2 = 3;
console.log('swap 전 >' ,num1,num2);
[num1, num2] = [num2, num1]; // [num1, num2] = [3, 1]
console.log('swap 후 >' ,num1,num2);

 

출력 결과

 

 

<객체 구조 분해 할당>

사용법

• const {변수} = 객체;
• 객체 안의 속성을 변수명으로 사용
• 콜론(:)을 이용해 새 변수명을 선언하고 원래의 값을 새 변수명에 할당 가능하다.

//  2. 객체 구조분해 할당
// - 키값과 변수명이 일치
const obj = {
    title : '독전2',
    star : 1,
    content: '흠,,,'
}

// 구조 분해를 안했다면
console.log(obj.title, obj.star, obj.content);

// 키가 존재하지 않는 경우 대비하여 default값 할당(price = 1000)
//객체 구조분해는 순서가 중요하지 않다.
const{content, star, title, price = 1000} = obj;
console.log(content,star, title, price);

// 객체 구조분해는 키 값이 중요하다
const {c, s, t} = obj;
console.log(c,s,t); //undefined

//콜론 (:)을 이용해서 새 변수명으로 바꿔서 저장 가능
const {content: c1, star:s1, title: t1} = obj;
console.log(c1,s1,t1);

출력 결과

 

 

spread 연산자

전개구문 (spread)

• 반복 가능한 객체에 사용하는 문법으로 배열, 유사배열, 문자열 등에 사용가능
• 객체 요소에 접근해서 요소들을 하나씩 분리해서 전개요소에 접근하여 반환한다.
• 연잔자 ...사용

 

두 배열을 합치려면 let arr = [...arr1, ...arr2] 형식으로 합칠 수 있다.

 

// spread 연산자
// 반복 가능한 객체에 대해서 단일 요소로 압축을 해제하는 역할
// => 객체들의 값을 펼쳐준다

// 배열에서 spread
const a = [1,2,3];
const b = [4,5];
const spread = [...a, ...b]; //[ 1, 2, 3, 4, 5 ]
console.log(spread);

//문자열에서 spread
// 세 결과 모두 같은 값이 나온다.
const str = 'Hello';
console.log([...str]); //[ 'H', 'e', 'l', 'l', 'o' ]
console.log([...'Hello']);
console.log(str.split(''));

// obj 객체에서 spread
const chip ={
    base : 'chip',
    company : 'lotte',
}

const potatoChip = {
    ...chip,
    flavor: 'onion'
}

const sweetPotatoChip = {
    ...potatoChip,
    flavor: 'sweet onion'
}

console.log('chip :',chip);
console.log('potatoChip :',potatoChip);
console.log('sweetPotatoChip :',sweetPotatoChip);

// 실습
const word1 = 'abc';
const word2 = 'xyz';

console.log([...word1, ...word2]);

출력 결과

 

Rest

rest는 말 그대로 남은 값들을 한번에 배열로 설정하는 방식이다.

spread 파라미터는 호출시 함수의 파라미터에 사용하고 rest 파라미터는 호출 받는 함수의 파라미터에 사용한다.

rest는 ...을 사용하여 표시한다.

 

// rest 파라미터

// 1. 함수에서 rest 파라미터 사용
const values = [1,2,3,4,5];

// 함수 선언 (rest 사용)
function get(a,b, ...rest){
    console.log('a > ',a); //1
    console.log('b > ',b); //2
    console.log('rest > ',rest); //3,4,5
}

// 함수 호출 (spread 사용)
get(...values);
get(values);
/*
    a >  [ 1, 2, 3, 4, 5 ]
    b >  undefined
    rest >  []
*/

// 2. 객체에서 rest
const icecream = {
    flavor : 'choco',
    price : 1000,
    company : 'bingre'
}

const {flavor, ...rest} = icecream;
console.log(flavor); //choco
console.log(rest); //{ price: 1000, company: 'bingre' }

// 3. 배열에서 rest
const number = [1,2,3,4,5,6];
const [one, two, ...rest1] = number;
console.log(one);
console.log(two);
console.log(rest1);

출력 결과

 

 

클래스 Class

• ES6 부터 등장한 오브젝트(객체)를 만드는 방법
• 오브젝트(객체)를 만들 수 있는 틀(Template)
• 정해진 틀로 같은 규격의 오브젝트를 여러개 만들 수 있다( 재사용에 대한 효율성을 높일 수 있다.)
• new 키워드를 이용해서 미리 만들어둔 클래스 형태의 오브젝트를 만들 수 있다. (instance 화)
• 클래스 생성시 클래스 이름은 PascalCase를 사용( 첫 시작부터 대문자 )

 

포스코x코딩온 교육자료

 

 

클래스는 상속이 가능하다는 사실!

기존 클래스를 다른 클래스에서 사용하는 방법이 존재한다.

바로 extends라는 키워드를 사용해서 상속 받을 수 있다.

 

// 클래스
// : 객체를 생성하는 템플릿 => 객체를 만들기 위해 사용

// 집 이라는 클래스
/*
    속성 :
    만들어진 연도, 집의 이름, 창문 갯수
    메소드:
    창문 갯수 출력하는 메소드, 집의 이름 출력하는 메소드 등
*/

// 클래스 정의
class House {
    // 생성자 함수를 사용
    // : 클래스를 이용해 객체를 생성할 때만다 속성을 초기화
    constructor(year, name, window){
        this.year = year;
        this.name = name;
        this.window = window;
    }

    //메소드 1 : 집의 나이를 출력
    getAge(){
        console.log(`${this.name}는 건축한지 ${2023 - this.year}년 됐다!`);
    }

    //  메소드 2 : 창문 갯수 출력
    getWindow(){
        console.log(`${this.name}의 창문 갯수는 ${2023 - this.window}개다!`);
    }
}

// 클래스(틀)을 이용해서 객체를 만들기
const house1 = new House(2010, '아파트', '10');
console.log('house1 > ', house1);
console.log(house1.name);
house1.getAge();

const house2 = new House(2012, '빌라', 20);
house2.getAge();

// 실습
class Shape {
    constructor(width, heigth){
        this.width = width;
        this.heigth = heigth;
    }

    getArea(){
        return this.width * this.heigth;
    }
}
let rec1 = new Shape(3,4)
console.log(rec1.getArea());

출력 결과

 

// 3. 클래스 상속
// 부모 클래스 : House
// 자식 클래스 : Apartment
class Apartment extends House{
    constructor(year, name, window, floor){
        // 부모 객체에서 상속받음 => 상속받은 부모 클래스의 생성자를 호출
        super(year, name, window);// 부모로 부터 받은애는 super()를 사용해서 표시
        this.floor = floor;
    }
    getFloor() {
        return `${this.year}년에 지어진 ${this.name}아파트의 총 층수는 ${this.floor}`;
    }

    // 오버라이딩
    // 부모 클래스에 정의되어 있는 메소드를 이름은 동일하게 쓰되, 내용은 다르게
    getAge(){
        console.log(`${2023 - this.year}년된 아파트는 총 ${this.floor}층이다~!`)
    }
}

const apt1 = new Apartment(2022, '레미안', 100, 30);
console.log(apt1);
apt1.getAge();
console.log(apt1.getFloor());
// apt1.getFloor();

 

출력 결과

 

 

---

이번 node.js와 기존 사용법에 대해 공부하고 있는데 기존 사용방식과 현재 node.js에 사용하는 방식이

혼동이 오는 경우가 종종 와서 헷갈리기는 하는데, 구조분해와 같은 편리한 면이 있는 것 같아서 적응 하려고 노력 중입니다.😓

 

지금 밀려 있는 포스팅이 몇개 있어서 진행한 프로젝트에 대한 회고록을 써야하는데 그건 언제 완성될지😭