var let const

🔎 var / let / const

변수란 ? 자료를 임시 저장하는 공간
오브젝트, 어레이, 함수 등 모든 자료들을 담을 수 있다.

var name = 'kim'

var name 이라는 부분은 선언, name = 'kim'을 할당한다고 표현한다.
변수는 var, let, const라는 3개 키워드를 이용한다.
3개의 키워드는 선언, 할당, 범위에서 차이가 있다.

1. var

재선언 O / 재할당 O / 범위 function

var name = 'kim';
var name = 'park'; // 재선언가능

name = 'lee' // 재할당가능

function test(){
  var name = 'kim';
  console.log(name);  // 'kim'출력
}

console.log(name); // 에러

var 변수는 function 내에서 만들면 function 내에서만 쓸 수 있다.

2. let

재선언 x / 재할당 O / 범위 {중괄호}

let name = 'kim';
let name = 'park'; // 에러 재선언불가

name = 'lee' // 재할당가능


if ( 1 == 1 ){
  let age = '20';
  console.log(age); // '20' 출력 
}

console.log(age); //에러

let 변수는 중괄호 (for, if, function 등) 안에서 만들면 중괄호 내에서만 쓸 수있다.

3. const

재선언 x / 재할당 X / 범위 {중괄호}

const name = 'kim';
const name = 'park'; // 에러 재선언 불가

name = 'lee' // 에러 재할당 불가

if ( 1 == 1 ){
  const age = '20';
  console.log(age); // '20' 출력 
}

console.log(age); //에러

const는 constant의 약자로(상수, 변하지 않는 값) 재선언, 재할당이 불가하다.
let과 마찬가지로 중괄호안에서 만들면 중괄호 내에서만 쓸 수있다.

🤔 const 변수에 오브젝트를 담으면?

const object = { name : 'Kim' }
object.name = 'Park'; //가능 

const 변수에 오브젝트를 담으면 오브젝트 내의 데이터는 변경 가능하다.
엄밀히 따지면 변수 자체를 재할당 한것이 아닌 오브젝트 내부 값을 변경한 것

const object = { name : 'Kim' };
Object.freeze(object);

object.name = 'Park'; //변경되지 않음

완전 변경불가능한 오브젝트를 만들고 싶다면 Object.freeze() 사용
하지만 오브젝트 내의 오브젝트까지 freeze해주진 않는다.

🔎 자바스크립트 변수, 함수의 Hoisting 현상

변수, 함수의 선언을 변수 범위, 함수 범위 맨위로 끌고 오는 현상

// 변수선언

  var name = 'Kim';   


//자바스크립트가 해석하는 순서

  var name;
  name = 'Kim';

var 뿐만 아니라 let, const로 만들어도 hoisting현상이 일어나지만 약간의 차이가 있다.

//예제 1
console.log(name); // undefined
var name = 'kim';

//예제 2
console.log(name); // 에러
let name = 'kim';

undefined는 변수가 선언 되었는데 값이 할당되지 않았을 때 출력되는 일종의 자료형
var 변수는 hoisting 시 undefined가 할당된다.
let, const 변수는 hoisting 되지만 var 변수처럼 지동으로 undefined 가 할당되지 않는다.(temporal deadzone / uninitialized)

🔎 전역변수와 변수의 참조

변수의 특징은 바깥에 있는 변수는 안쪽에서 자유롭게 참조 가능하다. (closure)

var age = 20

function 함수(){
  console.log(age) //참조
}

함수(); // 20 출력

전역변수란 모든 함수나 if문, for문 내부에서 공통적으로 사용할 수 있는 (참조할 수 있는) 유용한 변수를 뜻한다.
var 키워드는 전역변수를 만들면 window에 보관된다. (전역 함수도 window에 자동으로 보관된다.)

var age = 20;

console.log(age); // 20 출력
console.log(window.age) // 똑같이 20 출력

전역변수를 조금 더 엄격하게 관리하거나 구분짓고 싶으면 window를 활용한다.

window.age = 20;  //전역변수만들기
console.log(window.age);  //전역변수사용하기
window.age = 30;  //전역변수변경하기