자바스크립트 변수 정의

변수 정의

자바스크립트에서 변수를 정의하려면 var , const, let 키워드가 존재합니다.

 

 

변수를 정의할 때 변 수 앞에 키워드를 작성하면 됩니다. 하지만 값을 넣지 않고 콘솔에 로그를 적는다면 undefined라고 정의되지 않는 변수라고 화면에 출력됩니다.

var myValue;
console.log(myValue); <!-- undefined -->

 

 

변수 안에 값을 넣는다면 콘솔에는 Some Text 라고 출력이 됩니다.

var myValue = "Some Text"; 
console.log(myValue); <!-- Some Text -->

 

 

이 부분도 위에 변수 선언하는 방법과 같습니다.

var myValue; myValue = "Some Text"; 
console.log(myValue); <!-- Some Text -->

 

 

var 과 let은 hoisting 이냐 아니냐의 차이고 const는 변하지 않는 변수를 뜻합니다. 코드 상에서 봤을 때에는 var과 let의 차이가 없어 보입니다. 하지만 컴파일하는 단계에서 var과 let의 차이는 두드러집니다. 

var myVarString = "hi hi"
let myLetString = "hi"

 

const num = 1 ;
num = 3; / x

 

밑에 var 과 let의 차이인 hoist를 적어놓은 글입니다. 

호이스팅을 변수 및 함수 선언이 물리적으로 작성한 코드의 상단으로 옮겨진다고 생각하지만 실제로는 그렇지 않습니다. 변수 선언은 컴파일 단계에서 메모리에 저장되지만 코드에서 입력한 위치와 청확히 일치한 곳에 있습니다. 

 

JavaScript가 어떤 코드 구분을 실행하기 전에 함수 선언을 메모리에 저장하는 방식의 장점 중 하나는 코드에서 선언하기 전에 함수를 사용할 수 있다는 것입니다. 

function catName(name) {
  console.log("My cat's name is " + name);
}

catName("Tigger");
/*
위 코드의 결과는: "My cat's name is Tigger"
*/

 

 

이제, 함수를 작성하기 전에 함수를 호출하면 어떤 일이 있는지 살펴봅시다

catName("Chloe");

function catName(name) {
  console.log("My cat's name is " + name);
}
/*
위 코드의 결과는: "My cat's name is Chloe"
*/

 

비록 함수를 작성하기 전에 함수를 호출하였지만, 코드는 여전히 동작합니다. 이는 JavaScript에서 컨텍스트 실행이 작동하는 방식 때문입니다.

 

 

Hoisting은 다른 데이터 타입 및 변수와도 잘 작동합니다. 변수는 선언하기 전에 초기화하여 사용될 수 있습니다. 그러나 초기화 없이는 사용할 수 없습니다.

num = 6;
num + 7;
var num; 
/* num이 선언되지 않더라도 에러를 내지 않습니다 */

 

JavaScript는 초기화가 아닌 선언만 끌어올립니다(hoist). 만약 변수를 선언한 뒤 나중에 초기화시켜 사용한다면, 그 값은 undefined로 지정됩니다. 아래 두 예제는 같은 동작을 보여줍니다.

 

var x = 1; // x 초기화
console.log(x + " " + y); // '1 undefined'
var y = 2;


// 아래 코드는 이전 코드와 같은 방식으로 동작합니다.
var x = 1; // Initialize x
var y; // Declare y
console.log(x + " " + y); // '1 undefined'
y = 2; // Initialize y

 

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

Hoisting