[JavaScript] 변수

변수란?

프로그램을 실행하는 동안 값이 여러 번 달라질 수 있는 데이터로 어떠한 상자 안에 값을 담는 개념으로 이해할 수 있다.

 

변수의 선언

변수의 선언이란 변수를 구별할 수 있도록 각각 이름을 붙여주는데, 이를 '변수 선언'이라고 하며

대입 연산자(=)를 이용해 변수에 초기 값을 대입하는 것을 초기값 할당이라고 한다.

 

Javascript는 다양한 변수 선언 방법이 있다.

 

① var

: ES6 이전 자바스크립트에서 사용되던 변수 선언 예약어로, 재선언과 재할당이 가능하며

변수를 선언 한 후 초기화를 할 수도 있고, 변수 선언과 함께 초기화를 할 수도 있다.

(스코프 : 함수영역) 

//var 변수 선언 후 초기화
var name;
name = 'A';

//vat 변수 선언 시 초기화
var name = 'A';

 

② let

: 가장 일반적인 변수 선언 예약어로, 재선언은 불가능하고 재할당은 가능하다.

let예약어로 선언한 변수는 변수를 선언한 블록({}로 묶은 부분)에서만 유효하고 블록을 벗어날 경우 사용할 수 없다.

var와 마찬가지로 변수를 선언 한 후 초기화를 할 수도 있고, 변수 선언과 함께 초기화를 할 수도 있다.

(스코프 : 블록영역) 

//let 변수 선언 후 초기화
let nationality;
nationality = 'KR';

//let 변수 선언 시 초기화
let nationality = 'KR';

 

③ const

: 변하지 않는 값을 변수로 선언하는 예약어로, 재선언과 재할당 모두 불가능하다.

const로 선언한 변수는 상수변수(constant variable)로, 특정한 상수값을 자주 사용한다면 const변수에 담아서 사용하는 것이 편리하다.

const는 변수만 선언 시 에러가 발생하기 때문에 var나 let과 달리 변수 선언 시 초기화를 같이 해주어야 한다. 

※ 상수변수 : 변하지 않는 값 (스코프 : 블록영역) 

//const 변수 선언 후 초기화 (에러)
const nationality

//const 변수 선언 시 초기화
const nationality = 'KR';

 

let과 const를 사용하여 변수를 선언하면 변수 때문에 생기는 오류를 줄일 수 있다.

값이 자주 바뀌는 변수라면 let, 재할당이 없는 변수라면 cosnt 사용을 추천한다.

 

변수의 선언 규칙

변수를 선언할 때는 몇 가지 규칙이 존재한다.

 

① 프로그램에서 사용 할 변수는 각 변수이름을 서로 다르게 만들어야 한다. 즉, 중복되지 않아야 한다.

 

② Javascript는 대소문자를 구별하며, 예약어는 변수 이름으로 쓸 수 없다.

 

③ 여러 단어를 연결한 변수 이름은 중간에 대문자를 섞어 써야한다.

(낙타표기법 : 첫 글자는 소문자로 시작하고 두 번째 단어는 대문자로 시작하는 표기법)

 

④ 변수 이름은 영문자와 언더스코어(_) 다음 숫자를 사용한다.

 

⑤  변수 이름은 의미 있게 작성해야 한다.

-> 이름만 보고 어떤 값인지 추측할 수 있도록 작성해야 한다.

 

변수의 재선언과 재할당

재선언 : 이미 선언한  변수명을 다시 선언(생성)하는 것이다.

-> var만이 재선언이 가능

//var의 변수 재선언
var name = 'A'; // 변수 선언 및 초기화
var name = 'B'; // name의 값이 B로 재선언됨

 

재할당 : 이미 값이 할당된 변수에 새로운 값을 넣는 것. 즉, 변수의 값을 변경하는 것이다.

-> var와 let만 재할당이 가능

-> const는 재할당이 불가하지만, const 선언된 배열이나 객체의 속성 값은 업데이트가 가능하다.

//var의 변수 재할당
var name = 'A';
name = 'B';

//let의 변수 재할당
let nationality = 'KR';
nationality = 'US';

//const의 배열 값 또는 객체속성 값 업데이트
const people = {
	name : 'A',
    age : 24
    } //const로 people이라는 객체를 생성
 
 // name과 age라는 속성을 변경하는 것은 불가 -> name, age 값 업데이트는 가능

 

스코프 (유효범위) 

스코프는 쉽게 말해 '변수의 적용 범위'이다.

 

지역변수 또는 로컬변수 local variable : 한 함수 안에서만 사용할 수 있는 변수 (함수 안에서 선언하고 함수 안에서만 사용)전역변수 또는 글로벌 변수 global variable : 적용 범위를 제한하지 않고 스크립트 소스 전체에서 사용할 수 있는 변수

 

var 예약어의 경우 변수가 선언된 위치에 따라 유효범위가 달라지는데함수 내에서 선언되었으면 지역변수, 함수 외부에서 사용된 경우 전역변수가 된다.다만 함수 안에서 선언했더라고 var 예약어를 사용하지 않은 경우는 전역 변수가 되니 유의해야 한다.

 

반면 let과 const의 경우에는 변수가 선언된 블록 ({}) 내에서만 유효하고, 블록 외에서 선언된 경우는 전역변수로 사용이 가능하다.

 

호이스팅

호이스팅(hoisting)이란 코드 실행 전 상황에 따라 변수의 선언과 할당을 분리하여 선언 부분을 스코프의 가장 위쪽으로 끌어올리는 것이다.

소스 코드를 실제로 끌어올리는 게 아닌, 소스를 그런 식으로 해석한다는 의미이다.

var, let, const 중 어떤 예약어로 변수를 선언하는지에 따라 호이스팅의 방식은 조금씩 달라진다.

 

//실제코드
var x = 10;

functoin displayNumber() {
	console.log("x is " + x);
	console.log("y is " + y);
var y = 20;
}
displayNumber();

예를 들어 이러한 코드는 아래와 같이 해석을 한다.

//자바스크립트 해석기가 인식하는 코드
var x = 10;

functoin displayNumber() {
	var y;
	console.log("x is " + x);
	console.log("y is " + y);
	y = 20;
}
displayNumber();

var를 사용한 변수는 변수 실행 전 '이러한 변수가 있구나'로 기억을 하며 선언한 것과 같은 효과가 발생한다.

즉, 변수 선언 전에 에러를 받지 않고 undefined 값을 받는다.

 

반면 let과 const를 사용하는 경우 변수는 호이스팅 되지만 값은 undefined 값으로 초기화되지 않는다.

따라서 let과 const를 사용한 변수는 변수 선언 전에 사용하게 되면 에러가 발생한다.

 

자바스크립트의 변수 사용 방법

①  전역 변수는 최소한으로 사용한다.

-> 프로그램 어디서든 접근이 가능하여 편리하나 오류가 발생할 확률이 높아진다.

 

② var 변수는 함수의 시작 부분에 선언한다.

-> var를 사용한 변수는 어디에서 선언하든 상관은 없지만 내부에서 호이스팅이 발생하기 때문에 오류가 생길 수 있다.

var 변수를 함수 시작 부분에 선언한다면 오류를 줄일 수 있다.

 

③ for문에서 카운터 변수를 사용할 때는 var예약어를 사용하지 않는다.

->반복문 for문 안에서 사용하는 카운터 변수는 그 블록 안에서만 사용하기 때문에 가끔 var를 사용하여 선언하기도 하는데,

이렇게 선언한다고 블록 변수가 되는 것이 아니기 때문에 let을 사용하여 블록 변수로 선언해야 한다.

(var 변수는 함수 레벨의 스코프)

 

④ ES6를 사용한다면 var보다는 let을 사용할 것을 추천한다.

-> 변수가 중복이 되면 오류가 생기는데, 재선언이 불가능한 let을 사용한다면 오류를 줄일 수 있다.