안녕하세요!
ES6이후에 추가된 기능들 중
단축속성명 계산된속성명, 비구조화할당에 대해 정리해서 적극적으로 활용 할 수 있도록 정리해보겠습니다.
단축속성명 (shorthand property names)
계산된속성명 (computed property names)
비구조화할당 (destructuring)
▼단축 속성명을 이용한 객체 생성
const name = 'mike';
const obj = {
age : 21,
name, // 단축속성명
getName() {return this.name}
}
객체의 속성값 일부가 이미 변수로 존재하면 간단하게 변수이름만 적어주면 됩니다.
▼콘솔 로그 출력시 단축속성명 활용
const name = 'mike';
const age = 21;
console.log({name,age})
// result
{name : 'mike', age:21}
간결하게 로그 코드를 작성할 수 있습니다.
▼계산된 속성명을 사용하지 하는 경우와 그렇지 않은 경우
// 계산된 속성명 미사용, 기존코드
function makeObject1(key,value) {
const obj = {};
obj[key] = value;
return obj
}
// 계산된 속성명 사용
function makeObject2(key,value) {
return {[key]:value} // 계산된 속성명 [key]
}
[key]값이 key의 이름으로 동적으로 할당된다.
▼배열비구조화는 순서를 기준으로 할당된다
const arr = [1,2];
const [a,b] = arr;
console.log(a) // 1
console.log(b) // 2
객체 비구조화와 다르게 배열 비구조화는 index값이 기준이 된다.
▼배열 비구조화의 기본값
const arr = [1]; // arr[0]=1
const [a=10, b=20] = arr;
console.log(a) // 1
console.log(b) // 20
두 번째 줄을보면 a=10, b=20으로 기본값이 할당되어 있다. 여기에 첫 번재 요소에 1, 두 번째 요소에 undefined가 덮어 씌워진다. undefined의 경우에는 원래 값을 변경하지 않는다.
결과는 a=1, b=20이다
▼배열 비구조화 값 교환
let a = 1;
let b = 2;
[a,b] = [b,a];
console.log(a) // 2
console.log(b) // 1
제 3의 변수가 필요하지 않고, 한 줄의 코드로 작성할 수 있다.
▼일부 속성값 건너뛰기
const arr = [1,2,3];
const [a,,c] = arr;
console.log(a) // 1
console.log(c) // 3
▼Spread Syntax 이용해서 나머지배열 생성
const arr = [1,2,3];
const [first, ...rest1] = arr;
console.log(rest1) // [2,3]
const [a,b,c, ...rest2] = arr;
console.log(rest2) // []
나머지 값이 존재하지 않으면 빈 배열이 만들어진다.
▼객체 비구조화
const obj = {age: 21, name:'mike'}
const {age,name} = obj;
console.log(age); // 21
console.log(name); // mike
obj객체에서 key값과 일치하는 변수명에 value를 하당해준다.
순서는 무관하며 존재하지 않는 속성명은 undefined가 할당된다.
▼객체 비구조화 별칭사용
const obj = {age:21, name:'mike'}
const {age:theAge, name} = obj;
console.log(theAge); // 21
console.log(age) // 참조에러
theAge는 21이 출력되지만, age는 참조에러가 발생한다.
▼기본값 사용하기 undefined와 null의 차이
const obj = {age:undefined, name: null, grade:'A'};
const {age = 0, name='noName', grade='F'} = obj;
console.log(age); // 0
console.log(name); // null
console.log(grade); // A
name은 null이 된다. 기본값을 사용하려면 undefined로 설정해야한다.
▼기본값과 별칭 함께 사용
const obj = {age:undefined, name:'mike'}
const {age:theAge = 0, name } = obj
console.log(theAge) // 0
▼함수를 이용한 기본값
function getDefaultAge () {
console.log('hello')
return 0
}
const obj = {age:21,grade:'A'}
const {age = getDefaultAge(), grade} = obj;// hello 출력되지 않음
console.log(age) // 21
기본값이 사용될 때만 함수가 호출된다 obj객체의 age의 value가 undefined가 아니므로 함수가 호출되지 않는다.
기본값을 설정하는 함수로 구성하면 유용할 것 같다.
▼ 중첩된 객체의 비구조화 사용 예
const obj = {name:'mike', mother:{name : 'sera}};
const {name, mother:{name : motherName} = obj
console.log(name) // mike
console.log(motherName) // sera
console.log(mother) // 참조 에러
▼ 객체 비구조화에서 계산된 속성명 사용하기
const index = 1;
const {[`key${index}`] : valueOfTheIndex } = {key1:123}
console.log(valueOfTheIndex) // 123
객체 비구조화에서 계산된 속성명을 사용할 때에는 반드시 별칭을 입력해야 한다.
▼ 별칭을 이용해 다른 객체와 배열의 속성값 할당
const obj = {};
const arr = [];
({foo:obj.prop, bar:arr[0]} = {foo:123, bar:true})
// foo의 value를 obj.prop에 , bar의 value를 arr[0]에 각각 할당
console.log(obj) // {prop:123}
console.log(arr) // [true]
능숙하게 활용하면 깔끔한 코드를 만드는데 도움이 많이 될 것 같습니다.
반대로, 익숙하게 사용하지 않으면, 간단하게 표현할 수 있는 코드를 복잡하게 짜게 될 것 같습니다.