[JavaScript] Variables

썸네일

1. 변수(Variables)

자바스크립트의 변수란 단순히 저장 위치의 이름이다.

즉, 데이터(값)를 저장하기 위한 컨테이너라고 보면 된다!

 

# 변수 선언 규칙

- 이름은 문자(a~z 또는 A~Z), 밑줄(_) 또는 달러($) 기호로 시작해야 한다.

- 첫 글자 뒤에 숫자(0~9)를 사용할 수 있다. (ex : value1)

- JavaScript 변수는 대소문자를 구분한다. (ex : x와 X는 다른 변수이다.)

- 예약어(자바스크립트 키워드 ex. var, let 등)는 이름으로 사용할 수 없다.

 

2. 변수 선언 방법(var, let, const)

1) 중복 선언

# var : 중복 선언 가능

var a = 10;
var a = 20;

 

# let, const : 중복 선언 불가능

let(const) a = 10;
let(const) a = 20;		//SyntaxError : identifier ‘a’ has already been declared

 

2) 재할당

# var, let : 값의 재할당이 '가능'한 변수(변할 수 있는 수)

var(let) a = 10;
a = 20;
console.log(a);			//20

 

# const : 값의 재할당이 '불가능'한 상수(변할 수 없는 수)

const a = 111;
a = 222;		//TypeError : Assignment to constant variable

 

3) 스코프(Scope)

스코프란 변수가 유효한 참조 범위를 말한다.

예를 들어, 함수 내부에서 선언된 변수는 함수 내부에서만 참조가 가능하다.

이 경우 변수의 스코프는 함수 내부로 한정된다.

 

# var : 함수 레벨 스코프(function-level scope)

var는 함수 내부에 선언된 변수만 '지역변수'로 한정하며, 나머지는 모두 전역 변수로 간주한다.

하지만, 함수를 제외한 영역에서 var로 선언한 변수는 '전역변수'로 취급된다. 한마디로 if문, for문, while문, try/catch문 등의 코드 블럭{...} 내부에서 var로 선언된 변수를 전역 변수로 간주한다.

 

# let, const : 블록 레벨 스코프(block-level scope)

let, const는 함수 내부는 물론, if문이나 for문 등의 코드 블럭{...}에서 선언된 변수도 지역변수로 취급한다. 그래서 블럭 내부에서 let, const로 선언된 변수는 외부에서 참조할 수 없다.※ 블록은 중괄호{}로 둘러싸인 코드 영역을 말함.

 

4) 호이스팅

자바스크립트는 코드를 실행하기 전, 일종의 '코드 평가 과정'을 거치는데, 이때 '변수 선언문'을 미리 실행하기 때문에 뒤에서 선언된 변수도 앞의 코드에서 참조할 수 있게 된다. 이게 호이스팅!

 

# var : 변수 호이스팅이 발생한다.

console.log(a);		// undefined

var a = 10;

console.log(a);		// 10

뒤에서 선언된 변수 a가 앞에서 참조되었음에도 에러를 발생시키지 않는다.

 

var로 변수를 선언하는 경우!코드 실행 전에 자바스크립트 엔진이 ①미리 변수를 선언 ②undefined로 초기화!

 

# let, const : 변수 호이스팅이 발생하지만 var와 다른 방식으로 작동한다.

console.log(a);		// ReferenceError : Cannot access 'a' before initialization

let a = 10;

뒤에서 선언된 변수를 앞에서 참조하려 하니 에러가 발생한다. 마치 호이스팅이 발생하지 않는 것처럼 보인다. 이런 현상이 발생하는 이유는 let, const 호이스팅 과정이 var와 다르기 때문이다.

 

let/const로 변수를 선언하는 경우!

코드 실행 전 ①미리 변수를 선언 ②초기화는 코드 실행 과정에서 변수 선언문을 만났을 때!

 

3. 변수에 저장할 수 있는 데이터 종류

1) 숫자형(Number)

정수형 10진수 / 정수형 16진수 / 실수형(소수점)ex) 나이와 몸무게를 변수에 담기!

var age = 19, weight = 65.5;

 

2) 문자형(String)

글자(문자열)를 말한다.ex) 아이디를 변수에 담기!

var id = "hajin1234"

 

3) 논리형(Boolean)

참(true, 1)과 거짓(false, 0) 두 가지 값만 존재한다.ex) 로그인 유무를 변수에 담기!

var login = true;

 

4) undefined

변수에 undefined가 저장되어 있다면 일반적으로 변수를 만든 후 초기화하지 않은 상태를 의미한다.ex) 변수를 선언하고 변수에 값을 대입하지 않는 경우! [값이 없는 변수의 기본 값 = undefined]

var data;
alert("data = " + data);

 

5) null

null의 뜻은 "아무것도 참조하고 있지 않다"라는 의미가 담겨 있으며 주로 객체를 담을 변수를 초기화할 때 많이 사용한다.ex) null 값으로 데이터를 초기화하는 경우!

var data1 = 0;            // 숫자 변수 초기화
var data2 = "";           // 문자 변수 초기화
var data3 = false;        // 논리형 변수 초기화
var data4 = null;         // 객체 변수 초기화

 

4. 변수 값 저장 및 변경

1) 변수 값 저장

var a = 1;
var b = a;
console.log(b);		//1

a에 '1'이라는 데이터를 대입하고 b에 a값을 대입해 저장

 

2) 변수 값 변경

var a = 1;
a = 2;
console.log(a);		//2

a를 먼저 선언하면서 1로 초기화하고 그다음에 2로 초기화하면 결국 a의 최종 값은 2가 저장된다.

 

5. 지역 변수와 전역 변수

1) 지역 변수

지역 변수는 블록{} 또는 함수 내에서 선언된다. 예를 들어

function myfunc() {
	var a = 10;	//지역 변수
}

 

2) 전역 변수

전역 변수는 함수 밖에서 정의된 변수이다.

var data = 100;		//전역 변수
function myfunc() {
	document.write(data);
}

data();		//JavaScript 함수 호출

 

6. 매개 변수

함수에 전달되는 변수를 '매개변수(parameter)'라고 한다.함수의 매개변수 값으로는 함수, 객체, 배열로 전달할 수 있다.

 

ex1)

function myfunc(userName){
	alert("userName = " + userName);
}

var name = "sonhajin";
myfunc(name);	//myfunc(name)을 호출하면 myfunc("sonhajin")으로 변경된다.

 

ex2)

function myfunc(a, b) {
	return a * b
}

myfunc(5, 2)	//10

 

ex3)

function myfunc(from, text) {		//매개변수 from, text
	alert(from + ' : ' + text);
}

myfunc('Son', 'Hello!');		//Son : Hello!
myfunc('Kim', "What’s up?");		//Kim : What's up?