[JavaScript] 객체의 활용 ( feat. 리터럴, 스프레드 연산자 )

배경

우리가 Java에서 DTO, Entity 등을 사용하는 것처럼 JavaScript에서도 객체를 굉장히 자주 사용한다. 또한, 데이터를 다루기 위해 객체를 다루는 것은 너무나도 필요하고 당연한 일이다.

이에 JavaScript에서 객체를 다루는데 사용할 수 있는 다양한 기능들을 알아보고자 한다.

 

Template Literals 활용

내장된 다양한 기능들을 의미한다. 객체를 다룰 때 여러 기능들을 함께 활용하는데 유용한 것들을 알아보고자 한다.

 

객체 생성시 매개변수 매핑 생략

// 기존의 일반적인 방식
function createPerson( name, age ){
	const person = {
    	name: name,
        age: age
    };
    return person;
}

// 객체 리터럴 문법 확장에 따른 생략 가능. 단, 매개변수명과 속성명이 동일해야 한다.
function createPerson( name, age ) {
	const person = ( name, age );
    return person;
}

한 눈에 봐도 간결해진 것을 알 수 있다.

기존에는 특정 속성명에 입력한 매개변수를 매핑해주는 작업이 필요했다.

우리가 생성자에서 값을 입력 받아 set 해주는 것과 동일한 작업이다.

하지만 위와 같이 매개변수명과 객체의 속성명이 동일하다면 이 작업을 생각하고 위와 같이 만들어줄 수 있다.

 

객체 내부의 메서드 생성시 축약 가능

// 기존에는 아래와 같이 정의해주어야 했다.
const person = {
	name: "Lee",
    hello: function() {
    	console.log( "HI" );
    }
}

// 하지만 지금은 다음과 같이 속성명 뒤에 ()만 붙여도 메서드임을 명시할 수 있다.
const person = {
	name = "Lee",
    hello() {
    	console.log( "HI" );
    }
}

위처럼 메서드를 만들 때도 function이라고 언급을 꼭 해줘야 했지만 아래와 같이 지금은 속성명 뒤에 ()만 붙여도 메서드임을 인식하도록 할 수 있다.

 

객체 내부 속성명을 유동적으로 설정 가능

let isUniversity = true;

let schoolType = isUniversity ? "University" : "College";
var student = {
	name: "Lee",
    [schoolType]: "Programming"
}

// isUniversity == true
// [ name: "Lee", University: "Programming" ]
// isUniversity == false
// [ name: "Lee", College: "Programming" ]

이처럼 객체 속성명을 유동적으로 변하게 만들 수도 있다. 그렇기에 상황에 따른 객체 값 생성 또는 추가에 유용하게 사용할 수 있다.