#05. [Naver Conventions 전격해부] Destructuring

 

Destructuring

---

 

 네이버 컨벤션은 Destructuring에 대해 Airbnb와 다르게 별도의 가이드를 제공하지 않습니다. 하지만 Airbnb의 Destructuring conventions에도 좋은 점이 많이 보여 정리하였습니다.

 JavaScript의 Destructuring 개념에 대해 알고싶으시다면 이전 글을 참고해주시기 바랍니다.

 

Airbnb Conventions

 

▽ 5.1 object의 여러 프로퍼티에 접근하거나 사용하기 위해 destructuring을 사용합니다.

// bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;

  return `${firstName} ${lastName}`;
}

: Destructuring을 진행하지 않고 각각의 변수를 선언합니다.

// good
function getFullName(user) {
  const { firstName, lastName } = user;
  return `${firstName} ${lastName}`;
}

// best
function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`;
}

: Destructuring의 다음과 같은 장점을 사용하기 위해서입니다.

• 해당 프로퍼티에 대한 임시 참조를 생성합니다 : 해당 프로퍼티 사용 시, 블록 전체를 읽어낼 필요가 없어 속도가 향상됩니다.
• 개체에 대한 반복적인 접근(Access)를 방지합니다 : 반복적인 엑세스는 더 많은 반복적인 코드를 생성해 실수를 유발합니다.

 

 ▽ 5.2 배열 Destructuring을 사용합니다.

const arr = [1, 2, 3, 4];

// bad
const first = arr[0];
const second = arr[1];

// good
const [first, second] = arr;

 

▽ 5.3 반환 값이 여러개라면, Array Destructuring보다 Object Destructuring이 권장됩니다.

// bad
function processInput(input) {
  // then a miracle occurs
  return [left, right, top, bottom];
}

// 이 경우 반환 데이터의 순서를 고려해야됩니다.
const [left, __, top] = processInput(input);

// good
function processInput(input) {
  // then a miracle occurs
  return { left, right, top, bottom };
}

// 원하는 데이터만 가져올 수 있습니다.
const { left, top } = processInput(input);

 

naver github STYLE_GUIDE.md