[자바스크립트 코딩의 기술] 1장

<자바스크립트 코딩의 기술>을 읽고 작성합니다.

 

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

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

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

const로 할당해도 값을 바꿀 수는 있다. 하지만 가능한 조작(mutation)을 피하는 것이 좋다.

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

// No mutation
const discountable = cart.filter(item => item.discountAvailable);

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

반드시 변수를 재할당해야 하는 경우에는 let을 사용한다. 재할당을 할 수 있다는 점은 var와 동일하지만, 유효범위가 다르다.
let으로 선언한 변수의 중괄호를 벗어나면 변수가 존재하지 않는다.

블록 유효 범위 변수로 정보를 격리하라

var로 변수를 선언한 경우에는 함수 내부 어디서든 접근이 가능하다.
호이스팅(hoisting) 컴파일 과정을 통해 변수가 선언되기도 전에 접근이 가능하다.

템플릿 리터럴로 변수를 읽을 수 있는 문자열로 변환하라

템플릿 리터럴 이란, 자바스크립트 표현식을 사용하여 문자열을 연결하고 새로운 문자열을 생성하는 문법
문자열과 변수를 연결할 때 유용한 문법이다.

1. 따옴표(')나 쌍따옴표(") 대신에 백틱(`)을 사용한다.
2. 변수에 할당한 문자열처럼 단순 문자열이 아닌 경우 특별한 지정자로 감싼다. ${...}

function greet(name) {
    return `Hi! ${name}`;
}
greet('Kim'); // 'Hi! Kim'

중괄호 내부에서 자바스크립트 동작을 수행하거나 여러 계산을 수행할 수 있지만, 가급적이면 중괄호 내부에서 많은 것을 하지 않는 것이 좋다.
코드가 필요 이상으로 어수선해질 수 있으므로 대규모 데이터 변환이 필요하다면 템플릿 리터럴 외부에서 처리한다.

// before
function generateLink(image, width) {
    const widthInt = parseInt(width, 10);
    return 'https://' + getProvider() + '/' + image + '?width=' + widthInt;
}
// after
function generateLink(image, width) {
    const widthInt = parseInt(width, 10);
    return `https://${getProvider()}/${image}?width=${widthInt}`;
}