자바스크립트 코딩의 기술 01 - 변수 할당

서적 자바스크립트 코딩의 기술을 읽고 정리하기.

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

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

1-1. 내용(Fact) 🔧

const는 한번 선언하면 재할당을 할 수 없다. const로 값을 할당하는 것은 선언 후 변경하지 않는다는 뜻이기 때문에 해당 변수를 신경 쓰지 않아도 된다는 뜻이다. 그렇지만 불변값이 되는 것은 아니다. 예를 들면 const에 객체를 할당한 후 객체 안의 내용은 바뀔 수 있다. 이점을 주의하자.

1-2. 코드 예시(Findings) 📚

var, let이 아닌 const를 사용했을 때 장점은 다음과 같다.

var, let을 사용한 경우

var fruit = 'apple';
let price = 1000;
// ...
// 1000줄의 코드를 작업했다.
// ...
return `오늘 구입할 ${fruit}의 가격은 ${price}원 입니다.`;

처음에 선언한 fruit과 price의 가격을 믿을 수 있을까? 중간에 1000줄의 작업 내용을 확인해보지 않는 이상 알 수 없다. var과 let은 값을 재선언할 수 있기 때문에 믿을 수가 없다.

const를 사용한 경우

const fruit = 'banana';
const price = 1500;
// ...
// 1000줄의 코드를 작업했다.
// ...
return `오늘 구입할 ${fruit}의 가격은 ${price}원 입니다.`;

const의 경우 값을 재선언할 수 없어서 처음 선언값인 ‘banana’와 1500을 얻을 수 있다.

예외

조금 전에 const는 불변값이 될 수 없다고 했다. 즉, 재할당을 할 수 없지만 값은 변할 수 있다. 그렇다면 값이 변할 수 있는 예외를 알아야하는데 그건 참조형(Reference type)값 - 객체, 배열 등을 다룰 때이다.

const bag = {
  wallet: 1000,
  items: ['apple'],
};

console.log(bag.wallet); // 1000
console.log(bag.items); // 'apple'

bag.wallet = 500;
bag.items.push('cheery');

console.log(bag.wallet); // 500
console.log(bag.items); // 'apple', 'cheery'

const의 선언값이 참조형일 때는 값이 변할 수 있다는 것은 염두하고 조심하자.

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

2-1. 내용(Fact) 🔧

부득이하게 값의 재설정해야한다면 let을 사용하자. var과 let은 값의 재할당이 가능하다. var은 어휘적 유효 범위를 가지고 let은 블록 유효 범위를 따른다. 어휘적 유효 범위는 예상치 못한 문제를 발생시킬 수 있다.

2-2. 코드 예시(Findings) 📚

var의 어휘적 유효 범위와 let의 블록 유효 범위의 차이를 알아보자.

var은 어휘적 유효 범위를 가진다고 했었다. 그래서 fruit 변수값을 계속 재할당하게 되어 마지막 console.log의 값이 apple이 되었다.

var fruit = 'banana';

console.log(1, fruit); // 1 'banana'
if (true) {
  var fruit = 'apple';

  console.log(2, fruit); // 2 'apple'
}

console.log(3, fruit); // 3 'apple'

let은 블록 유효 범위를 따른다. 전역에서 선언한 fruit과 if문 안에서 선언된 fruit는 서로 다르다. 그래서 마지막 console.log의 값이 banana로 유지된다.

let fruit = 'banana';

console.log(1, fruit); // 1 'banana'
if (true) {
  let fruit = 'apple';

  console.log(2, fruit); // 2 'apple'
}

console.log(3, fruit); // 3 'banana'

let은 작성한 코드의 의도에 맞게 동작한다.

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

3-1. 내용(Fact) 🔧

2번 내용의 연장으로 let이 아닌 var을 사용했을 때 반복문에서 발생할 수 있는 오류를 설명하고 있다.

3-2. 코드 예시(Findings) 📚

var를 사용할 때 생기는 문제점을 보여주는 유명한 예시이다.

for (var i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log('반복 횟수는 ', i);
  }, 1000);
}
// 반복 횟수는 5
// 반복 횟수는 5
// 반복 횟수는 5
// 반복 횟수는 5
// 반복 횟수는 5

해당 var의 변수 i값은 setTimeout의 함수에 의해 1초 후에 나타난다. 그 사이에 i값은 계속해서 증가하고, 반복문이 완료된 후 모든 i값이 5가 된 것으로 나타난다. 이것은 변수 i가 모두 같은 변수값을 가리키고 있기 때문이다.

반대로 let을 사용하면 반복을 진행해도 서로 다른 i값을 가지게 된다.

for (let i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log('반복 횟수는 ', i);
  }, 1000);
}
// 반복 횟수는 0
// 반복 횟수는 1
// 반복 횟수는 2
// 반복 횟수는 3
// 반복 횟수는 4

책에서 설명한 좋은 문구가 있는데 let을 이용하면 for문이 반복될 때마다 값을 잠근다. 그러므로 반복문을 사용할 때는 let을 사용하자.

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

4-1. 내용(Fact) 🔧

변수를 연결하지 않고 템플릿 리터럴을 사용하면 더 쉽고 간단하게 문자열을 표기할 수 있다.

4-2. 코드 예시(Findings) 📚

아래 코드가 일반적으로 변수를 연결하여 문자열을 표기하는 방법이다.

const painting = (author, tool, picture) => {
  return author + '가 ' + tool + '로 ' + picture + '을 그립니다.';
};

painting('고흐', '유화', '별이 빛나는 밤');
// 고흐가 유화로 별이 빛나는 밤을 그립니다.

템플릿 리터럴은 백틱(`)을 사용하며 변수명에 ${변수명}으로 입력한다.

const drawing = (author, tool, picture) => {
  return `${author}가 ${tool}로 ${picture}를 그립니다.`;
};

drawing('알폰스 무하', '채색석판화', '지스몽다');
// 알폰스 무하가 채색석판화로 지스몽다를 그립니다.

전자보다 후자가 더 간단하고 깔끔해 보인다.

👋