[ Javascript ] 객체 관련 ES6 문법

ES6에서는 상당히 많은 부분의 변화가 있었는데 그 중에서도 객체를 다루는 방법이 상당히 편리해졌다.

알아두면 자바스크립트 코드를 짜는데 매우매우매우매우 유용하다.

 

 

1. 속성명 축약

객체를 정의할 때 key에 할당하는 변수의 이름이 같으면 축약이 가능하다.

var student = ['Lee', 'Kim', 'Cho'];
var teacher = ['Yoo', 'Choi'];

// ES5
var school = {
	student: student,
	teacher: teacher,
}

// ES6+
const school = {
	student,
	teacher,
}

※ ES6에서는 호이스팅 개선을 위해 let, const 선언자가 추가되었다. 

 

 

 

2. 메서드명 축약

메서드 선언 시 function 키워드를 생략 가능하다.

// ES5
var obj = {
	greeting: function () {
    	console.log('Hi!')
    }
}

// ES6+
const obj = {
	greeting() {
    	console.log('Hi!')
    }
}

 

 

 

 

3. 계산된 속성명 사용

객체를 정의할 때 key의 이름을 표현식을 이용하여 동적으로 생성이 가능하다.

const key = 'country'
const value = ['한국', '미국', '일본', '중국']

const myObj = {
    [key]: value,
}

console.log(myObj)		// {"country": [ "한국", "미국", "일본", "중국" ] }
console.log(myObj.country) 	// ['한국', '미국', '일본', '중국']

 

백틱을 이용하여 변수명을 포함하는 key 값을 새롭게 생성할 수도 있다.

const newObj = {
	[`new${key}`]: value,
}

console.log(newObj);	// {"newcountry": [ "한국", "미국", "일본", "중국" ] }

 

😎 나는 객체의 키 값이 반복적으로 사용되는 경우에는 아래처럼 함수로 분리하여 사용하기도 했다.

// 반복적인 객체 이름을 사용하기 위한 함수 생성
const tableContent = (Nm: string) => {
  return {
    [`ko${Nm}`]: '',
    [`jp${Nm}`]: '',
    [`eu${Nm}`]: '',
    [`us${Nm}`]: ''
  }
}

 

 

 

4. 구조 분해 할당 ⭐⭐

배열 또는 객체를 분해하여 속성을 변수에 쉽게 할당할 수 있는 문법

 

구조 분해 할당은 크게 배열 / 객체 / 파라미터에 사용할 수 있다. 

 

배열

const scores = [100, 90, 80, 70, 60]
const [A, B, C] = scores

console.log(A)	// 100

 

 

객체

const userInfo = {
    name: 'zod',
    userId: 'zodev',
    phoneNumber: '010-1234-1234',
    email: 'zod@gmail.com',
}

// 기존
const name = userInfo.name
const userId = userInfo.userId
const phoneNumber = userInfo.phoneNumber
const email = userInfo.email

// 구조 분해 할당
const { name } = userInfo
const { userId } = userInfo

• 필요한 값만 골라서 할당

const { name, email } = userInfo

• 변수 이름 변경

const { name: userName } = userInfo

console.log(name)	// undefined
console.log(userName)	// zod

• 기본 값 할당

const { userId, password = '1234*' } = userInfo

console.log(password)	// 1234*

 

 

함수의 매개 변수

const firstName = 'zod'
const lastName = 'cho'

const getFullName = (params) => {
	const {	firstName, lastName } = params
    return `${firstName} ${lastName}`
}

// 구조 분해 할당
const getFullName = ({ firstName, lastName }) => {
	return `${firstName} ${lastName}`
}

getFullName({ firstName, lastName })	// zod cho

 

 

 

5. 객체 전개 구문

전개구문을 사용해 객체 내부에서 객체 전개가 가능하다.

얕은 복사에 활용 가능

const obj = { b: 2, c: 3, d: 4 }
const newObj = { a: 1, ...obj, e: 5 }

console.log(newObj)	// {a: 1, b: 2, c: 3, d: 4, e: 5}

 

구조 분해 할당 시에 할당되지 않은 나머지 값을 하나의 변수에 저장할 때도 사용된다. 

const scores = [100, 90, 80, 70, 60]
const [A, B, C, ...failed] = scores

console.log(failed)	// [70, 60]