2020-09-28
서적 자바스크립트 코딩의 기술을 읽고 정리하기.
const는 한번 선언하면 재할당을 할 수 없다.
const
로 값을 할당하는 것은 선언 후 변경하지 않는다는 뜻이기 때문에 해당 변수를 신경 쓰지 않아도 된다는 뜻이다.
그렇지만 불변값이 되는 것은 아니다. 예를 들면 const
에 객체를 할당한 후 객체 안의 내용은 바뀔 수 있다.
이점을 주의하자.
var
, let
이 아닌 const
를 사용했을 때 장점은 다음과 같다.
var fruit = 'apple';
let price = 1000;
// ...
// 1000줄의 코드를 작업했다.
// ...
return `오늘 구입할 ${fruit}의 가격은 ${price}원 입니다.`;
처음에 선언한 fruit과 price의 가격을 믿을 수 있을까?
중간에 1000줄의 작업 내용을 확인해보지 않는 이상 알 수 없다.
var
과 let
은 값을 재선언할 수 있기 때문에 믿을 수가 없다.
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의 선언값이 참조형일 때는 값이 변할 수 있다는 것은 염두하고 조심하자.
부득이하게 값의 재설정해야한다면 let
을 사용하자.
var
과 let
은 값의 재할당이 가능하다.
var
은 어휘적 유효 범위를 가지고 let
은 블록 유효 범위를 따른다.
어휘적 유효 범위는 예상치 못한 문제를 발생시킬 수 있다.
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
은 작성한 코드의 의도에 맞게 동작한다.
2번 내용의 연장으로 let
이 아닌 var
을 사용했을 때 반복문에서 발생할 수 있는 오류를 설명하고 있다.
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
을 사용하자.
변수를 연결하지 않고 템플릿 리터럴을 사용하면 더 쉽고 간단하게 문자열을 표기할 수 있다.
아래 코드가 일반적으로 변수를 연결하여 문자열을 표기하는 방법이다.
const painting = (author, tool, picture) => {
return author + '가 ' + tool + '로 ' + picture + '을 그립니다.';
};
painting('고흐', '유화', '별이 빛나는 밤');
// 고흐가 유화로 별이 빛나는 밤을 그립니다.
템플릿 리터럴은 백틱(`)을 사용하며 변수명에 ${변수명}
으로 입력한다.
const drawing = (author, tool, picture) => {
return `${author}가 ${tool}로 ${picture}를 그립니다.`;
};
drawing('알폰스 무하', '채색석판화', '지스몽다');
// 알폰스 무하가 채색석판화로 지스몽다를 그립니다.
전자보다 후자가 더 간단하고 깔끔해 보인다.
👋