Hoisting과 변수

변수에 본격적으로 들어가기 전,
밑에서 계속 나오게 될 Hoisting에 대해 알아가보도록 하자!

** scope도 아직 배우지 않은 개념이지만 일단은 간단하게 {}라고 생각하고 넘어가자! 나중에 클로저와 함께 다룰 예정이다😿 (클로저 넘나 어려운것,,,ㅠㅠ)

Hoisting

console.log(age); // undefined
age="4";
var age;
console.log(age); // 4

이게 가능하다고..? 싶겠지만 놀랍게도 가능하다!

var age;
console.log(age); // undefined
age="4";
console.log(age); // 4

hoisting?

hoisting이란 어디에 선언했는지 상관없이 변수 선언을 제일 위로 끌여 올려준다. 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것으로 실제 메모리에서는 변화가 없다

hoisting 대상

• var 변수 선언과 함수 선언문에서만 호이스팅이 일어난다.
• var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.
• let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.

hoisting 사용

• 코드의 가독성과 유지보수를 위해 호이스팅이 일어나지 않도록 한다.
• 호이스팅을 제대로 모르더라도 함수와 변수를 가급적 코드 상단부에서 선언하면, 호이스팅으로 인한 스코프 꼬임 현상은 방지할 수 있다.
• let/const를 사용한다.

var

🙋🏻‍♀️ 개요

• es6전에 사용하던 데이터 타입으로 hoisting이 일어난다
• block scope가 유효하지 않다

//hoisting
console.log(age); // undefined
age="4";
var age;
console.log(age); // 4

//block scope
{
  var age;
  age="4";
}
console.log(age) // 4

💁🏻‍♀️ 왜 알아야할까?

대부분의 브라우져들이 es6를 지원하지만
아직까지 es6를 지원하지 않는 브라우져가 있다
바로... IE....!
물론 전세계의 1%도 안돼는 인구가 쓰기는 하지만 고려해봐야 할 사항이긴하다 (바벨을 이용하거나 버전을 낮춰 배포하는 방법이 있긴하다)
또한, 아주 오래전에 작성된 open api나 문서들 (그치만 유용하게 standared 처럼 사용되는 문서들)은 다 var을 쓰기때문에 아직은 var이 어떻게 작동하는지 이해하고 있어야한다.

let

🙋🏻‍♀️ 개요

• added in ES6
• hoisting이 일어나지 않는다
• block scope와 global scope가 유효하다
• 값 재할당이 가능하다

let globalName = 'all name';
{
  let name = "hojjung";
  console.log(name);
  name = "hello";
  console.log(name);
  console.log(globalName);
}
console.log(name); // ""
console.log(globalName); // all name

block안에 작성한 변수는 block안에서만 사용 할 수 있다 (block scope)
반면 global scope는 블럭 밖에서 선언한 변수로 전역에서도 사용이 가능하고 block안에서도 사용이 가능하다
그렇다고 모든 변수를 전역변수로 선언하게 되면 코드가 꼬이는 경우가 있으므로 꼭! 필요한 변수들만 전역변수로 선언하자!

let age = "26";
console.log(age); // 26

age="25"
console.log(age); //25

값의 재할당이 가능하다
선언했을때의 값(26)과 재할당 했을 때의 값(25)이 다르게 나온다!

const

🙋🏻‍♀️ 개요

• added in ES6
• hoisting이 일어나지 않는다
• block scope와 global scope가 유효하다
• 값 재할당이 불가능하다

const age = "26";
console.log(age); // 26

age="25"
console.log(age); // TypeError: "age" is read-only

값의 재할당이 불가능하다
재할당이 불가능해짐으로 보안이 강화 될 수 있고, 개발자의 실수도 방지 할 수 있다