JavaScript_중급ver - 변수

먼저 변수를 쉽게 이해하기 위해서 호이스팅에 대한 설명부터 드리겠습니다.

호이스팅이란?

코드가 실제로 위로 올라가진 않지만, 올라간 것 처럼 적용되는 현상을
호이스팅(hoisting)이라고 한다.

1. 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동
2. 호이스팅은 스코프("{}") 단위로 일어난다.

ex) 호이스팅 예시

var name;			//호이스팅(hoisting)

console.log(name);	//undefined

name ='Mike';

위의 코드 2번째 줄에서 console.log로 출력했을 때, undefiend가 출력되는 것을 확인할 수 있다.

이는, 선언은 호이스팅이 되지만, 할당은 호이스팅이 되지 않기 때문이다.

할당은 name='Mike'; (3번째 줄) 에서 처리된다.

TDZ(Temporal Dead Zone)

console.log(name)		//TDZ, 사용 불가능
////////////////////////////////////////////////////

const name ="Mike"		//함수 선언 및 할당

console.log(name)		//사용가능

let age = 30;

function showAge(){
	console.log(age);
    
    let age = 20;
}

showAge();

변수

변수선언 방법은 3가지가 있다.

1. const
2. let
3. var

var를 알아보자

1, var는 선언하기 전에 사용할 수 있다.
2. var는 선언과 초기화가 동시에 일어난다.

var는 한번 선언된 변수를 다시 선언할 수 있다.

	var name = 'Mike';
    console.log(name);	//Mike
    
    var name = 'Jane';	//Jane
    console.log(name);


	let name = 'Mike';
    console.log(name);	//Mike
    
    let name = 'Jane';	//error
    console.log(name);

• var의 변수 생성 과정

1. 선언 및 초기화 단계
2. 할당 단계

*초기화:undefined를 할당 해주는 단계

let을 알아보자

let의 변수 생성 과정
1. 선언단계
2. 초기화 단계
3. 할당 단계

let은 호이스팅 되면서 선언단계가 이뤄지지만, 초기화 단계는 코드가 도달했을 때 이뤄지기 때문에 reference error가 발생하는 것이다.

const를 알아보자

const 변수 생성 과정
1.선언 + 초기화 + 할당

ex)

let name;
name = 'Mike';

var age;
age = 30;

const GENDER= "male"; // 문제x

const GENDER;	// error, 선언하면서 바로 할당하지 않았기 때문
GENDER = "male";

//출력결과
Uncaught SyntaxError: Missing initializer in const declaration

스코프

var : 함수 스코프(function-scoped)
let, const : 블록 스코프(block-scoped)

함수 스코프란?

함수 내에서 선언된 변수만 그 함수의 지역변수가 되는 것.

블록 스코프란?

모든 코드블록에서 선언된 변수는 코드블록 내에서만 유효하며 외부에서는 접근할 수 없다.
*함수, if문, for문, while문 try/catch문 등

function add(){
	//Block-level Scope
}

if (){
	//Block-level Scope
}

for (let i=0; i<10; i++){
	//Block-level Scope
}

1.var는 스코프에 상관 없이 사용할 수 있지만, let과 const는 불가능하다.
ex) 예시

const AGE = 30;

if(AGE>19){
	var txt = '성인';
}
console.log(txt);	//'성인'

const AGE = 30;

if(AGE> 19){
	const txt = '성인';
}
console.log(txt)	// undefined

2.하지만 var도 함수 내에서 사용된다면 외부에서 사용할 수 없다.
ex) 예시

function add(num1, num2){
	var result = num1 + num2;
}
add(2,3);

console.log(result);

//출력결과
Uncaught ReferenceError: result is not defined