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

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

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

 

---

19. Array some()와 every()

문제: 배열의 일부 또는 모든 요소가 조건을 만족하는지 확인하는 것은 장황할 수 있습니다.

 

해결책: some()과 every()를 사용하여 코드를 간결하게 작성하세요.

// PROBLEM: some(), every() 미사용

const numbers = [1, 2, 3, 4, 5];
let hasEven = false;
let allEven = true;

for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 0) {
        hasEven = true;
    } else {
        allEven = false;
    }
}

console.log(hasEven); // true
console.log(allEven); // false

// SOLUTION:some(), every() 사용

const numbers = [1, 2, 3, 4, 5];  
const hasEven = numbers.some(num => num % 2 === 0);  
console.log(hasEven); // true  
const allEven = numbers.every(num => num % 2 === 0);  
console.log(allEven); // false

 

 

20. Array flat()과 flatMap()

문제: 중첩된 배열을 평탄화하거나 배열을 매핑하고 평탄화하는 것은 번거로울 수 있습니다.

해결책: flat()과 flatMap()을 사용하여 더 읽기 쉬운 코드를 작성하세요.

// PROBLEM: flat(), flatMap() 미사용

const nested = [1, [2, [3, [4]]]];
let flat = [];
function flatten(array) {
    for (let i = 0; i < array.length; i++) {
        if (Array.isArray(array[i])) {
            flat = flat.concat(flatten(array[i]));
        } else {
            flat.push(array[i]);
        }
    }
    return flat;
}

flat = flatten(nested);
console.log(flat); // [1, 2, 3, 4]

// SOLUTION: flat(), flatMap() 사용
// 중첩된 배열을 간단하게 평탄화하고, 매핑과 평탄화를 한 번에 수행할 수 있게 해준다.

const nested = [1, [2, [3, [4]]]];  
const flat = nested.flat(2);  
console.log(flat); // [1, 2, 3, [4]]  
const mapped = [1, 2, 3].flatMap(x => [x, x * 2]);  
console.log(mapped); // [1, 2, 2, 4, 3, 6]

 

 

21. Array from()과 of()

문제: 반복 가능한 객체나 인수 목록에서 배열을 생성하는 것은 번거로울 수 있습니다.

해결책: Array.from()과 Array.of()를 사용하여 간결한 코드를 작성하세요.

// PROBLEM:Array.from(), Array.of() 미사용

const set = new Set([1, 2, 3]);
const arrFromSet = [];
set.forEach(value => arrFromSet.push(value));
console.log(arrFromSet); // [1, 2, 3]

const arrOfNumbers = [];
arrOfNumbers.push(1);
arrOfNumbers.push(2);
arrOfNumbers.push(3);
console.log(arrOfNumbers); // [1, 2, 3]

// SOLUTION: Array.from(), Array.of() 사용
// Array.from()은 반복 가능한 객체에서 배열을 생성하고, Array.of()는 인수 목록에서 배열을 생성할 수 있게 해준다.

const set = new Set([1, 2, 3]);  
const arrFromSet = Array.from(set);  
console.log(arrFromSet); // [1, 2, 3]  
const arrOfNumbers = Array.of(1, 2, 3);  
console.log(arrOfNumbers); // [1, 2, 3]

22. 콜백 함수에서의 매개변수 구조 분해

문제: 콜백 함수로 전달된 객체의 속성에 접근하는 것은 장황할 수 있습니다.

해결책: 콜백 함수 매개변수에서 구조 분해를 사용하여 코드를 간결하게 만드세요.

// PROBLEM: 구조 분해 미사용

const users = [
  { id: 1, name: 'Jane' },
  { id: 2, name: 'John' },
];

users.forEach(user => {
  const id = user.id;
  const name = user.name;
  console.log(`User ID: ${id}, User Name: ${name}`);
});

// SOLUTION: 구조 분해 사용
// 구조 분해를 사용하면 콜백 함수 매개변수에서 객체의 속성에 직접 접근할 수 있어 코드를 더 간결하게 작성할 수 있습니다.

const users = [  
  { id: 1, name: 'Jane' },  
  { id: 2, name: 'John' },  
];  
users.forEach(({ id, name }) => {  
  console.log(`User ID: ${id}, User Name: ${name}`);  
});

 

23. 선택적 콜백 함수

문제: 선택적인 콜백 함수를 처리하는 것은 번거로울 수 있습니다.

해결책: 단축 평가를 사용하여 선택적인 콜백 함수를 호출하세요.

// PROBLEM: 단축 평가 미사용

function fetchData(url, callback) {
  fetch(url)
    .then(response => response.json())
    .then(data => {
      if (callback) {
        callback(data);
      }
    });
}


// SOLUTION: 단축 평가 사용
// 단축 평가를 사용하면 선택적인 콜백 함수를 제공된 경우에만 호출할 수 있어 코드를 더 견고하게 작성할 수 있습니다.

function fetchData(url, callback) {  
  fetch(url)  
    .then(response => response.json())  
    .then(data => {  
      callback && callback(data);  
    });  
}

 

 

24. 콜백을 프로미스로 변환

문제: 콜백 기반 함수를 프로미스로 변환하는 것은 번거로울 수 있습니다.

해결책: 콜백을 프로미스로 변환하는 유틸리티 함수를 사용하세요.

// PROBLEM: 프로미스 미변환

const fs = require('fs');

function readFileCallback(path, encoding, callback) {
  fs.readFile(path, encoding, (err, data) => {
    if (err) {
      callback(err);
    } else {
      callback(null, data);
    }
  });
}

readFileCallback('path/to/file.txt', 'utf8', (err, data) => {
  if (err) {
    console.error(err);
  } else {
    console.log(data);
  }
});

// SOLUTION: 프로미스 변환
// 프로미스로 변환하면 콜백 기반 함수를 프로미스 기반으로 쉽게 사용할 수 있어 비동기 코드를 더 간단하게 작성할 수 있습니다.

function promisify(fn) {  
  return function (...args) {  
    return new Promise((resolve, reject) => {  
      fn(...args, (err, result) => {  
        if (err) reject(err);  
        else resolve(result);  
      });  
    });  
  };  
}  
const readFile = promisify(require('fs').readFile);  
readFile('path/to/file.txt', 'utf8')  
  .then(data => console.log(data))  
  .catch(err => console.error(err));

 

25. 동기 코드처럼 보이는 비동기 코드 작성 (Async/Await)

문제: 프로미스를 사용한 비동기 코드는 장황하고 읽기 어려울 수 있습니다.

해결책: async/await를 사용하여 동기 코드처럼 보이는 비동기 코드를 작성하세요.

// PROBLEM: async/await 미사용

function fetchData(url) {
  fetch(url)
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
}

fetchData('https://api.example.com/data');


// SOLUTION: async/await 사용
async/await를 사용하면 비동기 코드를 동기 코드처럼 작성할 수 있어 가독성과 유지보수성을 향상시킬 수 있습니다.

async function fetchData(url) {  
  try {  
    const response = await fetch(url);  
    const data = await response.json();  
    console.log(data);  
  } catch (error) {  
    console.error('Error fetching data:', error);  
  }  
}  
fetchData('https://api.example.com/data');

 

26. 프로미스 체이닝

문제: 여러 비동기 작업을 순차적으로 처리하는 것은 번거로울 수 있습니다.

해결책: 프로미스를 체이닝하여 여러 비동기 작업을 순차적으로 처리하세요.

// PROBLEM: 프로미스 체이닝 X

function fetchData() {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      console.log('Data:', data);
      fetch('https://api.example.com/more-data')
        .then(response => response.json())
        .then(moreData => {
          console.log('More Data:', moreData);
        })
        .catch(error => {
          console.error('Error fetching more data:', error);
        });
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
}

fetchData();

// SOLUTION: 프로미스 체이닝 O
// 프로미스를 체이닝하면 여러 비동기 작업을 순차적으로 처리할 수 있어 가독성과 유지보수성을 향상시킬 수 있습니다.

fetch('https://api.example.com/data')  
  .then(response => response.json())  
  .then(data => {  
    console.log('Data:', data);  
    return fetch

('https://api.example.com/more-data');  
  })  
  .then(response => response.json())  
  .then(moreData => {  
    console.log('More Data:', moreData);  
  })  
  .catch(error => {  
    console.error('Error:', error);  
  });

27. 동시 실행을 위한 Promise.all

문제: 여러 비동기 작업을 동시에 처리하는 것은 어려울 수 있습니다.

해결책: Promise.all을 사용하여 여러 비동기 작업을 동시에 처리하세요.

// PROBLEM: Promise.all 미사용

function fetchData() {
  fetch('https://api.example.com/data1')
    .then(response => response.json())
    .then(data1 => {
      console.log('Data 1:', data1);
      fetch('https://api.example.com/data2')
        .then(response => response.json())
        .then(data2 => {
          console.log('Data 2:', data2);
        })
        .catch(error => {
          console.error('Error fetching data 2:', error);
        });
    })
    .catch(error => {
      console.error('Error fetching data 1:', error);
    });
}

fetchData();  

// SOLUTION: Promise.all 사용
// Promise.all을 사용하면 여러 비동기 작업을 동시에 처리하고 모든 작업이 완료될 때까지 대기할 수 있습니다.

const fetchData1 = fetch('https://api.example.com/data1').then(response => response.json());  
const fetchData2 = fetch('https://api.example.com/data2').then(response => response.json());  
Promise.all([fetchData1, fetchData2])  
  .then(([data1, data2]) => {  
    console.log('Data 1:', data1);  
    console.log('Data 2:', data2);  
  })  
  .catch(error => {  
    console.error('Error:', error);  
  });

---

같이 읽으면 좋을 글

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

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

 

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

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

 

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

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

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

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