목차
구조 분해 할당
구조 분해 할당은 객체나 배열의 구조를 분해해서 변수에 할당하는 구문이다.
객체 구조 분해 할당
객체에서 값을 가져오려면 변수를 선언하고 해당 변수에 값을 할당해야 한다. 객체를 구조 분해 할당하려면 중괄호({})를 사용한다. 이 구문을 사용하면 한 줄에 여러 변수를 선언하고 할당할 수 있다. 이때 변수 이름은 키 이름과 동일해야 한다.
const jeemin = {
name: '박지민',
age: 27,
}
// const name = jeemin.name
// const age = jeemin.age
const { name, age } = jeemin
console.log(name) // '박지민'
console.log(age) // 27
구조 분해된 속성을 할당할 변수 이름을 정해진 속성 이름이 아닌, 다른 이름으로 하면 undefined가 반환되기 때문에 콜론(:)을 사용하여 임의로 설정할 수 있다.
const { nickname } = jeemin
console.log(nickname) // undefined
const { name: nickname } = jeemin
console.log(nickname) // '박지민'
배열 구조 분해 할당
배열은 객체와는 다르게 대괄호([])를 사용해 구조 분해 할당한다. 배열 같은 요소인 NodeList도 배열처럼 구조 분해 할당할 수 있다.
const names = ['박현아', '최하송', '김주성']
// const park = names[0]
// const choi = names[1]
// const kim = names[2]
const [park, choi, kim] = names
console.log(park) // '박현아'
console.log(choi) // '최하송'
console.log(kim) // '김주성'
함수 인수 구조 분해 할당
함수의 인수가 배열이나 객체 타입인 경우에도 인수를 구조 분해 할당할 수 있다.
함수의 인수 타입이 객체라면 아래와 같이 구조 분해 할당한다.
// function getSectionTemplate(section) {
// const { headline, description } = section
// 함수의 객체 타입 인수 구조 분해 할당
function getSectionTemplate({ headline, description }) {
return `
<section>
<h2>${headline}</h2>
<p>${description}</p>
</section>
`
}
const section = getSectionTemplate({
headline: '효율적인 학습 방법',
description: `목표를 명확히 설정하고, 반복 학습과 충분한 휴식을 통해 학습 효율을 극대화하세요.
짧고 집중된 학습 세션과 자기 점검을 통해 기억력을 높일 수 있습니다.`,
})
console.log(section)
/*
<section>
<h2>효율적인 학습 방법</h2>
<p>
목표를 명확히 설정하고, 반복 학습과 충분한 휴식을 통해 학습 효율을 극대화하세요.
짧고 집중된 학습 세션과 자기 점검을 통해 기억력을 높일 수 있습니다.
</p>
</section>
*/
함수의 인수 타입이 배열일 때는 아래와 같이 구조 분해 할당한다.
// function rgbToHex(rgb) {
// const [red, green, blue] = rgb
// 함수의 배열 타입 인수 구조 분해 할당
function rgbToHex([red, green, blue]) {
return `#${red.toString(16)}${green.toString(16)${blue.toString(16)}}`
}
const color = rgbToHex([20, 180, 255])
console.log(color) // '#14b4ff'
구조 분해될 변수가 없을 때는 할당(=) 연산자를 사용해 기본 값을 설정할 수 있다.
// 배열 구조 분해 할당 기본 값 설정
const emojiList = ['😎']
const [smileEmoji, sadEmoji = '🥲'] = emojiList
console.log(sadEmoji) // '🥲'
// 객체 구조 분해 할당 기본 값 설정
const course = { name: 'JavaScript 펀더멘탈' }
const { description = '기본 개념과 문법을 실습 중심으로 배우는 과정입니다.' } = course
console.log(description) // '기본 개념과 문법을 실습 중심으로 배우는 과정입니다.'
기본 매개변수
함수를 만들 때 각 매개변수에 기본값을 지정할 수 있다. 기본 매개변수(Default Parameter)를 사용하면 사용자가 인수를 옵션으로 설정할 수 있어 유용하다.
function calculateTaxes(income, taxRate = 0.033) {
return income * taxRate
}
함수에 여러 매개변수가 필요한 경우, 사용자가 전달할 인수의 순서를 기억하기 어렵기 때문에 함수에 여러 매개변수 설정이 필요한 경우, 객체를 전달하는 것이 좋다. 이렇게 하면 사용자는 인수의 순서를 기억할 필요가 없기 때문이다.
function createUser(userInfo) {
const { name, age, job, location = '서울', email, password } = userInfo
// ...
console.log(userInfo.email) // 객체를 그대로 사용
}
createUser({
name: '이현준',
age: 21,
job: '대학생', location: '서울',
email: 'leehj@edu.io',
password: '*********'
})
또 다른 방법은 매개변수를 직접 구조 분해 할당하는 것이다. 이를 위해서는 매개변수가 옵션이어야 한다. (기본값: 빈 객체)
function createUser({
name,
age,
job,
location = '서울',
email,
password
} = {}) {
// ...
console.log(email) // 구조 분해된 변수만 함수 내부에서 사용 가능
}
향상된 객체 리터럴
JavaScript는 객체에 대한 세 가지 향상된 기능을 제공한다. 향상된 기능을 통칭해 향상된 객체 리터럴(Enhanced Object literals)이라고 부른다.
- 속성 할당 단축: 변수 이름과 속성 이름이 같을 경우, 속성: 변수 생략 가능
- 메서드 단축: 객체 내 메서드를 선언할 때 function 키워드 생략 가능
- 계산된 속성 이름: 대괄호 [] 안에 표현식을 넣어 동적으로 속성 이름을 생성할 수 있음
1. 속성 할당 단축 예
const name = '지훈'
const email = 'yamoo9@naver.com'
// const jee = {
// name: name,
// email: email,
// }
// 단축 구문
const jee = {
name,
email,
}
2. 메서드 단축 예
const jee = {
name: '지훈',
email: 'yamoo9@naver.com',
// sayMyName: function() {
sayMyName() {
alert(`제 이름은 "${this.name}"입니다.`)
},
}
3. 계산된 속성 이름 예
const property = 'name'
const jee = {
[property]: '지훈',
[`nick${property}`]: 'yamoo9',
}
console.log(jee.name) // '지훈'
console.log(jee.nickname) // 'yamoo9'
나머지 매개변수와 전개 구문
나머지 매개변수와 전개 구문은 간결한 코드 작성에 도움이 된다. 용도는 다르지만, 둘 다 전개(...) 연산자를 사용한다.
배열 전개
배열에서 전개(...) 연산자를 사용하면 배열을 쉼표로 구분된 목록으로 펼쳐준다.
const breads = ['크림빵', '소보로빵', '소금빵']
console.log(...breads) // '크림빵 소보로빵 소금빵'
function logBreads(bread1, bread2, bread3) {
console.log(bread1) // '크림빵'
console.log(bread2) // '소보로빵'
console.log(bread3) // '소금빵'
}
// 함수를 호출할 때 배열 전개
logBreads(...breads)
다른 배열에 배열을 전개해 항목으로 설정할 수도 있다.
const baguettes = ['치아바타', ...breads, '크루아상']
console.log(baguettes) // ['치아바타', '크림빵', '소보로빵', '소금빵', '크루아상']
따라서, 배열 전개는 concat() 메서드를 대체할 수 있다. 즉, 여러 배열을 결합하거나 하나의 배열을 다른 배열 중간에 전개할 수도 있다.
const array = [2, 3]
// concat() 메서드 활용
const combinedArray = array.concat(4, 5)
// 전개 연산자 활용
const combinedArray = [...array, 4, 5]
전개 연산자는 유사 배열 객체에도 사용할 수 있다. HTMLCollection이나 NodeList와 같은 유사 배열 객체를 배열로 변환할 때도 사용한다.
const items = document.querySelectorAll('.item')
// Array.from() 메서드 활용
const itemArray = Array.from(items)
// 전개 연산자 활용
const elementArray = [...items]
배열 나머지
나머지 연산자는 전개 연산자와 반대로 쉼표로 구분된 매개변수를 배열로 변환한다. 나머지 연산자를 사용해 전달된 모든 인자를 배열로 변환해 함수 내부에서 사용할 수 있다.
logNames('진형', '민희', '수영', '진구', '초영', '영주', '주효')
function logNames(...names) {
names.forEach((name) => {
console.log(name)
})
}
배열을 구조 분해 할당할 때도 나머지 연산자를 사용할 수 있다.
const scores = [100, 92, 76]
const [firstScore, ...restScores] = scores
console.log(firstScore) // 100
console.log(restScores) // [92, 76]
객체 전개
전개 연산자를 사용해 객체도 다른 객체에 전개하거나 객체를 합성할 수 있다.
const fruitBlender = {
blendKiwi: true,
blendMango: true,
}
const megaBlender = {
blendGuava: true,
...fruitBlender,
}
console.log(megaBlender)
// {
// blendGuava: true,
// blendKiwi: true,
// blendMango: true,
// }
객체 나머지
객체를 구조 분해 할당할 때도 나머지 연산자를 사용할 수 있다.
const fruitBlender = {
blendKiwi: true,
blendMango: true,
blendOrange: true,
blendPapaya: true,
}
const { blendKiwi, ...otherProps } = fruitBlender
console.log(otherProps)
// {
// blendMango: true,
// blendOrange: true,
// blendPapaya: true
// }
오늘 하루를 돌아보며
오늘은 어제보다도 이해가 더 잘 됐다. 복잡해 보이긴 하지만 이후에 유용하게 사용된다고 하니까 더 집중해서 들었다. 배열이나 객체 타입을 많이 사용하게 될 것 같은데 유용한 기능을 배워서 코드를 더 간결하고 쉽게 작성할 수 있게 되지 않을까 기대한다.
다음 과제를 할 때는 지금까지 배운 것들을 최대한 활용해서 해봐야겠다. 우선 이전에 하던 대로 했다가 더 간결하게 만들 수 있는 방법은 없을지 하나씩 고민하면서 수정해 나가면 된다. 처음부터 간결하게 작성하려고 하면 헷갈린다. 처음에는 다 풀어서 쓰더라도 나중에 얼마든지 줄일 수 있으니 부담 갖지 말고 천천히 차근차근 해나가자!
