23. 자바스크립트 닌자코드

 

닌자 코드 🥷✨: 절대 하지 말아야 할 코딩 습관

"닌자 코드"란 마치 닌자가 연막탄을 터뜨리고 사라지듯, 다른 사람이 절대 알아볼 수 없게 코드를 작성하는 것을 비꼬는 말입니다. 닌자 코드는 동료 개발자들에게 혼란을 주고, 유지보수와 디버깅을 악몽으로 만듭니다. 여기서는 피해야 할 닌자 코딩 스타일을 살펴보고, 올바른 코딩 방식도 함께 배워보겠습니다.

---

1️⃣ 코드 짧게 쓰기 ✂️

닌자 코드 스타일:

삼항 연산자 ? :를 과도하게 사용해 짧게 쓴 코드:

i = i 
    ? i < 0 
    ? Math.max(0, len + i) 
    : i 
    : 0;

문제점:

• 읽기 어렵고, 디버깅하기 힘들다.
• 조건문이 중첩될수록 가독성은 바닥으로 떨어진다.

올바른 코드:

가독성을 위해 명확한 조건문 사용:

if (i) {
    if (i < 0) {
        i = Math.max(0, len + i);
    }
} else {
    i = 0;
}

설명:

• 삼항 연산자는 짧고 간단한 조건에만 사용하세요.
• 조건문이 복잡해질수록 if-else를 사용해 의도를 명확히 전달합니다.

---

2️⃣ 글자 하나만 사용하기 🅰️

닌자 코드 스타일:

의미 없는 변수명:

let a = 10;
let b = a * 2;
let c = b + 5;

문제점:

• a, b, c가 무엇을 의미하는지 알 수 없다.
• 코드 읽기가 고문 수준.

올바른 코드:

의미 있는 변수명 사용:

let baseValue = 10;
let doubledValue = baseValue * 2;
let finalValue = doubledValue + 5;

설명:

• 변수명은 코드의 목적을 설명해야 합니다.
• 길더라도 이해하기 쉬운 이름을 사용하세요. 변수명은 코드를 설명하는 첫걸음입니다.

---

3️⃣ 반복문에서 생소한 약어 사용하기 🔄

닌자 코드 스타일:

반복문에서 엉뚱한 변수명 사용:

for (let x = 0; x < array.length; x++) {
    console.log(array[x]);
}

문제점:

• x가 무엇을 의미하는지 문맥이 불분명하다.

올바른 코드:

전통적인 i, j, k 사용 또는 명확한 변수명:

// 1차원 배열
for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
}

// 2차원 배열
for (let row = 0; row < grid.length; row++) {
    for (let col = 0; col < grid[row].length; col++) {
        console.log(`Value at (${row}, ${col}): ${grid[row][col]}`);
    }
}

설명:

• i, j, k는 인덱스(index)로, row, col은 행과 열(row and column)을 나타낼 때 직관적입니다.
• 반복문 변수명을 문맥에 맞게 선택하세요.

---

4️⃣ 약어 남발하기 🤯

닌자 코드 스타일:

모든 것을 줄여 쓰기:

let lst = [1, 2, 3];
let ua = navigator.userAgent;

문제점:

• 약어는 문맥에 따라 해석이 달라질 수 있다.
• 팀원들이 코드를 이해하기 어려워진다.

올바른 코드:

명확한 변수명 사용:

let itemList = [1, 2, 3];
let userAgentString = navigator.userAgent;

설명:

• 변수명은 자명하고 직관적이어야 합니다.
• 약어는 팀원과의 사전 합의가 있는 경우에만 사용하세요.

---

5️⃣ 포괄적인 명사 사용하기 🌐

닌자 코드 스타일:

모호한 변수명 사용:

let data = 42;
let value = "Hello";

문제점:

• data와 value는 너무 일반적이어서 용도를 알 수 없다.

올바른 코드:

구체적이고 맥락에 맞는 변수명:

let userAge = 42;
let greetingMessage = "Hello";

설명:

• 변수명은 구체적이고 의미 있는 단어를 사용하세요.
• data와 value 같은 변수명은 피하세요.

---

6️⃣ 동의어 사용하기 🌀

닌자 코드 스타일:

동일한 동작에 여러 접두어 사용:

function displayMessage() { /* ... */ }
function showMessage() { /* ... */ }
function renderMessage() { /* ... */ }

문제점:

• 같은 동작을 여러 이름으로 표현하면 혼란만 가중된다.

올바른 코드:

일관된 네이밍 패턴 사용:

function renderMessage() { /* ... */ }
function renderErrorMessage() { /* ... */ }

설명:

• 함수나 변수의 이름은 일관성을 유지하세요.
• 혼란을 피하려면 동일한 동작에는 동일한 접두어를 사용합니다.

---

7️⃣ 함수에 모든 기능 몰아넣기 🛠️

닌자 코드 스타일:

하나의 함수가 여러 동작을 수행:

function validateEmail(email) {
    if (!email.includes("@")) {
        console.error("Invalid email");
        return false;
    }
    console.log("Valid email");
    return true;
}

문제점:

• 함수가 "유효성 검사" 외에 로그 출력까지 한다.
• 재사용성이 떨어진다.

올바른 코드:

단일 책임 원칙(SRP)을 따르기:

function isValidEmail(email) {
    return email.includes("@");
}

function logValidationResult(email) {
    if (isValidEmail(email)) {
        console.log("Valid email");
    } else {
        console.error("Invalid email");
    }
}

설명:

• 함수는 하나의 역할만 수행해야 유지보수와 재사용이 용이합니다.

---

8️⃣ 외부 변수 덮어쓰기 🌍

닌자 코드 스타일:

내부와 외부 변수명이 동일:

let user = "Global User";

function render() {
    let user = "Local User";
    console.log(user); // Local User
}

문제점:

• 내부와 외부 변수가 헷갈린다.

올바른 코드:

변수명 구분:

let globalUser = "Global User";

function render() {
    let localUser = "Local User";
    console.log(localUser); // Local User
}

설명:

• 변수의 스코프(scope)를 명확히 구분하세요.

---

결론: 닌자 코드는 웃음을 줄 수는 있지만, 동료 개발자와 본인을 괴롭게 만듭니다. 명확하고 가독성 높은 코드를 작성하는 습관을 길러서 진정한 프로 개발자가 되어보세요! 😊