KDT 포스코X코딩온 웹 과정 14기 17일 - 구조분해할당, 클래스, 연산자

[ 목차 ]

 

구조분해 할당(Destructuring assignment)

배열이나 객체의 속성을 해체해 그 값을 개별 변수에 담는 것.
JavaScript에서 많이 쓰이는 자료구조인 배열과 객체를 편하게 사용하기 위함
객체나 배열에 저장된 데이터의 일부를 가져오고 싶을 때 주로 사용
배열과 객체에서 사용된다.

배열의 구조 분해 할당

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); //apple
console.log("item2 :", item2); //grape
console.log("item3 :", item3); //peach

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

객체의 구조 분해 할당

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

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

객체 안의 속성을 변수명으로 사용

• 콜론(:) 이용해 새 변수명을 선언하고, 원래의 값을 새 변수명에 할당 가능

spread 연산자

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

const c = [..."Hello"]
console.log(c); // 각 알파벳 하나하나를 값으로 가지는 배열이 출력됨.

반복 가능한객체에 사용하는 문법→배열, 유사 배열, 문자열 등에 사용 가능

• 객체의 요소에 접근해서 요소들을 하나씩 분리해서 전개요소에 접근해서 반환

• 연산자 ... 사용

• 예를 들어, [1, 2, 3, 4, 5] 라는 배열의 요소를 전개하기 위해서는 ...[1, 2, 3, 4, 5] 처럼 사용

• spread 파라미터는 호출시 함수의 파라미터에 사용

rest 파라미터

const values = [10, 20, 30];
function get(a, ...rest) {
    console.log(rest); // [20,30]
}
get(...value); //spread로 분해 하지 않으면 a 변수에 배열이 들어감.

• rest 파라미터는 호출 받는 함수의 파라미터에 사용 (선언 부분).

• 호출하는 함수의 파라미터 순서에 맞춰 값 설정 후 남은 파라미터 값을 배열로 설정

클래스

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

클래스의 상속

extends 라는 키워드 사용해서 ‘상속’을 받을 수 있다.
상속을 이용하면, 기존에 있던 클래스의 속성과 메소드를 받아와서 사용하되, 추가적인 속성과 메소드를 더 정의할 수 있습니다