8가지 일반적인 자바스크립트 ES6 기법

 

1. 객체 속성 값 추가

동적으로 이름이 바뀔 때 객체에 속성을 추가하려면 어떻게 해야 할까요?

 

let obj = {};
let index = 1;
let key = `topic${index}`;
obj[key] = 'topic';

왜 추가 변수를 만들어야 할까요?
ES6에서 객체 속성 이름이 표현식을 사용할 수 있음을 알고 계셨나요?
개선 후:

 

let obj = {};
let index = 1;
obj[`topic${index}`] = 'topic';

2. 리스트 검색

공식적인 프로젝트 개발에서는, 프론트엔드는 일반적으로 페이징 없는 몇몇 리스트의 검색 기능을 구현하는 책임이 있습니다.

검색은 일반적으로 정확한 검색과 퍼지 검색으로 나뉘며, 검색은 또한 필터링이라고도 불립니다.

하나는 퍼지 검색으로, 일바적으로 필터를 사용하여 구현됩니다:

 

const a = [1, 2, 3, 4, 5]
const result = a.filter((item) => {
  return item === 3
})
console.log('result', result)

그러나, 정확한 검색이라면, ES6에서는 find를 사용해야 합니다.

 

const a = [1,2,3,4,5];
const result = a.find( 
  item =>{
    return item === 3
  }
)

 

3. 객체 속성 값 가져오기

 

const name = obj && obj.name

ES6에서는 선택적 연결 연산자를 사용할 수 있습니다:

 

const name = obj?.name

4. 배열 평탄화

ERP 시스템이나 인사 관리 시스템을 개발하는 과정에서 종종 애플리케이션 시나리오를 마주하게 됩니다.

부서의 JSON 데이터에서 속성 이름은 부서 id이고, 속성 값은 부서 구성원 id의 배열 컬렉션입니다. 지금 요구사항은 모든 부서의 구성원 id를 배열 컬렉션으로 추출하는 것입니다.

 

const deps = {
'data01':[1,2,3],
'data02':[5,8,12],
'data03':[5,14,79],
'data04':[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)]

이 시점에서, 프론트엔드 팀장이 욕을 하기 시작한 것 같습니다:

모든 객체의 속성 값을 얻기 위해 아직도 순회를 해야 하나요? 성능 최적화가 좋다고요, Object.values를 잊어버렸나요? ES6를 전혀 사용해본 적이 없나요? 배열을 다루는 평탄화 과정이 있습니다, 왜 ES6에서 제공하는 평탄화 방법을 사용하지 않나요?

 

const deps = {
'data01':[1,2,3],
'data02':[5,8,12],
'data03':[5,14,79],
'data04':[3,64,105],
}
let member = Object.values(deps).flat(Infinity);

Infinity를 flat 매개변수로 사용하면, 평탄 배열의 차원을 알 필요가 없습니다.

5. if문에서의 판단문

 

if(
    type == 1 ||
    type == 2 ||
    type == 3 ||
    type == 4 ||
){
   //...
}

개선 후에는 다음과 같이 줄일 수 있습니다:

const condition = [1, 2, 3, 4]
const type = 11
if (condition.includes(type)) {
  console.log('ok')  
}

6. 입력 상자가 비어있지 않음을 판단

일상적인 개발에서, PC나 모바일 터미널에 관계없이 입력 상자와 관련된 비즈니스를 처리할 때, 입력 상자에 입력 값이 없는지 자주 판단합니다.

 

if(value !== null && value !== undefined && value !== ''){
    //...
}

개선하여 다음과 같이 할 수 있습니다:

 

if((value??'') !== ''){
  //...
}

많은 코드를 절약했습니다, 놀랍지 않나요?

7. 객체 속성 값 가져오기

 

const name = obj && obj.name

개선 후:

 

const name = obj?.name

8. 비동기 함수

비동기 함수는 매우 흔하며, 바로 예시로 들어가겠습니다

 

fconst fn1 = () =>{
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(1);
    }, 300);
  });
}
const fn2 = () =>{
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(2);
    }, 600);
  });
}
const fn = () =>{
   fn1().then(res1 =>{
      console.log(res1);// 1
      fn2().then(res2 =>{
        console.log(res2)
      })
   })
};

이런 코드를 보면, 프론트엔드 팀장의 경멸하는 눈을 보는 것 같습니다.

이렇게 쓰는 것과 콜백 지옥과 무슨 차이가 있나요?

개선 후.

 

const fn = async () =>{
  const res1 = await fn1();
  const res2 = await fn2();
  console.log(res1);// 1
  console.log(res2);// 2
}

 

코드가 한번에 훨씬 간단해졌고, 드디어 안도의 한숨을 쉽니다.

만약 병렬 요청이라면, Promise.all()을 사용할 수 있습니다.