가장 바깥의 스코프를 전역 스코프(Global scope)라 부르며, 그 외의 안쪽을 지역 스코프(Local scope)라 부른다.
if문이나 for문, 함수(function) 처럼 중괄호{}를 기준으로 전역/지역 스코프를 구분
전역 스코프에서 선언한 변수는 지역 스코프에서 사용 가능
지역 스코프에서 선언한 변수는 전역 스코프에서 사용 불가
지역 변수는 전역 변수보다 더 높은 우선순위를 가진다.
let name = 'nine'; // 전역변수
function showName(){
let name = 'floor'; // 지역변수
console.log(name); // 두 번째 출력
}
console.log(name); // 첫 번째 출력
showName();
console.log(name); // 세 번째 출력
// 'nine'
// 'floor'
// 'nine'
let name = 'nine'; // 전역변수
function showName(){
name = 'floor'; // 지역변수
console.log(name); // 두 번째 출력
}
console.log(name); // 첫 번째 출력
showName();
console.log(name); // 세 번째 출력
// 'nine'
// 'floor'
// 'floor'
let username = 'kimcoding';
if (username) {
let message = `Hello, ${username}!`;
console.log(message); // 'Hello, kimcoding!'
}
console.log(message); // ReferenceError
let greeting = 'Hello';
function greetSomeone() {
let firstName = 'Josh';
return greeting + ' ' + firstName;
}
console.log(greetSomeone()); // 'Hello Josh'
console.log(firstName); // ReferenceError
스코프의 종류
블록 스코프(block scope)
중괄호를 기준으로 범위가 구분
함수 스코프(function scope)
function 키워드가 등장하는 함수 선언 및 표현식으로 구분
⚠️
화살표 함수는 블록 스코프
화살표 함수는 function 키워드를 사용하지 않았기 때문에 블록 스코프이다.
변수 선언 키워드(let, var, const)
var 로 변수를 선언하면 블록 스코프를 무시하고 함수 스코프만을 따른다. 단, 화살표 함수 형식의 블록 스코프는 무시하지 않는다.
→ var는 예전 방식의 변수 선언 키워드이며 블록 스코프를 무시하기 때문에 스코프의 범위가 불분명해짐
for (var i = 0; i < 5; i++){
console.log(i); // 다섯 번 반복
}
console.log('final i: ' + i); // 'final i: 5'
블록 단위로 스코프를 구분하면 훨씬 더 예측 가능한 코드를 작성할 수 있으므로 var보다 let 키워드를 사용 하는 것이 좋다.
for (let i = 0; i < 5; i++){
console.log(i); // 다섯 번 반복
}
console.log('final i: ' + i); // ReferenceError
var보다 let이 안전한 또다른 이유, 재선언
실제 코딩 시 변수를 재선언하는 경우는 대부분 버그이다. var는 재선언을 해도 아무런 에러도 내지 않지만, let은 재선언을 하면 문법 에러를 발생시키며 이는 재선언을 방지해준다.
상수를 정의 할 때, const
변하지 않는 값인 상수(constant)를 정의할 때는 const 키워드로 선언한다. const는 값의 재할당이 불가능하며 재할당 할 경우 TypeError를 내므로 의도하지 않는 값의 변경을 막을 수 있다.
변수 선언 시 주의 할 점
window 객체 (브라우저 only)
브라우저에만 존재하며 브라우저 창을 대표하는 객체. 단, 브라우저 창과 관계없이 전역 항목도 담고 있다.
함수 선언식으로 함수를 선언하거나 var로 전역 변수를 만들면 window 객체에서도 동일한 값을 찾을 수 있다.
var myName = 'nine';
console.log(window.myName); // 'nine'
function foo(){
console.log('bar');
}
console.log(foo === window.foo); // true
전역 변수는 최소화 할 것
전역변수는 가장 바깥 스코프에 정의한 변수이기 때문에 어디서든 접근이 가능하다. 단순히 생각하면 편리하다 느낄 수 있지만 실제 어플리케이션을 제작할 때는 내가 작성하지 않은 수많은 함수와 로직을 사용하기 때문에 의도치 않은 변경이나 문제, 즉 부수 효과(side effect)가 발생 할 수 있다. 전역 변수를 최소화 하는 것이 side effect를 줄이는 좋은 방법이다.
let, const를 주로 사용할 것
var는 블록 스코프를 무시하며 재선언을 해도 에러를 내지 않는다.
→ 같은 스코프에서 동일한 이름의 변수를 재선언하는 것은 버그를 유발한다
전역 변수를 var로 선언하는 것은 문제가 될 수 있다.
→ var로 선언한 전역 변수가 window 기능을 덮어씌워서 내장 기능 사용불가를 발생시킬 수 있다.
선언 없는 변수 할당 금지
선언 키워드 없이 변수를 할당하면 해당 변수는 var로 선언한 전역 변수처럼 취급된다.
function showAge(){
age = 90; // age는 전역 변수로 취급된다
console.log(age); // 90
}
showAge();
console.log(age); // 90
console.log(window.age); // 90
☝
실수 방지를 위한 Strict Mode
Strict Mode는 브라우저가 보다 엄격하게 작동하도록 만들어주기 때문에 더 안전하게 코드를 작성할 수 있는 하나의 방법으로 쓸 수 있다. 적용 방법은 .js 파일 상단에 'use strict' 를 입력하면 된다.
