Javascript 변수 var, let, const

자바스크립트란?

JavaScript는 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어.

객체 기반의 스크립트 언어입니다.

 

HTML과 CSS와는 다른,

웹 브라우저에서 유일하게 사용할 수 있는 프로그래밍 언어입니다.

 

이는 HTML이 한번 화면에 출력된 후에는 그 형태나 동작방법을 바꿀 수 없는 문제를

고치기 위해 만들어진 언어입니다.

 

프로그래밍언어는 컴퓨터와 인간이 의사소통하기 위해 나타난 것이라고 했었죠?

이때 의사소통을 하기 위한 규칙이 언어별로 있는데, 이를 문법이라 합니다.

즉, 자바스크립트(js)에도 js만의 문법이 있습니다.

 

자바스크립트가 할 수 있는 일

- Browser API : DOM, 위치정보, audio, 화면 공유 등 Browser에서 제공하는 API들

- 2D, 3D 그래픽 작업

- 클라이언트 뿐만 아니라 서버도 js로 가능(ex : Node.js)

- 스크립트 언어 + 인터프리터 언어

  : 입력 후 바로 결과 확인이 가능

  : 브라우저에 내장된 엔진으로 즉시 해석 가능

 

 

변수

1. 사용가능한 데이터 타입

• Boolean
• Number
• String
• Symbol
• Object
• Null

typeof(null)
//'object'

• Undefined

typeof(undefined) 
//'undefined'  -> 'undefined'이라는 타입이 존재

 

2. var

변수를 담을 공간을 만들기 위해서는 var이라는 예약어를 이용해야한다.

var a = 2

var로 선언한 변수명은 중복으로 선언 가능하며,

Function 레벨(Function scope 변수)로 Hoisting 현상을 발생시킵니다. 

 

자바스크립트에서 Hoisting이란 코드에 선언된 변수 및 함수를

범위(scope)의 최상단으로 올려버리는 것을 말합니다.

 

자 이때 변수가 생성되는 과정에 대해서도 같이 생각해야 하는데요.

변수는 아래 3단계를 거치며 생성됩니다.

 1. 선언 단계: 실행 컨텍스트에 변수를 등록.
 2. 초기화 단계: 실행 컨텍스트에 등록된 변수를 메모리에 할당, 변수는 undefined로 초기화.
 3. 할당 단계: undefined로 초기화된 변수에 값을 할당.

 

이때 var 선언 단계, 초기화 단계를 같이하게 됩니다.

var n = 1;
function test() {
  console.log(n); //undefined
  var n = 2;
  console.log(n); //2
}
test();

// 위의 식이 실행되면 var이 어떻게 작용하냐면-
var n = 1;
function test() {
  var n; //요게 최상단에 선언된 것과 같은 역할
  console.log(n); //undefined
  var n = 2;
  console.log(n); //2
}
test();

이때 첫번째 값이 undefined가 나온 이유는

var은 함수 레벨에서 호스팅되기에 test()내 최상단에 

var n;을 선언한 것과 같은 효과를 보여주게 됩니다.

이때 n은 undefined로 어떤 값도 할당되지 않은 초기화 상태인거죠.

 

여기서 var은 함수레벨로 범위를 잡기 때문에,

함수 외의 범위에서 선언된 변수는 전역변수처럼 쓰여지게 됩니다.

그렇게 중복으로 선언하다보면 변수명이 겹치는 등의 불상사가 생길 수 있습니다.

그러니 자주 사용하지 않는 것이 좋겠죠..?

 

3. let

 - block scope

 - 모든 코드 블록(함수, if 문, for 문 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효한(block scope 변수),

내부에서 선언한 변수는 지역 변수입니다.

let num = 1; // 전역 변수

{
  let num = 2; // 지역 변수
  let n = 3; // 지역 변수
}

console.log(num); // 1
console.log(n); // ReferenceError: n is not defined

 

4. const

  변하지 않는 데이터를 저장(ex- 파이, 객체 등)

for (const i=0; i<0;i++){
	console.log(i);
}

다음과 같은 코드를 짜면 에러가 뜨는데,

그 이유는 const로 선언된 i의 값은 바뀔 수 없기 때문입니다.

 

 

 

 

<참고>

https://www.daleseo.com/js-var-issues/

[자바스크립트] var를 사용할 때 발생하는 문제들