[개발일기] 클린코드

(2023.05.13)

나는 길게 늘어진 코드를 읽기 힘들어한다. 한눈에 잘 들어오지 않기 때문이다.

js 작성시 짧게 코드를 쓸 수 있는 방법이 많이 있다. 물론 클린코드가 짧은코드를 의미하는 것은 아니다.

하지만 클린코드 영역 안에 짧은코드도 있다.

 

1. && 연산자 활용

// 기존
if (조건) {
  함수();
}

// 개선
조건 && 함수();

// 기존
if (조건) {
  함수();
} else {
  함수2();
}

// 개선(아래 예시에서 함수() 안에 truly한 return값이 있어야 함)
(조건 && 함수()) || 함수2();

 

2. some, every 활용

// 기존
let myPet = false;

for (let i = 0; i < data.length; i++) {
  if (data[i].name === '고양이') {
    myPet = true;
    break;
  }
}

if (myPet) {
  console.log('나의 반려동물을 찾았습니다.');
}

// 개선
if (data.some(v => v.name === '고양이')) {
  console.log('나의 반려동물을 찾았습니다.');
}

if (data.every(v => v.name !== '고양이')) {
  console.log('나의 반려동물을 찾을 수 없습니다.');
}

// some은 순회하는 데이터 중에서 조건에 맞는 값이 하나라도 있다면 true를 return하고
// every는 순회하는 데이터의 모든 값이 조건에 맞아야 true를 return한다.

 

3. 객체 활용

// 기존
const name = '한국';
let countryData = {};

if (name === '미국') {
  countryData = {engName: 'USA', lang: 'english'};
} else if (name === '한국') {
  countryData = {engName: 'SOUTH KOREA', lang: 'korean'};
} else if (name === '중국') {
  countryData = {engName: 'CHINA', lang: 'chinese'};
} else {
  countryData = {engName: 'JAPAN', lang: 'japanese'};
}

// 개선
const name = '한국';

let countryData = {
  '미국': {engName: 'USA', lang: 'english'};
  '한국': {engName: 'SOUTH KOREA', lang: 'korean'};
  '중국': {engName: 'CHINA', lang: 'chinese'};
  '일본': {engName: 'JAPAN', lang: 'japanese'};
}

console.log(countryData[name]);

 

난 if~else문이 길어질때 객체를 활용해서 조건문을 만드는 걸 선호한다.

조건이 3개 이상이면 읽기 힘들어지고 로직을 파악하기도 어려워진다.

 

유지보수성과 확장성을 위해 클린코드를 지향하자!