Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- 프록시
- 웹 호스팅
- 최단 경로
- 뮤텍스
- 싸피 합격
- Proxy
- 동기화
- 싸피
- Synchronization
- Proxy Server
- 호스팅이란?
- 플로이드 워셜
- 서버 호스팅
- floyd-warshall
- 세마포어
- 클라우드 서버
- SSAFY
- 호스팅
- 프록시서버
- 세마포어란?
- 뮤텍스란?
- 다익스트라
- Dijkstra Algorithm
- 다익스트라 알고리즘
- 플로이드 와샬
- 세마포어와 뮤텍스의 차이
- 싸피 면접 후기
- 세마포어와 뮤텍스
- 삼성 청년 SW 아카데미
Archives
- Today
- Total
어제의 나보다 성장한 오늘의 나
[자바스크립트] Destructuring assignment ( 해체할당 ) 본문
배열 해체 할당
Destructuring assignment이란 무엇일까? 백번의 설명보다 코드를 보면서 알아보자!
var colors = ['red', 'white', 'orange']
var first = colors[0]
var second = colors[1]
var third = colors[2]
console.log(first, second, third) // red, white, orange
위와 같이 사용하면 많이 번거롭다. 따라서 해체 할당의 말처럼 해체해서 할당할 수 있게 해 준다.
const colors = ['red', 'white', 'orange']
const [first, second, third] = colors
console.log(first, second, third) // red, white, orange
이게 바로 해체 할당이다. 만약 첫 번째랑 두 번째 인자는 받기 싫다면?
const colors = ['red', 'white', 'orange']
const [ , , third, fourth] = colors
console.log(third) // orange
console.log(fourth) // undefined
이제 다양한 활용을 해보자!
1. rest parameter
const arr = [1, 2, 3, 4, 5]
const [ a, ...b ] = arr
const [ , , ...c ] = arr
console.log(a, b, c)
2. default parameter
const [a = 10, b = 20] = [undefined, 5]
const [c, d = c * 2] = [5]
const [f, e=f] = [undefined, 10]
console.log(a,b); // 10, 5
console.log(c,d) // 5, 10
console.log(f,e) // undefined, 10
3. 다차원 배열
const arr = [1, [2, [3, 4], 5], 6]
const [a, [b, [ , c], ], d] = arr
console.log(a, b, c, d) // 1 2 4 6
똑같이 매칭 해주면 잘 출력된다.
4. 값 교환하기
let a = 10;
let b = 20;
[a, b] = [b, a]
console.log(a, b)
객체 해체할당
1. 기본 : {추출할 프로퍼티명 : 할당하고자 하는 변수명}
const iu = {
name : '아이유',
age : 25,
gender : 'female'
}
const {
name: n,
age: a,
gender: g
} = iu
console.log(n, a, g) // 아이유, 25, female
위와 같이 iu에 객체를 담고 똑같이 매칭 시켜주면 n, a, g에 잘 담긴다.
2. 할당할 변수명은 생략 가능. (property shorthand)
const iu = {
name : '아이유',
age : 25,
gender : 'female'
}
const {
name,
age,
gender
} = iu
console.log(name, age, gender)
3. 중첩 객체의 경우 - 접근자와 추출을 구분하는 것이 중요
const loginInfo = {
device: {
create : '2020-04-27',
blog: '어제의 나보다 성장한 오늘의 나 ',
type: 'desktop'
},
user: {
create: '1994',
name: 'goo',
nickname: '91',
}
}
const {
device,
user: userInfo,
user: {
name,
nickname,
},
user :{
create: temp,
}
} = loginInfo
console.log(name) // goo
console.log(temp) // 1994
rest parameter로 device는 이름은 그대로 객체를 그대로 추출이 된다. 그런데 user가 몇 개 있는 게 눈에 뜨인다. key에 해당하는 user는 추출하는 프로퍼티명 이기 때문에 몇 번을 적어도 상관없다. 그 대신 뒤에 오는 userInfo 같은 자리는 변수명에 해당되기 때문에 중복을 하면 안 된다.
4. defalut parameter
const phone = {
name : 'iPhone',
color : undefined
}
const {
name: n,
version: v = '6+',
color: c = 'silver'
} = phone
console.log(n, v, c)
const {
name,
version = 'X',
color = 'black'
} = phone
console.log(name, version, color)
phone 객체에 version이 없다 따라서 위와 같이 설정해서 사용할 수 있다.
사용 예
위에서 얘기한 활용
const deliveryProduct = {
orderedDate: '2018-01-15',
estimatedDate: '2018-01-20',
status: '배송중',
items: [
{name: '사과', price: 1000, quantity: 3},
{name: '배', price: 1500, quantity: 2},
{name: '딸기', price: 2000, quantity: 4}
]
}
const {
estimatedDate: esti,
status,
items: [ , ...products]
} = deliveryProduct
console.log(esti, status, products)
정규식 표현
const getUrlParts = (url) => /^(https?):\/\/(\w{3,}\.[A-z.]{2,})(\/[a-z0-9]{1,}\/([a-z0-9\-.,]+))$/.exec(url)
const [ , protocol, host, , title] = getUrlParts('http://abc.com/es6/destructuring')
console.log(protocol, host, title)
const getArea = (info) => {
const {width, height} = info
return width * height
}
getArea({ width: 10, height: 50 })
위의 코드도 나쁘지 않다 하지만 더 간단하게 만들어 보자
const getArea = ({ width = 0, height= 10}) => {
return width * height
}
getArea({ width: 10 })
꼭 info라는 객체로 받을 필요 없이 바로 선언해버리는 방식이다. 그런데 만약에 객체가 안 오거나 제대로 된 값이 매칭 되어 안 넘어온다면? defalut parameter를 설정하면 된다.
출처
'공부 > JavaScript && jquery' 카테고리의 다른 글
[자바스크립트] Promise란? (0) | 2021.04.29 |
---|---|
[자바스크립트] 비동기 처리와 콜백 함수 (0) | 2021.04.29 |
[자바스크립트] function name property (0) | 2021.04.27 |
[자바스크립트] concised method 간결한 메서드 (0) | 2021.04.27 |
[자바스크립트] shorthand property, 프로퍼티의 key와 value에 할당할 변수명이 동일한 경우 (0) | 2021.04.27 |
Comments