14.Variable - ES6

---

• 기존에는 var 로만 변수 선언을 하였으나, ES6 이후에는 let, const 가 생겼습니다.

1.variable 특징

• variable 마다 3가지 특징이 있습니다 : 선언, 할당, 범위

var

변수명	재선언	재할당	범위
var	가능	가능	function
let	불가능	가능	{ }
const	불가능	불가능	{ }

재선언

// var 는 아래와 같이 재선언이 가능
var name = 'kim'
var name = 'park'


// let 과 const 재선언이 안됨니다

let name = 'kim'
let name = 'park' 
const name = 'kim'
const name = 'park' 

재할당

// var 와 let 은 재할당이 됨
var name = 'kim'
name = 'park';

let age = 20
age = 30;


// const 는 재할당이 안됨

const phone = 01035421542

phone = 01542134 // Error

• 단, const 로 object를 만들었을때 oject 내부 값을 변경해도 에러가 안남니다. (const 변수 자체를 재할당 한게 아닌거임)

• 참고로 수정 불가능한 object 를 사용하려면 Object.freeze() 을 을 사용해서 불변한 object 를 만들 수 있습니다.

const people = { name: 'kim'}

Object.freeze(people);

people.name = 'park' // 출력 하면 {kim} 으로 나옴 

범위

• var 의 유효 범위는 function 내에서 이고, let, const 는 그보다 좁은 {} 안에서만 유효 범위를 가지고 있습니다.

2.Hoisting

• 변수를 만들었을 때, hoisting 이라는 현상이 나타 납니다.

var age = 30;

// 라고 쓰면 JS 는 이것을 나눠서 해석함

var age;


age = 30;

// 변수의 Hoisting 현상은 변수의 선언을 변수 범위 맨 위로 끌로 가능 현상을 말함
// 변수를 만나면 선언 부분을 강제로 맨위로 끌어 올림니다

console.log(age); //  먼저 출력하면 undefined -> 할당은 했는데 값이 없는 것 왜냐면 hoisiting 때문에 var age 부분만 맨 위로 올라 갔기 때문임 

var age = 30;

console.log(age);

• 함수도 변수와 마찬가지로 hoisting 이 발생함

3.변수 동시에 여러개 만들기

• 개별적으로 변수를 사용할 수 도 있지만 동시에 여러개 만들수도 있습니다.

const age = 20;
const name = 'kim';
const sex = 'male';

const age = 20, name = 'kim', sex = 'male';

4.전역변수

• 전역변수 : 모든 곳에서 쓸 수 있는 변수를 말합니다.

4-1.함수 밖에서 쓰는 변수

// 함수 바깥에서 사용된 변수는 함수 안에와 바깥 쪽에서도 같이 사용할 수 있음 (전역변수)
let age = 20;

function def() {
  let name = 'kim' // function 안에서 유효 범위기 때문에 (지역변수 임)
  console.log(age)
}

def()

console.log(name) // 출력이 안됨

4-2.window 를 사용하서 만드는 전역변수

• window 는 JS 기본 함수를 담은 큰 {object} 임 (getElementByID(), aleart(), console.log(), DOM 등등 을 담은 object 임)

• 지역변수와 확실한 구분을 위해서 window.변수명 을 사용하는 것을 권장합니다 (왜냐면, 육안으로 봐도 바로 구분이 가능하기 때문임니다)

// 전역변수를 만들 수 있는 다른 방법. (window 로 전역변수 만들기)

window.sex = 'male';

function ch() {
  console.log(window.sex)
}

ch() // male 로 출력 됨

Reference

• poiemaweb - https://poiemaweb.com/js-data-type-variable