코드를 더욱 우아하고 유지 보수 가능하게 만들어 줄 6가지 JavaScript 프로 팁 🔥🔥🔥
기법 1: if...else 스파게티 코드 줄이기
두 개 이상의 if...else 문을 사용하는 함수가 있다면, 더 나은 최적화 방법을 고려할 때입니다.
function getPrice(item) {
if (item === 'apple') return 1.0;
else if (item === 'banana') return 0.5;
else if (item === 'orange') return 0.75;
// 추가 조건...
}이러한 구현 방식은 많은 조건문으로 인해 함수 본문이 복잡해질 수 있습니다. 새로운 아이템을 추가하려면 if...else 문을 추가하여 함수를 수정해야 합니다.
이 접근 방식은 어느 정도 OCP(Open/Closed Principle)를 위반하게 됩니다. OCP에 따르면, 기능을 확장할 때 기존 코드를 수정하지 않고 소프트웨어 엔터티를 확장하는 방식으로 요구 사항 변경을 달성해야 합니다.
여기서는 데이터를 저장하기 위해 Map과 유사한 자료구조를 사용할 수 있습니다. 다음과 같이 객체를 생성하여 데이터를 저장할 수 있습니다.
const priceMap = {
apple: 1.0,
banana: 0.5,
orange: 0.75,
// 추가 아이템...
};
function getPrice(item) {
return priceMap[item] || 0; // 아이템이 없으면 0 반환
}이 방법은 새로운 아이템을 추가할 때 getPrice 함수의 핵심 로직을 변경할 필요가 없습니다.
또는 Map을 사용하는 방식도 가능합니다.
const priceMap = new Map();
priceMap.set('apple', 1.0);
priceMap.set('banana', 0.5);
priceMap.set('orange', 0.75);
function getPrice(item) {
return priceMap.get(item) || 0; // 아이템이 없으면 0 반환
}기법 2: 중복 루프를 파이프라인 연산으로 대체하기
const foods = [
{ name: 'Apple', group: 1 },
{ name: 'Banana', group: 2 },
{ name: 'Carrot', group: 1 },
// 추가 아이템...
];
const group1Foods = [];
for (let i = 0; i < foods.length; i++) {
if (foods[i].group === 1) {
group1Foods.push(foods[i].name);
}
}위의 전통적인 방법 대신 filter와 map을 사용하여 코드의 간결함과 의미적 명확성을 높일 수 있습니다.
const group1Foods = foods
.filter(food => food.group === 1)
.map(food => food.name);기법 3: find로 중복 루프 대체하기
특정 속성 값을 기준으로 배열에서 항목을 찾을 때, find 메서드가 유용합니다.
const foods = [
{ name: 'Apple', group: 1 },
{ name: 'Banana', group: 2 },
{ name: 'Carrot', group: 1 },
// 추가 아이템...
];
const foundFood = foods.find(food => food.name === 'Banana');기법 4: includes로 중복 루프 대체하기
배열에 특정 값이 포함되어 있는지 확인할 때, includes를 사용하면 코드가 간결해집니다.
const fruits = ['Apple', 'Banana', 'Carrot'];
const hasBanana = fruits.includes('Banana');기법 5: 일관된 반환 변수 사용
작은 함수에서 반환 값을 저장하는 일관된 변수(result)를 사용하면 코드를 더 명확하게 만들 수 있습니다.
function calculateTotal(items) {
let result = 0;
for (let i = 0; i < items.length; i++) {
result += items[i].price;
}
return result;
}기법 6: 객체의 무결성 유지
백엔드 요청으로부터 반환된 데이터 처리 시, 필요한 속성만 추출하여 처리하는 대신 객체를 그대로 전달하는 것이 장기적으로 유리할 수 있습니다.
function getDocDetail(doc) {
const { icon, content } = doc;
// icon과 content 처리
// 추후 doc.title, doc.date 등도 필요시 접근 가능
}
const doc = { icon: 'icon.png', content: 'Some content', title: 'Document Title', date: '2023-10-15' };
getDocDetail(doc);🌟 마지막 생각
위의 JavaScript 기법들은 코드 품질과 안정성을 향상시킬 수 있습니다. 중복 루프를 줄이고 객체 무결성을 유지하며 filter, map, find, includes와 같은 현대적인 JavaScript 메서드를 활용하면 더 깨끗하고 효율적이며 유지 관리가 쉬운 코드를 작성할 수 있습니다.
다음 프로젝트에서 이러한 팁을 시도해보고 직접 개선을 경험해 보세요. 행복한 코딩 되세요!
