웹 페이지를 동적으로 만들고, 사용자와 상호 작용하는데 자바스크립트(javascript)는 중요하게 사용 되고 있습니다. 자바스크립트에서 많은 개념 중 가장 기본이 되는 것을 고르라고 한다면 변수의 정의와 선언에 대해 이야기 할 것입니다.
변수는 개발에 있어 가장 기본적이고 중요한 개념 중 하나입니다.
변수(varaible)란❓
데이터를 저장할 때 쓰이는 이름이 명시된 저장소
설명을 위해 예를 들어 컴퓨터가 [ 10 + 10 ] 이라는 값을 계산한다고 해봅시다.
이를 수행하기 위해서 컴퓨터는 10이 무엇인지, 연산자 + 가 무엇인지에 대한 의미도 알아야 하고, 이것들을 저장하여 기억하고 있을 공간도 필요합니다.
이 공간을 “메모리” 라고 하는데, 컴퓨터의 메모리는 여러 공간으로 나누어져 있어서 공간마다 기본적으로 주소를 가지고 있습니다. 주소는 0xd8ff 와 같이 16진수로 되어 있는데, 이를 직접 기억하고 사용하기가 어렵고, 그렇게 하더라도 실수를 하게 된다면 치명적인 오류를 발생 시킬 수 있습니다.
그래서 해당 메모리 주소 값에 직접 접근하지 않고, 메모리 공간을 식별하고 쉽게 사용하기 위해 사용되는 개념이 변수입니다. 간단하게 축약하여 아래와 같이 설명 할 수 있습니다.
하나의 "데이터"를 저장하기 위해 확보한 메모리 공간 자체 혹은 메모리 공간을 식별하기 위해 붙인 이름을 붙인 것을 변수 라고 한다.
변수(variable)는 단어의 이름 그대로 "변할 수 있는 데이터 값을" 저장한다는 특징이 있습니다. 다시말해, 변수에 담은 데이터는 언제든지 다른 값으로 변경할 수 있다는 의미입니다.
*언밀히 말해 메모리 공간의 이름을 "식별자" 라고 하지만, 대부분 문맥에 따라 무엇을 말하는지 유추할 수 있기 때문에 크게 구분하지 않고 혼용하여 사용한다.
✅ 변수의 선언과 할당
컴퓨터에서 변수를 사용하기 위해서는 "선언"하고 값을 "할당" 하는 과정이 필요합니다.
변수 선언이란?
컴퓨터에게 해당 변수의 존재를 알리는 것, 사용할 변수를 명시(정의)하는 행위
위의 예시처럼 우리가 컴퓨터가 [ 10 + 10 ] 을 계산을 하도록 코드를 작성한다고 할 때, 10 이라는 숫자 데이터를 편하게 사용하기 위해 number 이라는 변수를 사용한다고 해봅시다!
이때 우리는 아래와 같은 코드로 변수를 선언할 수 있습니다.
// 변수의 선언 예시
var number;위와 같이 변수를 선언하게 되면 앞서 설명 했던 대로 컴퓨터에서는 내부적으로 숫자 10을 저장하기 위한 메모리 공간을 확보하게 되고, 해당 메모리 공간을 선언한대로 number라는 이름으로 부를 수 있게 됩니다.
변수 할당
선언된 변수에 데이터를 저장하는 것
이제 변수를 선언했다면 선언한 변수에 데이터를 담아야 합니다. 이때 단순히 데이터를 저장하는 것을 "할당" 한다고 말합니다.
// 변수의 할당 예시
number = 10;
// 변수 선언과 할당을 한 문장으로 표현
var number = 10;이때 자바스크립트의 변수에는 어떤 것들이 저장 될 수 있을까??
변수에 저장될 수 있는 변하지 않는 데이터 값 자체를 "리터럴(Literal)" 이라고 합니다.
위의 예시에서 number가 변수라면 숫자 10이 리터럴입니다.
변하지 않는 데이터라면 무엇이던지 리터럴이 될 수 있습니다. 자주 사용하는 리터럴에는 정수,실수, boolen, 문자열, 배열, 객체, 함수, 정규표현식 등이 있습니다.
앞서 예시에서 var 를 이용하여 변수를 선언하는 예시를 보여드렸습니다. 자바스크립트 언어에서는 이것 외에도 다른 변수를 사용하는데요! 한번 알아보도록 하겠습니다.
✅ 변수의 종류
자바스크립트에서 변수를 선언하는 방법에는 var, let, const 3가지가 있습니다.
초기에는 var 변수만 존재 했었지만, 2015년에 ES6 버전이 새롭게 생기며 let, const를 일반적으로 사용하고 있습니다. 이 변수들이 왜 새롭게 생겨났는지, 어떤 차이점이 있는지 알아보겠습니다.
1️⃣ var
// 예시
var number = 10;var 는 자바스크립트가 처음 생겼을 당시부터 변수를 선언할 때 사용했던 키워드 입니다. ES5 버전까지만 하더라도 var의 전성기라고 해도 과언이 아니었죠.
하지만, 아래의 몇가지 특징들 때문에 여러 문제들이 발생하면서 대규모 프로젝트를 진행할 때에 어려움을 껶게 됩니다.
😑 중복선언 허용
// 예시
var A = 10;
var B = 20;
...(수백만 줄의 코드)
var A = 100;
console.log(A);var 의 첫번째 특징은 "중복으로 선언"이 가능하다는 점입니다.
위의 예시 코드에서 처럼 맨 처음 변수 A를 선언한 후, 사용하다가 시간이 흘러 수 많은 코드 뒤에 같은 이름의 변수 A 를 선언하게 되면, 가장 나중에 선언된 변수가 우선적으로 선언된 변수를 덮어 써버리게 되어, 맨 처음 선언한 변수는 사용할 수 없게 됩니다.
위와 같은 특징으로 인해 다른 개발자와 협업 할 때나 충돌이 일어나는 것은은 물론, 변수의 이름을 구분하기 위해 변수 명이 길어지게 되어 가독성이 떨어게 만드는 일이 다수였으며, 유지보수하기가 어려웠습니다.
함수 레벨 스코프(Scope)
두번째 특징으로 var 는 함수 레벨의 블록에서 동작한다는 것입니다.
자바스크립트에서 스코프(Scope)란?
"변수에 접근할 수 있는 유효범위"
변수가 선언되는 위치에 따라 스코프(Scope)는 크게 3가지로 나눌 수 있습니다.
1. 전역 스코프
2. 블록 스코프
3. 함수 스코프
var는 여기서 "함수 레벨 스코프"를 가지고 있습니다. var 변수의 유효범위는 함수라는 것입니다. 다시 말해 var 는 함수 내부가 아닌 다른 곳에서는 "전역 변수" 취급을 받게 된다는 것입니다.
// 예시(1)
var A = 10;
function example(){
var A = 10; // 함수가 끝남과 동시에 메모리에서 해제됨
}
console.log(A); // 10 출력var는 위의 예시와 같이 함수안에서 동일한 이름의 변수를 선언하더라도 각각 다른 변수로 취급받게 되면서 중복 선언이 일어나지 않게 됩니다.
// 예시(2)
var A = 10;
if(true){
var A = 100; //전역 변수 중복 선언
}
console.log(A); // 100 출력위 코드의 예시처럼 중괄호로 { } (이하 블록)으로 표현되는 조건문이나, 반복문안에서 var 는 유효하지 못하고 전역변수로 취급을 받게 되어 중복 선언이 일어나게 되게 됩니다.
이런 특징 때문에 var 는 의도치 않게 중복선언이 일어날 가능성이 높아지게 됩니다.
호이스팅(hoisting)
호이스팅이란?
변수 선언문이 코드의 선두로 끌어 올려지는 것처럼 동작하는 자바스크립트 고유 특징
호이스팅에 관한 내용은 추후 다른 포스트에서 자세하게 다뤄보도록 하겠습니다 :)
var 는 코드 실행 시 선언한 내용이 코드의 최상단으로 올라가면서, 변수가 제대로 사용되지 않는다던가 하는 문제가 발생되게 됩니다.
위의 3가지 특징으로 인해
var를 사용하는데 많은 문제와 여러움들이 있었고, 이것을 해결하기 위한 대안으로let과const가 등장하게 된것입니다.
재할당 가능
한번 선언된 변수에 저장되어 있는 값을 다른 값으로 언제든지 바꿀 수 있습니다.
하지만, 항상 변하지 않는 값(시간, 날짜 등)을 고정하여 사용해야 할 때가 있는데, 이러한 특징 때문에 의도치 않게 값이 변하게 되어 오류를 발생시키기도 합니다.
2️⃣ let
❌ 중복선언 금지 ❌
let은 var과 다르게 "중복 선언"이 금지 되다는 것입니다.
// let 중복선언 예시
let A = 10;
...(수백만 줄의 코드)
let A = 100;
console.log(A);그렇기에 위와 같이 같은 이름의 변수를 중복해서 선언하게 된다면 아래 사진과 같은 오류를 발생시키며, 중복선언으로 인해 발생했던 문제들을 해결함으로 충돌이나 삭제 등의 문제를 해결할 수 있게 되었습니다.
블록 레벨 스코프
let로 선언된 변수는 중괄호 { } 로 둘러싸인 블록 안에서만 유효하다는 것입니다. 조건문, 반복문, 함수, 객체 등 사용되는 대부분의 곳에서 { }를 사용하여 블록으로 나눠지기에 앞서 var에서 발생하던 중복선언의 문제에서 해방되게 되었습니다.
// 예시
let A = 10;
if(true){
let A = 100; // 이때 선언된 변수 A는 블록 안에서만 유요하기 때문에 중복선언 되지 않음
}
console.log(A); // 10 출력호이스팅
let 도 동일하게 호이스팅이 발생하지만, 코드 실행시 TDZ라는 동작원리에 의해 걸리게 되면서 변수가 선언되기 전에 접근하면 ReferenceError가 발생하도록 하여 문제를 해결하였습니다.
재할당 가능
var과 동일하게 재할당이 가능합니다. 재할당으로 발생하게 되는 문제들은 아래 const 키워드를 통해 해결하였습니다.
3️⃣ const
const의 가장 큰 특징은 재할당을 금지하여 상수 변수 라는 것입니다.즉 말 그대로 한번 선언 한다면 저장된 값이 변하지 않는 다는 특징이 있습니다.
재할당 금지 ❌
const는 앞서 말했듯 재할당을 금지하였기에 선언과 동시에 초기화를 해줘야 한다는 특징을 가지고 있습니다. 만약
// 예시
const A;
console.log(A); // 10 출력
❌ 중복선언 금지 ❌
let과 동일하게 const도 중복선언을 금지하였습니다. 중복선언으로 인해 발생했던 문제들을 동일하게 해결하였습니다.
블록 레벨 스코프
// 예시
const A = 10;
if(true){
const A = 100; // 이때 선언된 변수 A는 블록 안에서만 유요하기 때문에 중복선언 되지 않음
}
console.log(A); // 10 출력호이스팅
변수의 활용
변수는 프로그램에서 데이터를 저장하고 사용하는 데 필수적입니다. 변수를 사용하여 데이터를 저장하고 이를 가공하여 원하는 결과를 얻을 수 있습니다. 변수를 활용하면 코드를 보다 유연하고 읽기 쉽게 만들 수 있으며, 데이터의 재사용성을 높일 수 있습니다.
요약
참고
책 <코어 자바스크립트> - 정재남
https://velog.io/@hustle-dev/모던-자바스크립트-Deep-Dive-15장#04장---변수
