[Javascript] 신입, 취준생을 위한 현업에서 코드 짜는법(클린코드)

이제 막 취업에 성공하신 분, 대학생 혹은 프로그래머로 취업을 준비중이신 분들은 현업에서 코드를 작성하는 방법에 대해서 궁금해 하시는 분들이 많으실 겁니다. 특히, 코드의 가독성은 신입이나 경력 상관없이 프로그래머라면 항상 관심을 가지는 주제인데요. 안그러면 다 지워집니다. 그만큼 프로그래머에게 있어서 가독성 좋은 코드를 작성하는 능력은 매우 중요합니다.

 

예제는 자바스크립트로 작성되었지만 파이썬, C++ 등 다른 언어에서도 통하는 방식입니다.

자바스크립트를 읽을 줄 아는 분이시라면 다른 언어에서도 활용해 보시길 바랍니다.

예제를 통해 가독성과 성능을 끌어올릴 수 있는 몇가지 상황을 알려드리겠습니다.

1. 조건문이 반복되는 if문의 경우 Array.includes를 활용하자

Bad Case

if (data === "자두" || data === "사과" || data === "딸기") {
	alert("빨갛다!")
}

 

예시처럼 코드가 짧으면 가독성을 크게 해치진 않습니다.

하지만 항목이 늘어날수록 가동성을 해치게 됩니다.

반복되는 코드로 인해 보일러 플레이트도 갈수록 커지게 되죠.

Good Case

if(['자두', '사과', '딸기'].includes(data)) {
	alert("빨갛다!")
}

 

나열식 구조를 가지는 if문의 경우 array function을 활용해서 가독성을 향상시킬 수 있습니다. 깔끔하지 않나요?

2. 문자열을 더할 때는 Array.join을 활용하자

이 경우는 특히 초보자들이 Bad Case를 선택하는 경우가 많은데요.

간혹 문자끼리 더하여 문자 사이에 ,를 추가하거나 \n 을 추가하는 경우가 있습니다.

이런 문제를 for문, forEach를 활용해서 문제를 해결하는 경우 코드가 정말 심각하게 꼬이게 됩니다.

Bad Case

// 1번 케이스
const nameList = ["철수", "영희", "민수"]

let str1 = ""

for (let i = 1; i < nameList.length; i++) {
	str1 += nameList[i] + ', '
}

// 2번 케이스
let str2 = ""

for (let i = ; i < nameList.length; i++) {
	str1 += ', ' + nameList[i]
}

// 3번 케이스
let str3 = nameList[0]

for (let i = 1; i < nameList.length; i++) {
	str3 += ', ' + nameList[i]
}

// Result
str1 = "철수, 영희, 민수, "
str2 = ", 철수, 영희, 민수"
str3 = "철수, 영희, 민수"

 

1, 2번 케이스는 ,의 위치가 적절하지 않아 문제를 해결하지 못합니다.

추가 작업으로 ,를 제거하면 장황한 코드가 되고 가독성을 심하게 해치게 됩니다.

심지어 성능도 떨어지죠. 안그래도 구린데

3번 케이스는 배열이 비어있으면 str3을 할당하는 부분에서 인덱스 에러가 일어납니다.

 

따라서 어떤 선택지를 선택하더라도 문제를 제대로 해결했다고 보기 어렵습니다.

Good Case

const nameList = ["철수", "영희", "민수"]
const emptyList = []

const str1 = nameList.join(", ") // 철수, 영희, 민수
const str2 = emptyList.join(", ") //

 

문자 사이에 글자를 추가하는 경우 Array Join을 사용하세요. 가독성과 성능 모든면에서 좋습니다.

만약 배열이 비어있더라도 "" 를 생성하게 됩니다.

 

3. 전체 선택, 일부 선택은 Array.some, Array.every를 활용하자

웹 개발을 하다보면 체크박스의 전체 선택처럼 일괄 처리를 구현해야하는 경우가 있습니다.

경력자들도 많이 놓치는 부분이라 신입 분들이 Good Case로 칭찬받을 수도 있는 포인트입니다. 니 코드 쩔더라~

Bad Case

const fruits = [
    {name: "apple", color: "red"},
    {name: "banana", color: "yellow"},
    {name: "orange", color: "orange"},
];

let isAllRed = true;

for (const fruit in fruits) {
    isAllRed = fruit.color === "red";
  	
    if (!isAllRed) break;
}

console.log(isAllRed) // false

 

배열을 순회하면서 fruit의 color 가 "red"인지 확인하고 isAllRed 값을 변경합니다.

이렇게 작성하면 가독성을 심하게 해치게 됩니다. 딱 봐도 보기 힘들죠? 고통받는 동료 개발자

 

Array.every를 사용해서 바꿔보겠습니다.

Good Case

const fruits = [
    {name: "apple", color: "red"},
    {name: "banana", color: "yellow"},
    {name: "orange", color: "orange"},
];

const isAllRed = fruits.every((fruit) => fruit.color === "red");

 

every 메소드를 활용해 모든 fruits의 color 가 red인 경우에만 true를 반환하도록 변경했습니다.

아주 간단하죠?

4. switch ~ case 대신 Set, json을 활용하자 (Enum 방식)

값 바인딩 혹은 Enum 형을 switch ~ case 문으로 작성하는 경우인데요.

Bad Case

function getFruit(type) {
	switch(type) {
        case 1:
            return "사과";
        case 2:
            return "바나나";
        case 3:
            return "복숭아";
        default:
            return "미지의 과일";
	}
}

const type = 3;
const text = getFruit(type); // 복숭아

 

이렇게 작성하면 어떤 문제가 생길까요??

일단 예시 내에서 보자면, 복숭아의 경우 case를 3번 판정해야합니다.

case는 순차적으로 실행되기에 1 === 3과 2 === 3을 판정하게 되는 것이죠.

즉, case가 많아질수록 성능이 떨어지게 됩니다.

 

더 나아가 거시적인 관점으로 보았을 때, Javascript는 코드의 크기가 줄어들수록 성능이 개선될 수 있습니다.

클라이언트가 Javascript 코드를 다운로드 받고, 그 코드를 실행하게 되기 때문이죠.

즉 파일의 크기가 줄어들면 클라이언트가 내려받는 시간이 줄어들고, 비용도 함께 줄어듭니다.

항상 옳다고는 할 수 없지만, 거의 대부분 Javascript는 코드를 짧게 작성하는게 유리합니다.

 

switch ~ case는 break 라는 보일러 플레이트를 작성해야 해서 파일의 크기가 커질수밖에 없죠.

Good Case

function getFruit(type) {
    return {
    	1: "사과",
        2: "바나나",
        3: "복숭아",
    }[type] ?? "미지의 과일";
}

const type = 3;
const text = getFruit(type); // 복숭아

 

switch ~ case를 json으로 바꿔 key: value 방식으로 탐색할 수 있도록 변경했습니다.

switch의 default는 Javascript의 단축 평가 기능을 활용해 구현합니다.

 

물론 switch ~ case 는 Enum을 사용하는게 더 좋은 방법일 수도 있습니다.

[Javascript] Enum 사용하기

---

마치며...

웹, 특히나 Javascript는 세상에 나온지 오래됐고 계속해서 발전해 왔습니다.그래서 검색으로는 과거 구 문법도 함께 검색결과에서 등장하기 때문에 올바른 코드 스타일과 신문법을 배우기 어렵습니다.

 

제 블로그에서 최신 문법으로 문제를 해결하는 글을 계속해서 작성할 계획입니다. 앞으로 웹 개발을 목표로 하시는 분들이라면 현재 트렌드의 흐름 파악과 공식 문서를 계속해서 읽는 노력을 하시면서 코드 스타일을 개선해 나가시길 바랍니다.

 

추천 포스트

[Modern][Javascript] 체크박스 전체 선택 / 전체 해제 구현

 

[Modern][vue3] dialog 태그를 활용한 로딩 바 구현