자바스크립트에서 변수는 데이터를 저장하고 조작하기 위해 사용되는 메모리 공간을 의미합니다. 즉, 계산기를 만든다고 가정한다면, 계산기의 초기 세팅 값, 그리고 계산을 위해 입력하는 값, 계산된 결과 등 데이터를 저장할 저장소가 필요하며 이러한 저장소의 역할을 하는 것이 변수입니다.
또한 이러한 변수에 저장되는 값의 종류를 자료형(Data type)이라고 하며, 오늘은 이렇게 자바스크립트의 기초가 되는 변수와 변수 선언, 변수 명명 규칙 그리고 자료형에 대해 알아보겠습니다.
변수는 var, let, const 키워드를 통해 선언되며, 각각 선언에 따른 차이를 알아보겠습니다.
1. let 키워드
let으로 선언된 변수는 그 변수가 선언된 블록 중괄호({}) 내에서만 접근 가능한 블록 스코프 가지며, Hoisting 되지만 변수가 실제로 선언되기 전에는 사용할 수 없습니다. 또한 let으로 선언된 변수를 다시 선언할 수는 없으며 선언할 때 값을 초기화할 수도 있고 나중에 값을 할당할 수도 있습니다. 그리고 재선언은 불가능하지만 재할당은 가능하기 때문에 프로그램 중간에 해당 저장소의 값을 변경해 줄 수 있습니다.
let a = 20; //변수 선언 및 초기화
console.log(a) //결과값 출력 : 20
a = 10; //변수의 재할당
console.log(a) //결괏값결과값 출력 : 10
let b; //변수 선언 및 초기화하지 않음
console.log(b) //결괏값은결과값은 undefined 출력됨
※ 참고. 1) 변수의 유효 범위(스코프)와 2) 호이스팅(Hoisting)
1) 변수의 유효 범위(스코프)
자바스크립트에서 변수의 스코프는 변수가 어디서 정의되고 어디서 접근할 수 있는지를 결정하는 개념입니다. 스코프는 크게 전역 스코프(Global Scope)와 지역 스코프(Local Scope)로 나눌 수 있으며, 지역 스코프는 다시 함수 스코프(Function Scope)와 블록 스코프(Block Scope)로 나눌 수 있습니다. 이러한 스코프의 개념을 이해하는 것은 변수의 가용성을 제어하고 코드의 오류를 방지하는데 유용하기 때문에 간단히 알아보겠습니다.
1) 전역 스코프(Global Scope): 전역 스코프는 모든 코드에서 접근할 수 있는 범위로 스크립트 전체에서 유효합니다.
2) 함수 스코프(Funcion Scope): 함수 스코프는 함수 내에서 선언된 변수의 범위로 “var” 키워드를 사용하여 선언된 변수는 함수 스코프를 가지며 함수 내에서 선언된 변수는 해당 함수 내부에서만 유효합니다.
3) 블록 스코프(Block Scope): 블록 스코프는 블록( 중괄호, {} ) 내에서 선언된 변수의 범위를 말하며, 일반적으로 함수, 조건문, 반복문 등에서 사용됩니다.
2) 호이스팅(Hoisting)
변수 호이스팅은 코드 실행 전에 변수 선언이 해당 범위의 최상단으로 끌어올려지는 것처럼 동작하는 특성을 의미하며, 이는 변수뿐만 아니라 함수 선언에도 적용됩니다. 호이스팅 덕분에 코드에서 변수를 선언하기 전에 참조할 수 있지만, 접근할 수 없기 때문에 사용 시 주의해야 합니다.
위에서 살펴본 let 키워드 변수는 호이스팅 되지만 초기화 전에 접근할 수 있으므로 아래 코드는 오류가 발생합니다.
console.log(y); //오류 발생
let y = 5;
2. const 키워드
const 키워드를 통해 선언된 변수는 상수라고도 하며, 선언과 동시에 초기화해야 하며, 이후 재할당이 불가능한 변수입니다. 즉, 재선언과 재할당이 불가능하며 따라서 상수는 변하지 않는 값을 저장하거나, 한 번 초기화된 후 값이 유지되기를 원하는 경우에 사용됩니다. 상수는 코드의 안정성과 가독성을 높이는데 유용한 역할을 합니다. 상수는 let 키워드 선언 변수와 동일하게 블록 스코프를 가지며, 동일하게 Hoisting되지만 선언 전에 접근할 수 없습니다.
const a = 123; //선언과 동시에 초기화
const a = 124; //재선언할 수 없으므로 오류 발생
a = 124; //재할당할 수 없으므로 오류 발생
3. var 키워드
자바스크립트 초기에 변수 선언 키워드로 함수 스코프를 가지며, 함수 내부에서 선언된 변수는 함수 내 어디서든 접근할 수 있습니다. 또한 호이스팅 특성을 갖고 있어 선언 위치에 상관없이 함수 내 최상단으로 끌어올려진 것처럼 동작합니다. 따라서 변수를 선언하기 전에 접근할 수 있지만, 값이 undefined인 상태로 참조됨을 의미합니다. 또한 var로 선언된 전역 변수는 전역 객체(window 또는 globalThis)이 프로퍼티가 됩니다.
이러한 var에 특성으로 인해 일반적으로 변수의 유효 범위를 더욱 명확하게 제어할 수 있는 let 키워드를 통한 변수 선언 사용을 권장하고 있습니다.
4. 변수의 명명 규칙
위에서 살펴본 변수들의 이름은 개발자가 임의로 지정할 수 있지만, 아래의 규칙에 따라 지정돼야 합니다.
첫 번째로 변수 이름은 문자, 숫자, 밑줄(_), 달러 기호($)로만 구성될 수 있습니다.
let *a = 1 //오류 발생
let _a = 5 //가능
두 번째로 첫 글자는 숫자가 될 수 없습니다.
let 1a = 1 //오류 발생
세 번째로 대소문자를 구별하기 때문에 아래 예시로 선언한 변수는 다른 변수로 취급됩니다.
let myVar = 1;
let myvar = 1;
네 번째로 예약어를 사용할 수 없습니다.
예약어는 이미 자바스크립트에서 문법적으로 특별한 용도로 사용되는 단어들을 의미하며,
if, else, for, while 등을 의미합니다.
위에서 살펴본 규칙들을 지켜가며 개발자 마음대로 변수를 지정할 수 있지만, 기본적으로 개발은 팀을 이뤄 협업을 통해 진행되기 때문에 해당 변수의 의미를 알 수 있는 이름으로 짓는 것을 권장하며, 여러 단어가 이어진 변수명일 경우, 각 단어의 첫 글자를 대문자로 쓰고 나머지는 소문자로 쓰는 카멜 케이스 방식을 권장합니다.
예를 들어 사용자의 이름을 저장하는 변수를 선언할 경우 userName과 같이 사용자를 의미하는 user와 이름을 의미하는 name단어를 합친 후, 첫 글자를 대문자로 표기해 줘 의미를 명확하게 파악하도록 하면 좋습니다.
5. 자료형(Type)
자바스크립트에서 자료형은 변수나 상수에 저장되는 값의 종류를 의미하며, 자바스크립트는 동적 타입 언어로 변수의 타입을 명시적으로 선언할 필요가 없이 변수에 할당되는 값에 따라 타입이 자동으로 결정됩니다. 자바스크립트의 자료형은 크게 기본형(primitive type)과 참조형(reference type)으로 나눌 수 있습니다.
1) 기본형(primitive type)
기본 타입은 원시 타입이라고도 부르며 메모리에 저장될 때 그 크기가 고정되어 있으며,
Number, String, Boolean, null, undefined 5개로 이루어져 있습니다.
숫자(Number)
숫자는 정수와 부동 소수점 숫자를 포함합니다. 모든 숫자는 부동 소수점 형태로 저장되며, 자바스크립트에서는 64비트 부동 소수점 형식을 상용합니다. 또한 양의 무한대와 음의 무한대 값도 가질 수 있습니다.
let number1 = 10; //정수
let number2 = 3.14; //부동 소수점
let number3 = 2; //정수
let inf = Infinity; //양의 무한대
let nint = -Infinity; //음의 무한대
그리고 아래와 같이 숫자 타입의 경우 사칙연산과 나머지 연산이 가능합니다.
console.log(number1 + number2)
console.log(number1 - number2)
console.log(number1 * number2)
console.log(number1 / number2)
console.log(number1 % number2)
그리고 종종 코딩을 하다 보면 볼 수 있는 Not a Number를 나타내는 NaN값도 숫자형에 포함됩니다. 이는 위와 같은 사칙연산을 실패했을 때 나타나는 결괏값으로 타입이 다른 숫자와 문자를 더할 때 나타나거나 합니다. 이러한 타입 덕분에 자바스크립트에서는 계산에 실패해도 프로그램이 종료되지 않아 보다 안전합니다.
문자열(String)
문자열은 텍스트 데이터를 나타내며, 작은 따옴표(‘’) 또는 큰 따옴표(“”)로 감싸집니다.
let str1 = “ABC”;
let str2 = “DEF”
또한 문자열에서도 더하기를 할 수 있으며 더하기를 실행할 경우 두 개의 문자열이 합쳐진 결과를 볼 수 있습니다.
console.log(str1 + str2) //결과 값 : ABCDEF
그리고 백틱(`)을 이용해 템플릿 리터럴을 사용한 문자열을 만들 수 있으며,
달러($)와 중괄호를 이용해 문자열 안에서 다른 문자열 변수를 동적으로 넣을 수 있습니다.
let str3 = `${str1} 다음은 ${str2} 입니다.`
불리언(Boolean)
true와 false 두가지 값만 가질 수 있는 데이터 유형으로 주로 조건문과 논리 연산에 사용됩니다.
let isTrue = true;
let isFalse = false;
null
null 은 존재하지 않음을 나타내는 특별한 값으로 변수가 의도적으로 비어 있음을 나타낼 때 사용됩니다.
let myVar = null;
undefined
undefined는 값이 할당되지 않은 변수를 나타내는 데 사용되며, 변수를 초기화하지 않거나 값을 반환하지 않는 함수에서 반환될 수 있는 값입니다.
2) 참조형(Reference Type)
참조형 타입에는 객체(Object)와 배열(Array), 함수(Function), 정규 표현식(RegExp)등이 있으며, 각각의 개념에 대해서는 보다 자세히 공부할 필요가 있어 오늘은 넘어가겠습니다.
마무리
오늘은 이렇게 변수란 무엇인지와 변수의 선언 그리고 사용 방법에 대해 알아보았고 마지막으로 변수에 할당되는 값의 종류인 자료형에 대해서도 알아보았습니다. 또한 변수를 선언하기 위한 명명 규칙 그리고 각각 자료형에 대한 상세한 내용도 알아보았습니다. 너무 기초적인 내용이지만 다시 한번 복습하는 차원에서 기록해 보았습니다.