ES6+ 향상된 Object, Array (1)

ES6+ 향상된 Object, Array (1)

1. 객체와 배열의 생성과 수정을 간편하게.

#1 Shorthand property names (단축 속성명)

Literal Code를 간편하게 작성

const name = 'peter';

const obj = {

gender: 'male',

name, // 이미 정의 된 변수면 변수명 입력 {name: 'peter'}

getName() { return this.name},

// 함수형은 function 키워드 생략 { getName : function(){....}}

}

비교를 통해 어떻게 개선 되었는지 알아보자.

// 기존 함수 정의

function createUser(name, gender) {

return { name: name, gender: gender};

}

// 개선된 방법

function createUser(name, gender) {

return { name, gender};

}

이렇게 단축 속성명을 사용하면 코드 작성도 간편하고 가독성도 좋아진다.

아래와 같이 디버깅 시 많이 개선된 점을 확인할 수 있다.

const name = 'peter';

const gender = 'male';

// 기존방식

console.log('name =' + name, ', gender =' + gender);

// ES6+

console.log({ name, gender }); // { name: 'peter', gender: 'male' }

#2 Computed property names (계산된 속성명)

더 편리하게 동적으로 속성명을 결정할 수 있게 되었다.

계산된 속성명을 사용한 코드와 그렇지 않은 코드를 비교해보자.

function createObj1( key, val ) {

const obj = {};

obj[key] = val;

return obj;

}

function createObj2( key, val ) {

return { [key]: val };

}

계산된 속성명을 사용하면 createObj2 함수처럼 간결하게 작성할 수 있다.

이 기능을 컴포넌트의 상탯값을 변경할 때 사용하면 유용하다.

class CntComponent extends React.Component {

state = {

cnt1: 0,

cnt2: 0,

cnt3: 0,

};

// ...

onClick = idx => {

const key = `cnt${idx}`;

const val = this.state[key];

this.setState({ [key]: val + 1 }); // 1

}

}

1번에서 복잡해질수 있는 코드를 계산된 속성명을 사용하여 간결하게 작성하였다.