JavaScript 에센셜 | 위니북스

변수의 특징

1. 변수 키워드와 특징

변수를 만들 때는 var, let, const라는 세 가지 키워드를 사용할 수 있습니다. 이 키워드들은 변수를 어떻게 다룰지를 결정합니다.

1.1. var

var는 변수를 선언하는 오래된 방법입니다. var로 만든 변수는 값을 재할당 할 수 있고, 같은 이름으로 다시 선언하는 재선언이 가능합니다. 또한 키워드를 생략하고 변수의 할당문을 작성하면 해당 변수는 전역 객체의 속성으로 등록됩니다. 이는 var로 변수를 선언한 것과 유사합니다.

var name = 'weniv'; name = 'licat'; // 재할당 // ... var name = 'wade'; // 재선언 console.log(name); company = 'weniv'; // 키워드 생략 console.log(company);

1.2. let

let은 ES6에 도입된 문법으로 변수를 선언할 때 사용합니다. let으로 만든 변수는 값을 재할당 할 수 있지만, 같은 이름으로 다시 선언하는 재선언이 불가능합니다.

let name = 'weniv'; name = 'licat'; // 재할당 // ... let name = 'wade'; // 같은 이름으로 변수를 다시 선언하면 에러가 발생합니다.

1.3.const

const는 값을 한 번 할당하면 다시 할당할 수 없는 상수를 만들 때 사용합니다. const로 만든 변수는 값을 재할당 할 수 없습니다. const도 ES6에 도입된 문법으로, let과 마찬가지로 재선언이 불가능합니다.

const name = 'weniv'; name = 'licat'; // 재할당 불가 // ... const name = 'licat'; // 같은 이름으로 변수를 다시 선언하면 에러가 발생합니다. console.log(name);

const로 만든 변수는 선언과 함께 값을 할당하지 않으면 에러가 발생합니다. 따라서, const로 만든 변수는 반드시 처음에 값을 할당해야 합니다.

const name; // 처음에 값을 할당하지 않으면 에러가 발생합니다. const name = 'weniv';

2. 변수 범위, 스코프

스코프는 변수의 유효 범위를 의미합니다. 즉, 변수가 어디서 접근 가능한지를 정의합니다. 자바스크립트에서는 크게 전역 스코프와 지역 스코프로 나누어집니다. 변수의 선언된 위치에 따라 스코프가 달라집니다.

전역 스코프(Global): 코드 어느 곳에서나 접근할 수 있는 변수
지역 스코프(Local): 특정 코드 블록 내에서만 접근할 수 있는 변수
1. 함수 스코프(Function): 함수 내에서만 접근할 수 있는 변수. var로 선언된 변수는 함수 스코프를 가집니다.
2. 블록 스코프(Block): 블록 내에서만 접근할 수 있는 변수. let과 const로 선언된 변수는 블록 스코프를 가집니다.

2.1 전역 스코프

코드 어디서든 접근할 수 있는 변수를 전역 스코프라고 합니다. 전역 스코프로 선언된 변수는 어디서든 접근할 수 있습니다. var을 이용하여 선언된 변수와 함수 선언문은 전역 스코프를 가집니다.

var value = 'hello'; function func1() { console.log(value); } func1(); console.log(value);

이처럼 전역 스코프를 갖는 변수는 브라우저의 최상위 객체인 window를 이용해 어디서든 접근할 수 있습니다.

var value = 'hello'; function func1() { let value = 'world'; console.log(value); console.log(window.value); }

2.2. 지역 스코프

2.2.1. 함수 스코프

함수 내에서 선언된 변수는 함수 스코프를 가집니다. 함수 스코프로 선언된 변수는 함수 내에서만 접근할 수 있습니다. 함수 외부에서는 접근할 수 없습니다.

function func1() { var value = 'value'; console.log(value); } func1(); // 함수 외부에서는 접근할 수 없습니다. console.log(value);

2.2.2. 블록 스코프

let과 const로 선언된 변수는 블록 스코프를 가집니다. 블록 스코프로 선언된 변수는 중괄호({})로 둘러싸인 범위 내에서만 접근할 수 있습니다.

{ let value = 'hello'; console.log(value); }

블록은 어디서 사용되나요?

자바스크립트 문법에는 여러줄의 코드를 하나로 묶어주는 단위인 블록({})이 존재합니다. 블록은 코드의 범위를 나타내며, let과 const 키워드로 만든 블록 안에서 선언된 변수는 블록 밖에서 접근할 수 없습니다. 코드 블록은 함수, 조건문, 반복문 등에서 사용됩니다.

아래 예제에서 중괄호는 if문에서 사용되었습니다. if문은 조건이 참일 때 중괄호 안의 코드를 실행합니다. 아래 코드를 한 번 실행해보세요.

if (true) { var varValue = 'varValue'; let letValue = 'letValue'; console.log(varValue); console.log(letValue); } console.log(varValue); console.log(letValue);

3. 키워드 선택하기

ES6(2015) 이후에는 var보다는 let과 const을 주로 사용합니다. 그 중에서도 const를 사용하는 것을 보다 권장합니다. 그 이유는 다음과 같습니다.

의도하지 않은 값의 변경 방지 const를 사용하면 변수의 값이 한 번 할당되면 재할당 될 수 없습니다. 따라서 의도하지 않은 값의 변경을 방지할 수 있습니다. 이것은 코드의 예측 가능성을 높이며, 따라서 에러가 발생되는 상황(버그)을 줄일 수 있습니다.
가독성 향상

const를 사용하면 다른 개발자들이 변수의 값이 변경될 가능성이 없다는 것을 빠르게 인지할 수 있으며, 반드시 초기화를 해야하기 때문에 어떤 데이터가 사용되는지 초기에 확인 할 수 있습니다. 이것은 코드의 가독성(잘 읽히는 것)을 높이고 유지 보수성(누군가 수정을 잘 할 수 있게 하는 것)을 향상시킵니다.

그러나 변수의 가리키는 값이 반드시 변경되어야 하는 경우에는 let을 사용해야 합니다. 예를 들어 산술 연산과 같은 연산자로 값이 변경이 되어야 할 때에는 let을 사용해야 합니다. 따라서 const와 let을 적절하게 사용하여 코드를 작성하는 것이 중요합니다.

저는 강의할 때 이렇게 말합니다. const로 선언하고 문제 생기면 let으로 변경하세요!