리마인드 차원에서 기초적인 스크립트를 공부하며 정리해볼까 한다.
👩🏻💻 전역변수와 지역변수
📌 전역변수(global)
유효범위(Scope)는 변수의 수명을 의미한다.
함수 밖에서 변수를 선언하면 그 변수는 전역변수가 된다.
var vscope = 'global'; // 전역변수
function fscope() {
alert(vscope);
}
fscope(); //global함수 fscope에서 vscope을 불렀을 때 함수안에 사용 된 변수가 없기에 전역변수인 vscope을 불러와 호출이 됐다.
📌 지역변수(local)
지역변수는 함수내에서 사용 된 변수를 말한다.
var vscope = 'global'; //전역변수
function fscope() {
var vscope = 'local'; //지역변수
}
console.log(vscope); //global위 코드에서는 global이 호출이 된다.
전역변수 vscope에서는 global이라는 스트링을 가지고 있고, 함수 fscope내에 지역변수 vscope는 local이라는 스트링을 가지고 있는데 지역변수는 함수내에서만 유효하기에 vscope를 콘솔로 찍어 봤을 때 global이 출력된다.
조금 더 이해하기 쉽게 작성하자면,
var vscope = 'global';
function fscope() {
var vscope = 'local';
var lv = 'local variables';
console.log(vscope);
}
fscope(); //local
console.log(vscope); //global
console.log(lv); // lv is not defined
함수 fscope안에서 vscope이라는 지역변수가 선언되어 있고 함수안에서 콘솔을 찍었기에 함수밖인 곳에서 fscope을 호출했을 때 fscope안에 작성 된 콘솔의 값인 local이 호출이 되고, 전역에서 콘솔로 vscope을 호출하면 전역으로 작성 된 변수 vscope의 global 스트링이 반환되는 것이다.
그리고 함수에 작성 된 지역 변수인 lv를 밖에서 호출했을 때 not defined가 뜬다.
그럼 만약 이렇게 작성이 된다면?
var vscope = 'global';
function fscope() {
vscope = 'local';
console.log(vscope);
}
fscope(); //local
console.log(vscope); //local
함수 fscope에서 vscope은 변수가 선언된 게 아니라 전역에 있는 vscope을 가지고와 local이라는 스트링을 재할당 한 것이다. 그래서 전역에서 쓰인 vscope을 콘솔로 호출했을 때 함수 fscope안에서 변경 된 값이 반환이 된다.
전역변수를 함수 안으로 가져와 값을 재할당하는 것은 버그의 원인이 될 수도 있고 사용하지 않는 게 좋지만 때에 따라서 필요하기도 하다. 필요한 경우에는 이유를 명확히 알고 있을 때 사용하자.
👩🏻💻 var, let, const
var는 함수 레벨 스코프(Function-level Scope), let과 const는 블록 레벨 스코프(Block-level Scope)라고 한다. 많은 사람들이 헷갈려하는 var, const, let 정확히 알고 가자!
📌 var
개발의 경력이 좀 되신 고인물(?)분들은 자바스크립트의 변수 선언은 var로만 한다고 배웠을 거다.
간략하게 정리하자면 var는 중복 선언이 가능하다.
var food = 'rice';
console.log(a); //rice
var food = 'salad';
console.log(a); //salad
var food = 'meat';
console.log(a); //meat똑같은 변수명인 a를 계속 선언하고 호출을 해도 콘솔 에러가 나지 않고 마지막에 넣은 값들이 반환된다. 간단한 코드에는 유연하여 편리하겠지만 많은 코드량이 필요한 프로젝트에서는 위험성이 크다.
그래서! ES6 이후에 var의 단점을 보완한 것이 let과 const이다.
📌 let
let과 const의 제일 큰 차이가 무엇일까? 재할당이다.
let은 변수를 중복으로 선언하는 것은 불가하지만 값을 재할당 할 수 있다.
let food = 'rice';
console.log(food); //rice
let food = 'salad';
console.log(food); //Uncaught SyntaxError: Identifier 'food' has already been declared이렇게 변수를 중복으로 선언하는 것은 불가하고
let food = 'rice';
console.log(food); //rice
food = 'meat'
console.log(food); //meat재할당은 가능하다.
📌 const
const는 재할당이 불가하다.
const food = 'rice';
console.log(food); //rice
const food = 'salad';
console.log(a); //Uncaught SyntaxError: Identifier 'food' has already been declared
food = 'meat'
console.log(food); //Uncaught TypeError: Assignment to constant variable.모든 변수 선언에는 const를 사용하면 되고, let은 재할당에만 사용하면 된다.
(var는 이제 잊도록 하자! 🙈)
