Javascript 자바스크립트 코딩의 기술 1장 변수 할당으로 의도를 표현하라 (1)

---

1장 변수 할당으로 의도를 표현하라

tip1. const로 변하지 않는 값을 표현하라

const는 블록 문맥 내에서 재할당할 수 없는 변수 선언이지만 불변값이 되는 것은 아니다.
자바스크립트에서는 기본적으로 const를 이용해서 변수를 할당하는 것이 좋다.

이는 확실히 변하지 않는 값임을 알기에 디버깅이 비교적 쉬워지기 때문이다!

예제코드를 통해 확인해보도록 하자!

function getTotal() {
    const taxRate = 0.1;
    const total = 100 + (100 * taxRate);
    // 중간 코드 생략
    return `금액은 ${total}입니다.`;
}

taxRate와 total값이 const로 선언되었다.

누가봐도 상수로 선언된 값이기에 중간 코드가 무엇이 있든 간에 total 값은 변하지 않음을 알 수 있다.

function getTotalVar() {
    var taxRate = 0.1;

    var total = 100 + (100 * taxRate);

    // 중간 코드 생략
    return `금액은 ${total}입니다.`;
}


function getTotalLet() {
    const taxRate = 0.1;
    const shipping = 5.00;

    let total = 100 + (100 * taxRate) + shipping;

    // 중간 코드 생략

    return `금액은 ${total}입니다.`;
}

getTotalVar() 함수에서는 total 값이 중간에 바뀔 수도 있다.

심지어 var로 선언하는 경우 또 total로 선언해도 에러가 나지 않는다.

밑에 getTotalLet() 함수 같은 경우에도,

taxRate와 shipping이 const로 선언 되었음에도 불구하고, total 값이 let으로 선언되었기 때문에,

total 값은 바뀔 수 있다.

그렇기 때문에, 조작 되지 않는 값, 변하지 않는 값들은 const로 선언해주는 것이 좋겠다!

또한 const로 할당해도 값을 바꿀 수는 있다.

하지만 가능한 조작(mutation)을 피하는 것이 좋다.

무슨 말인지는 아래 코드를 통해 확인해보자!

function mutableDiscount(cart) {
    const discountable = [];

    // 중간 코드 생략

    for (let i = 0; i < cart.length; i++) {
        if (cart[i].discountAvailable) {
            discountable.push(cart[i]);
        }
    }
    return discountable;
}

mutableDiscount 함수에서 cart라는 변수를 받아(인덱스를 사용하는 것이 배열로 추정),

const로 선언된 discountable 변수에 cart값을 push 해준다.

언뜻보면 에러없이 잘 실행되는 듯 하나, 결국 for문에 따라서 discountable에 들어가는 값이 달라지게 된다.

앞서 말했듯, const는 조작되지 않고 변하지 않는 값들로 선언해주는 것이 좋다고 했다.

따라서 위와 같은 코드 작성법은 const로 선언하기 적합하지 않다.

function discountable(cart) {
    const discountable = cart.filter(item => item.discountAvailable);
    return discountable;
}

위 코드는 cart 배열을 받아 filter함수로 조건이 충족되는 값들을 discountable 변수에 담아준다.

이렇게 하면 조건이 변하지 않는 이상, discountable은 조작이 될지언정 명확한 값들이 들어가게 될 것이다.

조작을 최대한 피하는 것이 좋지만, 불가피 하다면 이렇게 const로 선언과 동시에 초기화 해주는 것을 선호한다!!!

tip2. let과 const로 유효 범위 충돌을 줄여라

반드시 변수를 재할당해야 하는 경우에는 let을 사용한다.

재할당을 할 수 있다는 점은 var와 동일하지만, 유효범위가 다르다.
let으로 선언한 변수는 중괄호를 벗어나면 변수가 존재하지 않는다.

function getLowestPrice(item) {
    var count = item.inventory;
    var price = item.price;

    if (item.salePrice) {
        var count = item.saleInventory;
        if (count > 0) {
            price = item.salePrice;
        }
    }

    if (count) {
        return price;
    }

    return 0;
}

이 코드에 문제점은 무엇인가?

2번 라인의 count 변수와 6번 라인의 count 변수가 같은 이름으로 변수 재할당이 이루어졌다.

이렇게 되면 2번 라인의 count와 6번 라인의 count 변수가 충돌이나는 경우가 생길 수 있다.

때문에 let으로 선언하여 블록 유효 범위를 구분하여 준다던지,

아예 const로 선언하며 아예 다른 이름으로 변수를 명명해주는 것이 가장 안전 할 것이다.

Reference

자바스크립트 코딩의 기술 요약 / 정리