구조화
구조화란 인터페이스나 클래스를 사용해 관련된 정보를 묶어 새로운 타입으로 표현하는 것을 말한다.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
-- 구조화가 필요한 코드 예 | |
let personName = 'Jack' | |
let personAge = 32 | |
-- 구조화 한 코드 | |
export interface IPerson { | |
name: string | |
age: number | |
} | |
let jack: IPerson = {name: 'Jack', age: 32} |
비구조화
구조화된 데이터는 데이터의 일부만 사용해야 할 때가 있는데 아래와 같이 구조화된 데이터를 분해하는 것을 비구조화라고 한다.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//비구조화 | |
let name = jac.name, age = jack.age | |
//비구조화 할당 | |
let {name, age} = jack |
잔여 연산자/ 전개 연산자
ESNext 자바스크립트와 타입스크립트는 점을 연이어 3개 사용하는 ...연산자를 제공하는데 사용하는 위치에 따라 잔여 연산자 혹은 전개 연사자라고 부른다.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//잔여 연산자의 예 | |
let address: any { | |
country: 'Korea', | |
city: 'Seoul', | |
address1: 'Gangnam-gu', | |
address2: 'Sinsa-dong 123-456' | |
} | |
const { country, city, ...deatil } = address; | |
//전개 연산자의 예 | |
1. | |
let cord = {...{x:0}, ...{y:0}} | |
console.log(cord) //{x: 0, y: 0} | |
2. | |
let part1 = {name: 'jane'} | |
let part2 = {age: 22} | |
let part3 = {city: 'Seoul', country: 'KR'} | |
let merged = {...part1, ...part2, ...part3} | |
console.log(merged) | |
// {name: 'jane', age: 22, city: 'Seoul', country: 'KR'} |
'Web > javascript' 카테고리의 다른 글
chrome V8 엔진에 대해 (0) | 2024.03.14 |
---|---|
javascript Prototype (0) | 2024.02.20 |
mocking과 mock testing (0) | 2022.06.23 |
보자마자 유용하다고 느끼는 javascript 문법 (0) | 2022.06.14 |
array.map 안에서의 async/await 사용하기 (0) | 2022.05.01 |