본문 바로가기
javascript&jquery/javascript

<JS> 변수선언과 호이스팅

by 써-뇽 2024. 6. 22.

javascript의 변수(Variable) 선언 

1) var : 동일한 변수명으로 재선언, 재정의가 가능
- 함수안에서 선언 시 지역변수 / 그 외 전역변수로 인지
2) let : 동일한 변수명으로 재선언불가/선언 후 변수명으로만 재정의 가능
- { },( ), 함수 안에서 선언 시 지역변수로 정의/지역변수와 전역변수의 구분 필요
3) const : 동일한 변수명으로 재선언, 재정의 불가/선언문을 빼고 변수명으로도 재정의 불가
- javascript 사용 시 선택자의 선택 노드가 길어서 선택자를 저장하여 활용하게 됨
-변하고 싶지 않은 값 설정

1. 변수 선언 예시

var blog = '속닥속닥코딩';
console.log(blog); //속닥속닥코딩

let name = '선영';
console.log(name); //선영

const kakao = '카카오';
console.log(kakao); //카카오

2. 변수 재정의 예시(var & let 선언 시 값 추후 변경 가능)

/** 
* var & let의 경우 할당된 값 추후 변경가능
*/

var blog = '속닥속닥코딩';
console.log(blog); //속닥속닥코딩
blog = '코딩블로그';
console.log(blog); //코딩블로그

let name = '선영';
console.log(name); //선영
name = 'seonyoung';
console.log(name); //seonyoung

const kakao = '카카오';
console.log(kakao);
//📢const의 경우 할당된 값 추후 변경안됨

3. Hoisting 호이스팅 현상 :: 코드가 실행하기 전 변수/함수 선언이 해당 코드의 최상단으로 이동되는 것처럼 느껴지는 현상
- 설명하기에 한계가 있어 코딩알려주는누나 유튜브 링크 참조 바랍니다!🧐

console.log(name); //undefined = 변수에 값이 할당되기 전 호출(접근은 된 것)
var name = "선영";
console.log(name); //선영

console.log(blog); //Error = let, const의 경우 값이 할당되기 전 접근X
let blog = "속닥속닥코딩";

https://youtu.be/fETYLCU2YYc?si=GBao3SfSR9ucv5q3


💡자바스크립트를 처음 공부할 당시에는
var, let, const 를 통해 변수를 선언 및 할당하고 재할당하는 것만 생각하기 바빴는데
다시 공부를 하다보니 호이스팅 현상도 알게되었고
이에 따라 var, let의 차이도 확실히 존재하구나를 인지하게 되었다. 
얼른얼른 기초다시 튼튼하게 가보쟈고!💪