[포스코x코딩온] KDT 웹 10기 5주차 | Javascript 고급, 구조 분해 할당

sgj1001·2023년 11월 29일

JavaScript REST Spread 객체 구조분해 할당 상속 클래스

HTML, CSS, JavaScript

목록 보기

9/10

구조분해 할당

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

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

배열의 구조분해 할당

arr[0], arr[1]처럼 접근하는 것이 아닌 각각의 배열 요소를 변수의 이름으로 접근하기 위해서 사용

const arr5 = ['tomato', 'kiwi', 'banana'];
const [tomato, kiwi, banana] = arr5;
console.log(tomato);

let tomato = arr5[0];
let kiwi = arr5[1];
let banana = arr5[2]

직접 할당하는 것보다 간단함
변수를 선언한 순서대로 배열의 요소가 값으로 할당됨

const[변수] = 배열

각 변수에 배열의 인덱스 순으로 값 대응
구조분해 시 변수의 값이 undefined일 때 기본값 할당 가능
구조분해 없이 두변수의 값 교환도 가능

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

console.log("item1 : ", item1);
console.log("item2 : ", item2);
console.log("item3 : ", item3);

객체의 구조분해 할당

객체의 속성값을 key로 접근하는 것이 아닌 변수로 접근하기 위해서 사용

const obj = {
  title: '제목'
  content: '내용'
  num: 0;
};
const{title, num, content} = obj
console.log(content); //내용

const title = obj.title;
const num = obj.num;
const content = obj.content;

배열의 구조분해 할당과 달리 변수 선언 순서에 따라서 값이 할당되는 것이 아닌 key의 이름에 따라서 변수에 값이 할당됨

const{변수} = 객체

객체 안의 속성을 변수명으로 사용
콜론(:) 이용해 새 변수명 선언하고, 원래의 값을 새 변수명에 할당 가능

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

let {key1: newKey1, key2, key3 = 'three'} = obj;
console.log("key1 : ", key1);
console.log("newKey1 : ", newKey1);
console.log("key2 : ", key2);
console.log("key3 : ", key3);

Spread 연산자

const a = [1, 2, 3];
const b = [4, 5];
const spread = [...a, ...b];
console.log(spread);

const c = [..."Hello"];
console.log(c);

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

[1, 2, 3, 4, 5]
...[1, 2, 3, 4, 5]

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

const arr3 = [...arr1, ...arr2];

Rest 파라미터

const values = [10, 20, 30];

function get(a, ...rest) {
  console.log(rest); //결과는 [20, 30]
}

get(...values);

Spread vs Rest

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

클래스

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

ex) 객체 : 고양이 그 자체
속성 : 이름 - 나비, 나이 - 1살
메소드 : mew() - 울다, eat() - 먹는다

ES6부터 등장한 오브젝트(객체)를 만드는 방법
오브젝트(객체)를 만들 수 있는 '틀'(template)
정해진 틀로 같은 규격의 오브젝트를 여러 개 만들 수 있음 (재사용할 때 유리함)
new 키워드를 이용해서 미리 만들어둔 클래스 형태의 오브젝트를 만들 수 있음 (instance화)
클래스 생성시 클래스의 이름은 PascalCase로 작성함

class Car {
  constructor(name, age){
    //속성
    this.name=name;
    this.age=age;
  }
  
  //메소드
  mew(){
    console.log("야옹");
  }
  eat() {
    console.log("먹이를 먹습니다.");
  }
 
}

let cat1 = new Cat('나비', 1);
let cat2 = new Cat('냥이', 2);

cat1.mew();
cat1.eat();

cat2.mew();