[Javascript] 변수(const, var, let)와 전역공간

선언과 할당

1. var (중복선언 가능)

var a = 10; 
console.log(a); // 10 
var a = 20; 
console.log(a); // 20
var a = 30; 
console.log(a); // 30

변수 선언 여러번 가능

 

2. let (중복선언 불가능, 재할당 가능)

// let 중복 선언 
let a = 10; 
let a = 20; // SyntaxError: Identifier 'a' has already been declared

// 재할당
let a = 10; 
console.log(a); // 10 
a = 20; 
console.log(a); // 20
a = 30; 
console.log(a); // 30

 

중복 선언은 불가능하나 재할당은 가능

 

3. const (중복선언 불가능, 재할당 불가능)

//중복선언, 재할당 불가능
const c = 111; 
c = 222; // TypeError: Assignment to constant variable.

// const는 반드시 초기값 할당하기
const a = 10;
const b // SyntaxError: Missing initializer in const declaration

 

그렇다면 레퍼런스 객체(배열이나 json) 같은 경우는?

// 객체
const person = {
    name: 'yun',
    age: '20'
  }
  
  person.name = 'lee'
  person.age = '30'
  
  console.log(person) // { "name: "lee", "age: "30"}
  
  // 배열
  const animal = [{
    name: 'dog',
    age: '2',
  }]
  
  animal.push({
    name: 'cat',
    age: '11',
  })
  
  console.log(animal) // [{name: 'dog', age: '2'}, {name: 'cat', age: '11'}]

 

객체, 배열같은 레퍼런스 객체들을 조작할 때는 이상이 없다. 단! 재할당만 하지 않으면 된다.

---

스코프(Scope)

스코프 : 유효한 참조 범위

1. var : 함수 레벨 스코프

// function 안의 var
function hello(){ 
  var a = 10; 
  console.log(a); 
} 

hello(); // 10 
console.log(a); //ReferenceError: a is not defined

// if 함수 안의 var 
if(true) {
  var a = 10;
  console.log(a);
}
console.log(a);

function 안의 var : 함수 안에서만 참조 가능

if문, for문, while문, try/catch 문 내부에서 var : 전역 변수

 

2. let, cost: 블록 레벨 스코프

// if문 안에서의 let
if(true) { 
   let a = 10;
   console.log(a); // 10
 }

 console.log(a) // Uncaught ReferenceError: a is not defined
 
// function 안에서의 let
function hello() {
  let a = 10;
  console.log(a); // 10
}
console.log(a); // a is not defined

function 안, if문, for문, while문, try/catch 문 내부에서 var : 지역 변수

 

호이스팅(Hoisting)

호이스팅(Hoisting) : 코드 평과 과정

1. var: 변수 호이스팅이 발생한다.

console.log(a) // undifined

var a = 10;

console.log(a) // 10

코드 실행 전에 자바스크립트 엔진이 미리 1) 변수를 선언하고, 2) undefined로 초기화 해 둔다.

 

2. let, const: 변수 호이스팅이 발생한다. 하지만 다른 방식으로 작동한다.

console.log(a) // Uncaught ReferenceError: Cannot access 'a' before initialization

let a = 10;

console.log(a)

코드 실행 전에는 1) 변수 선언만 해두며, 2) 초기화는 코드 실행 과정에서 변수 선언문을 만났을 때 수행한다.

---

전역공간

전역공간?

최상위 공간

javascript에서는 브라우저 이고 NodeJs에서는 global이다.

var globalVar = 'global';
console.log(globalVar); // window 객체 안 들어간다
console.log(window.globalVar); // 다른 js 페이지에서도 접근 가능하다

이렇게 var로 선언된 것들은 window 객체 안으로 들어간다. 그래서 다른 페이지에서도 접근이 가능하다.

 

var setTimeout = 'setTimeout';
function setTimeout() {
  console.log('function');
}

게다가 setTimeout이라는 이미 window에서 선언된 함수이름으로 선언할 수도 있다. (컴파일시 에러가 난다)

---

결론

 

전역공간은 더럽히지 않는게 좋다. 따라서 아래 몇가지는 지켜주는 것이 좋다.

1. 전역 변수를 만들지 말 것

2. window, global은 조작하지 말 것

3. const, let, IIFE, Module, Closure, 스코프를 나누는 방법에 대해 고민할 것

 

 

참고로 구글의 자바스크립트 스타일 가이드에 다음과 같은 문장이 있다.

Use const and let

Declare all local variables with either const or let.

Use const by default, unless a variable needs to be reassigned.

The var keyword must not be used.

 

1. const와 let을 이용해서 변수를 선언라.

2. 값을 재할당하는 경우가 아니라면, const를 디폴트로 사용하라.

3. var는 절대로 사용하지 말라

 

 https://google.github.io/styleguide/jsguide.html#features-use-const-and-let  

 

 

---

Reference

https://curryyou.tistory.com/192 [카레유]