[JS] 효율적이고 효과적인 자바스크립트 개발을 위한 45가지 팁(2)

위 글은 45 JavaScript Super Hacks Every Developer Should Know를 번역 겸 약간의 각색을 곁들인 글로,

이 글은 5번째 중 2번째 글이다.

 

---

10.  Nullish Coalescing Operator ( 널리쉬 병합 연산자)

문제: || 연산자를 사용할 때, 0, "" (빈 문자열), false 등의 falsy 값들 때문에 의도하지 않은 기본값이 적용될 수 있다.

예를 들어, 사용자가 나이를 0으로 설정했을 때 기본값으로 대체되어버리는 문제가 발생할 수 있다.

 

해결책: null이나 undefined일 때만 기본값을 제공하는 Nullish Coalescing (??)를 사용하세요. 이 연산자는 falsy 값들을 실제 값으로 취급하여 의도한 동작을 보장합니다.

// PROBLEM: || 연산자는 왼쪽 표현식이 falsy 값인 경우 (여기서는 빈 문자열과 0이 모두 falsy 값임) 오른쪽 표현식의 값을 반환
// 결과적으로 사용자의 이름이 빈 문자열로 의도적으로 설정되었음에도 불구하고 "익명"으로 대체되고, 나이가 0으로 의도적으로 설정되었음에도 불구하고 18으로 대체되어 출력된다.

const user = { name: '', age: 0 };

// || 연산자를 사용할 경우
const userName = user.name || '익명';
const userAge = user.age || 18;

console.log(userName); // "익명"
console.log(userAge); // 18

// SOLUTION: ?? 연산자 사용

const user = { name: '', age: 0 };
const userName = user.name ?? '익명';
const userAge = user.age ?? 18;
console.log(userName); // ""
console.log(userAge); // 0

11.  Shorthand Property Names  ( (객체) 단축 속성명 ) 

문제: 객체를 생성할 때, 속성 이름과 변수 이름이 같을 경우에도 불필요하게 반복적으로 작성해야 하는 번거로움이 있다. 이는 코드의 간결성을 해치고 오류를 유발할 수 있다.

 

해결책: 속성 이름과 변수 이름이 같을 때는 속성 이름을 생략할 수 있는 속성 단축 명을 사용하세요. 이 방식은 코드를 간결하게 하고 오류 가능성을 줄입니다.

// PROBLEM: 전통적인 방식의 객체 생성( 속성 이름과 변수 이름이 같음에도 key, value에 같은 이름을 작성 )

const name = 'Jane';
const age = 25;

const user = {
  name: name,
  age: age
};

console.log(user); // { name: 'Jane', age: 25 }


// SOLUTION: 속성 단축 표현을 이용( 동일한 이름을 가진 변수를 객체 속성으로 할당할 때 속성 이름을 생략할 수 있게 해준다. )

const name = 'Jane';
const age = 25;
const user = { name, age };
console.log(user); // { name: 'Jane', age: 25 }

 

12.  Computed Property Name ( 계산된 속성 이름 = 동적 속성 이름 ) 

문제: 객체 속성 이름을 동적으로 설정하려면 일반적인 객체 리터럴 방식을 사용할 수 없으며, 별도의 단계를 거쳐야 한다. 이는 코드의 복잡성을 증가시키고, 실수를 초래할 수 있다.

 

해결책: 계산된 속성 이름을 사용하여 속성 이름을 변수 값으로 동적으로 설정할 수 있다. 이 방법은 코드를 직관적으로 만들고 유연성을 제공한다.

// PROBLEM: Computed Property Name 미사용. 객체 속성을 설정할 때 전통적인 방식의 한계

const propName = 'age';
const name = 'Jane';
const age = 25;

// 객체 초기화 후 동적 속성을 추가하는 방식
const user = { name: name };
user[propName] = age;  // 별도의 단계로 속성 추가

console.log(user); // { name: 'Jane', age: 25 }


// SOLUTION: Computed Property Name 사용

const propName = 'age';
const user = { name: 'Jane', [propName]: 25 };
console.log(user); // { name: 'Jane', age: 25 }

13.  Array.map(),  filter(),  reduce()

문제: 배열의 각 요소를 순회하며 값을 변환하거나 조건에 따라 필터링하거나, 총합을 구하는 등의 작업을 수행할 때, 전통적인 for 루프를 사용하는 것은 코드가 길어지고 복잡해질 수 있다.

 

해결책: map(), filter(), reduce() 같은 고차 배열 메소드를 사용하면 이러한 작업들을 간결하고 선언적으로 처리할 수 있다. 이 메소드들은 각각 배열의 요소를 변환, 조건에 맞는 요소를 필터링, 누적 결과를 생성하는 데 특화되어 있다.

// PROBLEM: JS 메서드 미사용. 전통적인 for문

const numbers = [1, 2, 3, 4, 5];
let doubled = [];
let evens = [];
let sum = 0;

// 배열의 각 요소를 순회하여 값을 변환
for (let i = 0; i < numbers.length; i++) {
    doubled.push(numbers[i] * 2);
}

// 조건에 맞는 요소를 필터링
for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 0) {
        evens.push(numbers[i]);
    }
}

// 배열의 총합을 구함
for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}

console.log(doubled); // [2, 4, 6, 8, 10]
console.log(evens); // [2, 4]
console.log(sum); // 15


// SOLUTION: JS 메서드 사용(map, filter, reduce 등)

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]

const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 15

14.  String.includes(),  startsWith(),  endsWith()

문제: 문자열에서 특정 문자열이 포함되어 있는지, 시작되는지 또는 끝나는지를 확인하는 전통적인 방법은 종종 복잡하고 길어질 수 있다. 이로 인해 코드의 가독성과 유지보수성이 저하될 수 있다.

 

해결책: includes(), startsWith(), endsWith()와 같은 메소드를 사용하면 이러한 문자열 검사를 간단하고 읽기 쉬운 방식으로 수행할 수 있다. 이 메소드들은 코드를 직관적으로 만들고, 에러 가능성을 줄인다.

// PROBLEM: 전통적인 방법

const str = 'Hello, world!';

// 1. 문자열이 'world'를 포함하는지 확인
let containsWorld = false;
if (str.indexOf('world') !== -1) {
    containsWorld = true;
}
console.log(containsWorld); // true

// 2. 문자열이 'Hello'로 시작하는지 확인
let startsWithHello = false;
if (str.substring(0, 5) === 'Hello') {
    startsWithHello = true;
}
console.log(startsWithHello); // true

// 3. 문자열이 '!'로 끝나는지 확인
let endsWithExclamation = false;
if (str.charAt(str.length - 1) === '!') {
    endsWithExclamation = true;
}
console.log(endsWithExclamation); // true

// SOLUTION: JS 메서드(includes, startsWith, endsWith)를 통한 간소화

const str = 'Hello, world!';
console.log(str.includes('world')); // true
console.log(str.startsWith('Hello')); // true
console.log(str.endsWith('!')); // true

15. 함수 매개변수에서의 배열 및 객체 구조 분해

문제: 함수를 호출할 때 전달된 매개변수가 배열이나 객체인 경우, 함수 내부에서 이 매개변수들의 값을 하나하나 접근하여 사용하는 것은 코드가 장황해질 수 있다. 이는 함수의 복잡성을 증가시키고 가독성을 저하시킬 수 있다.

 

해결책: 함수 매개변수에서 직접 구조 분해를 사용하여, 필요한 값들을 한 번에 추출하세요. 이 방법은 함수의 매개변수를 보다 명확하게 표현하고, 함수 본문의 코드를 간결하게 만든다.

// PROBLEM: 전통적인 방법

const user = { name: 'Jane', age: 25 };

// 구조 분해를 사용하지 않고 매개변수에서 값을 추출
function greet(user) {
    const name = user.name;
    const age = user.age;
    return `Hello, ${name}! You are ${age} years old.`;
}

console.log(greet(user)); // "Hello, Jane! You are 25 years old."


// SOLUTION: 함수 매개변수에서 직접 구조 분해 사용

const user = { name: 'Jane', age: 25 };

// 구조 분해를 사용하여 매개변수에서 값을 바로 추출
function greet({ name, age }) {
    return `Hello, ${name}! You are ${age} years old.`;
}

console.log(greet(user)); // "Hello, Jane! You are 25 years old."

16. 구조 분해에서의 기본값

문제: 구조 분해를 통해 객체에서 속성을 추출할 때, 해당 속성이 누락되었거나 undefined로 설정되어 있으면 함수나 계산에서 예외가 발생할 수 있다. 이는 데이터의 불완전성 때문에 코드가 예상치 못한 방식으로 실패할 수 있다.

 

해결책: 구조 분해 과정에서 기본값을 제공하여, 속성이 누락되었거나 undefined인 경우에도 안정적인 기본값을 사용할 수 있도록 하세요. 이는 코드의 견고성을 높이고, 예외 처리를 감소시킵니다.

// PROBLEM: 구조 분해에서 기본값 미설정 시 발생할 수 있는 문제

const user = { name: 'Jane' };

// 구조 분해를 사용하지만 기본값을 제공하지 않음
const { name, age } = user;
console.log(name); // "Jane"
console.log(age); // undefined

// 'age'가 undefined이므로 계산을 수행할 때 문제가 발생할 수 있음
try {
    const nextYearAge = age + 1;
    console.log(`Next year you will be ${nextYearAge} years old.`);
} catch (error) {
    console.log('Error computing next year age:', error.message);
}


// SOLUTION: 구조 분해에서 기본값 설정

const user = { name: 'Jane' };

// 구조 분해에서 기본값을 제공
const { name, age = 18 } = user;
console.log(name); // "Jane"
console.log(age); // 18

// 'age'에 기본값 18이 사용되므로 계산이 제대로 수행됨
const nextYearAge = age + 1;
console.log(`Next year you will be ${nextYearAge} years old.`);

---

같이 읽으면 좋을 글

2024.06.08 - [Programming Language/Javascript] - [JS] 효율적이고 효과적인 자바스크립트 개발을 위한 45가지 팁(1)

[JS] 효율적이고 효과적인 자바스크립트 개발을 위한 45가지 팁(1)

 

2024.06.10 - [Programming Language/Javascript] - [JS] 효율적이고 효과적인 자바스크립트 개발을 위한 45가지 팁(3)

[JS] 효율적이고 효과적인 자바스크립트 개발을 위한 45가지 팁(3)

 

2024.06.11 - [Programming Language/Javascript] - [JS] 효율적이고 효과적인 자바스크립트 개발을 위한 45가지 팁(4)

[JS] 효율적이고 효과적인 자바스크립트 개발을 위한 45가지 팁(4)

 

2024.06.12 - [Programming Language/Javascript] - [JS] 효율적이고 효과적인 자바스크립트 개발을 위한 45가지 팁(5)

[JS] 효율적이고 효과적인 자바스크립트 개발을 위한 45가지 팁(5)