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

시작하며

저는 자바스크립트 코딩의 기술이라는 책에서 1장 변수할당으로 의도를 표현하라의 느낀점 그리고 알게된점 아쉬운점등을 적어보려고 합니다 제가 이해가 가장 잘 됬고 인상 깊었던 tip 두가지를 적어 보려고 합니다

tip1

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

자바 스크립트에서 변수 할당하는 방법은 3가지가 있습니다 var,let,const 각각의 방법 마다 적절한 사용법 이 조금씩 다릅니다. const는 문맥 내에서 재할당할 수 없는 변수 선언입니다. 한 번 선언하면 변경할 수 없습니다. const를 사용하는 경우에는 대표적으로 불변하는 값 파이등에 사용합니다. 또한 const를 기본으로 선택하면 좋은 점은 값을 할당하고 변경하지 않을 것이라는 점을 표시하면 코드를 훑어볼 때 해당 변수를 신경 쓰지 않아도 된다는 것을 알 수 있습니다.

만약 코드에서 버그를 수정하려고 훑어보고 있습니다 첫번째 프로그램은 const 두번째 프로그램은 var을 사용했습니다

const taxRate = 0.1;
const total = 100 + (100 * taxRate);
// 100행의 코드를 건너 뛰었습니다.
return '구매금액은 ${total}입니다.';

var taxRate = 0.1;
var total = 100 + (100 * taxRate
// 100행의 코드를 건너뛰었습니다
return '구매금액은 ${total}입니다.';

두 코드는 거의 비슷해 보이지만 첫 번째 코드가 훨씬 이해하기 쉽습니다. 100줄 정도 되는 변경이 많은 엄청난 양의 코드가 있다고 가정해보면 첫번째 코드는 "구매금액은 110입니다."가 반환 되는 것을 알 수있습니다. 두번째 예제 코드는 반환되는 값이 무엇일지 알기 어렵습니다. 반복문,조건문처럼 값을 변경할수 있는 코드가 있는지 100줄의 코드를 살펴보며 알아내야합니다. 따라서 var을 쓰는건 좋은 방법이 아닙니다.

tip2

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

만약 값이 변경된다면 무엇을 써야 할까요? 바로 let입니다 let은 재할당을할 수 있다는 점에서 var과 유사합니다. 그렇지만 var은 어휘적유효범위를 따르지만 let은 블록 유효범위를 따릅니다 여기서 유효 범위란 변수의 접근성과 생존 기간을 의미 합니다 다르게 말하면 변수가 가지고 있는 참조 범위를 뜻합니다. 다음은 가장 저렴한 상품을 찾는 코드입니다

• 재고가 없으면 0을 반환합니다.
• 어떤 상품이 할인 중이고 재고가 있다면 할인 가격을 반환합니다.
• 어떤 상품이 할인 중이 아니거나 할인 중이라도 할인 상품의 재고가없다면 정상 가격을 반환합니다.

	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가 문제입니다. 할인 가격이 있으므로 다음 if문으로 넘어 갑니다. 이때 5행에서 변수 count를 다시 선언 합니다. 여기서 문제는 할인 상품 재고가 없기 때문에 count에 0이 들어갑니다. 10행의 if문으로 넘어가면 할인상품과 정상삼품 모두 재고가 없는 것 처럼 보입니다. 실제론 재고가 있음에도 불구하고 재고를 확인하는 과정에서 오류가 있어 잘못된 값을 반환 했습니다. 사소한 실수이지만 실제로 서비스가 운영되는 상황이라면 찾기 어려울 수 있습니다.

	function getLowestPrice(item) {
    const count = item.inventory;
    let price = item.price;
    if (item.salePrice) {
        const saleCount = item.saleInventory;
        if (saleCount > 0) {
            price = item.salePrice;
        }
    }
    if (count) {
        return price;
    }
	return 0;
}

최종 수정 코드 입니다. 위의 경우 변수 count를 선언하기 위해 if블록 안에서 let을 사용했기 때문에 함수를 시작할 때 선언한 count와 충돌하지 않습니다.

let과 const는 같은 이름의 변수를 다시 선언할 수 없습니다. var은 같은 유효 범위에서 같은 이름의 변수를 다시 선언할 수도 있습니다. 예를 들어 10행에 var price = 1이라고 선언했다가 20행에 var price = 5라고 다시 선언해도 충돌이 발생하지 않아 의도치 않게 변수 이름을 재사용하면 문제가 발생할 수 있습니다. 따라서 let과 const를 더 많이 사용합니다.

느낀점

저는 항상 무슨 언어든 코딩을 배우면 제일 먼저 배우게 되는 변수 파트를 읽고 글로 써보았는데 뭐든 쉬운건 없다는 말처럼 생각 보다 어려운 부분들은 어려웠고 c언어를 주로 배우다가 js를 배우게 되니까 비슷한점도 많고 헷갈리는 부분도 많았습니다 유효범위와 같이 처음 보는 개념도 알게 되었고 var let const의 차이점 그리고 어떤 상황에서 써야하는지 정확히 알지 못했지만 이 책을 읽으면서 좀 더 자세히 알게 된거 같아 좋았습니다

아쉬웠던 점

제가 평소에 책을 잘 안 읽어서 글로 배우려니까 헷갈리고 집중도 잘안되서 이해하기 어려운 부분이 많아 구글링도 해보면서 책을 읽었습니다 그래서 확실히 평소에 책을 많이 읽는 습관을 들이면 좋을거 같고 아직 안 읽은 부분이 많아서 더 노력해서 읽어야겠습니다
책에 대한 아쉬웠던 점은 비전공자 코딩을 처음해보는 사람 이제 막 입문하는 사람을 위한 책은 아닌거 같습니다 기본적인 반복문이나 배열 조건문 등은 상식으로 알고 있어야 이해 하기 쉽고 또 생각보다 어려운 내용이 많은데 쉽게 설명할 수 있는 부분에서도 말을 길고 어렵게 해서 오히려 이해 하기 힘든 부분이 있었습니다 이런 부분은 좀 아쉽게 느껴졌습니다.