[javascript] ES6 문법 활용 정리

최근 프로젝트를 수행하며, ES6 문법을 한번 정리하면 좋겠다는 생각이 들었습니다.
간단히 ES6 리마인드겸 실무에서 사용할 수 있을만한 내용들을 정리해보고자 합니다.

프로퍼티 추출

object에서 value를 가져오는 것은 어플리케이션에서 매우 일반적입니다.

AS-IS

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

const f = obj.a + obj.d;
const g = obj.c + obj.e;

TO-BE

ES6의 구조분해를 사용하면 코드의 양이 줄게됩니다.

const { a, b, c, d, e } = obj;
const f = a + d;
const g = c + e;

하지만 값을 가져오면서 변수명을 바꾸고 싶을 수 있습니다.

const { a: a1 } = obj;
console.log(a1); // 1

 

객체 병합

두 배열을 병합하거나 두 객체를 병합하는 경우입니다.

AS-IS

const a = [ 1, 2, 3 ]; 
const b = [ 1, 5, 6 ]; 
const c = a.concat(b); // [ 1, 2, 3, 1, 5, 6]

const obj1 = { 
  a:1, 
}; 
const obj2 = { 
  b:1, 
} ;
const obj = Object.assign({}, obj1, obj2); // { a: 1, b: 1}

TO-BE

ES6 스프레드 연산자를 활용합니다.

const a = [ 1, 2, 3 ];
const b = [ 1, 5, 6 ]; 
const c = [...new Set([ ...a, ...b])]; // [ 1, 2, 3, 5, 6]

const obj1 = { 
  a:1, 
}; 
const obj2 = { 
  b:1, 
};
const obj = { ...obj1, ...obj2 }; // { a: 1, b: 1 }

 

condition 활용

AS-IS

if(
    type == 'a' ||
    type == 'b' ||
    type == 'c' ||
    type == 'd' ||
){
   //...
}

TO-BE

includes 메소드를 활용합니다.

const condition = [ 'a', 'b', 'c', 'd' ];
if( condition.includes(type) ){
   //...
}

 

배열 탐색

AS-IS

const a = [ 1, 2, 3, 4, 5 ];
const result = a.filter(item => item === 3);
console.log(result); // 3

TO-BE

ES6의 find 메소드를 활용합니다. filter와는 다르게 find 메소드는 적합한 항목이 발견되면 배열을 계속 탐색하지 않습니다.

const a = [ 1, 2, 3, 4, 5 ];
const result = a.find(item => item === 3);
console.log(result); // 3

 

object value에서 배열 추출

JSON obejct에서 value에 들어있는 key들의 배열을 추출하고자 합니다.

AS-IS

const deps = {
    'department_1':[ 1, 2, 3 ],
    'department_2':[ 5, 8, 12 ],
    'department_3':[ 5, 14, 79 ],
    'department_4':[ 3, 64, 105 ],
};

let member = [];
for (let item in deps){
    const value = deps[item];
    if(Array.isArray(value)){
        member = [...member,...value];
    }
}
member = [...new Set(member)]; // [1, 2, 3, 5, 8, 12, 5, 14, 79, 3, 64, 105]

 

To-BE

flat 메소드를 활용합니다.
Infinity를 매개변수로 전달한다면 다차원 배열도 1차원 배열로 반환됩니다.

const deps = {
    'department_1':[ 1, 2, 3 ],
    'department_2':[ 5, 8, 12 ],
    'department_3':[ 5, 14, 79 ],
    'department_4':[ 3, 64, 105 ],
};
const member = Object.values(deps).flat(Infinity); // [1, 2, 3, 5, 8, 12, 5, 14, 79, 3, 64, 105]