JS - 변수란?

sebinnnnn·2023년 4월 5일
3

JavaScript

목록 보기
1/2
post-thumbnail

💡 들어가기 전에

🔗 메모리와 변수

변수라는 개념에 대해 살펴보기 위해서는 먼저 메모리에 대한 이해가 필요하다.

메모리는 특정 데이터를 저장할 수 있는 메모리 셀의 집합체로 컴퓨터는 일반적으로 모든 데이터(값)를 2진수로 표현하기 때문에 메모리에 저장되는 데이터 역시 2진수로 저장이 된다.
앞서 말했듯이 메모리는 메모리 셀의 집합체이기 때문에 각각의 메모리 셀은 메모리 주소를 가지게 되고 이러한 메모리 주소는 메모리 공간의 위치를 나타낸다.

자바스크립트에서 특정 연산을 수행하게 되면 그에 따른 결괏값도 메모리에 저장이 된다.
하지만, 여기서 예상치 못한 문제가 발생하는 데 연산을 통해서 생성된 결괏값을 재사용할 수 없다는 것이다.

만약, 연산을 통해 생성된 결괏값을 재사용하고 싶다면 메모리 주소를 통해서 해당 결괏값이 저장되어 있는 메모리 공간에 직접적으로 접근을 해야 한다.
하지만, 이러한 메모리 공간의 직접적인 접근은 오류를 발생시킬 수 있는 위험한 일이다.
때문에, 자바스크립트는 개발자가 메모리를 직접적으로 제어하는 것을 허용하지 않고 있다.

그렇다면, 결괏값을 재사용하기 위해서는 어떻게 해야 할까?

→ 값에 접근하고 또 이러한 값을 재사용하기 위해서 변수를 사용하면 된다.


1️⃣ 변수, 간단하게 살펴보기

🔗 변수란 무엇인가?

MDN 공식 문서에 따르면 변수는 숫자 또는 문자열과 같은 값의 컨테이너라고 설명하고 있다.
더불어 모던 JavaScript 튜토리얼 사이트에 따르면 변수데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소’ 라고 설명하고 있다.
즉, 변수는 특정한 값을 저장하기 위해서 확보한 메모리 공간 혹은 해당 메모리 공간을 식별하기 위해서 붙인 이름을 말한다.
👉🏻 MDN 변수
👉🏻 JavaScript 튜토리얼 사이트 - 변수와 상수

자바스크립트에서는 개발자가 메모리 주소를 통해서 직접적인 접근이 불가능했기 때문에 변수를 통해서 보다 안전하게 값에 접근할 수 있게 되었다.

변수에 대해 학습을 할 때 중요하게 생각하고 넘어갈 부분은, 변수는 메모리 공간에 저장이 되어있는 데이터 혹은 값 자체에 대한 이름이 아니라 해당 메모리 공간에 대한 상징적인 이름인 것이다.

변수는 저장되어 있는 값을 식별할 수 있는 변수 이름(변수 이름과 같이 특정 값을 식별할 수 있는 고유한 이름을 식별자라고 한다. → 식별자)과 저장되어 있는 값인 변수 값으로 이뤄져 있다.
더불어, 자바스크립트 엔진에게 변수의 존재를 알리는 것은 변수 선언이라고 하고 선언된 변수에 값을 저장하는 것을 할당, 마지막으로 저장된 값을 읽어 들이는 것을 참조라고 한다.

🔗 변수의 선언과 값 할당

앞서 언급했듯이, 자바스크립트에게 변수의 존재를 알림으로써 변수를 생성하는 것을 변수 선언이라고 한다.

변수를 선언할 때는 변수 선언 키워드를 사용하는데 var, let, const 변수 선언 키워드가 있다.
(let과 const는 ES6에서 등장한 개념으로 var 선언 키워드가 가지고 있는 여러 가지 문제점을 보완하기 위해서 도입되었지만 호환성의 문제로 var 키워드를 종종 사용하기도 한다. )

var varNAme; // var 키워드로 변수 선언
let varNAme; // let 키워드로 변수 선언
const varNAme; // const 키워드로 변수 선언

위의 코드는 var, let, const 키워드를 사용해 변수를 선언한 것이다.
따로 값을 할당하지는 않았고 변수 선언만 한 상태인데 만약 해당 변수를 참조하게 되면 어떻게 될까?

var varNAme1;
let varNAme2;
console.log(varNAme1, varNAme2); // undefined undefined  출력

다음과 같이 각각 undefined 원시 값이 출력되는 것을 볼 수 있다.
이와 같은 결과는 자바스크립트의 독특한 특성에 의해서 나타나는 것인데, 자바스크립트 엔진의 경우 변수 선언을 하게 되면 자동적으로 undefined 값을 할당하여 초기화하게 된다.
따라서, 변수 선언만 한 상태지만 자바스크립트 엔진에 의해서 자동적으로 undefined 값이 할당된 것이다.

undefined가 아닌 다른 값을 저장하고 싶다면 해당 변수에 저장하고자 하는 값을 할당(저장) 하면 된다.
이를 값의 할당이라고 한다. 값을 할당할 때는 할당 연산자인 =를 사용하게 된다.

varNAme1 = "str";
varNAme2 = 12345;
console.log(varNAme1, varNAme2); // str 12345  출력

변수 이름 왼쪽에 할당 연산자와 저장하려고 하는 값을 적어주면 해당 값으로 할당이 되는 것이다.
(사실상 변수에는 초기 값인 undefined가 있던 상태였기 때문에 재할당되었다는 표현이 더 적절하다.)

🔗 변수의 재할당과 const

특정한 값이 저장되어 있는 변수에 또 다른 값을 저장하는 것을 값의 재할당이라고 한다.
값을 재할당하는 것은 위에서 살펴본 값의 할당과 동일하다.

다만, var, let의 경우에는 값의 재할당이 가능하지만 const 선언 키워드는 재할당이 불가능하다.
그 이유는 const 선언 키워드는 상수 선언 키워드이기 때문이다.
상수는 변하지 않는 혹은 변경할 수 없는 수를 말하는데 const로 선언한 변수의 경우 해당 값을 변경할 수 없기 때문에 const의 경우에는 재할당이 불가능하다.


2️⃣ 네이밍 규칙

변수 이름과 같이 특정 값을 식별할 수 있는 고유한 이름을 식별자라고 하는데 이러한 식별자는 네이밍 규칙을 준수해야 한다.

기본적인 네이밍 규칙
1. 식별자는 숫자와 언더스코어(_), 달러 기호($)를 포함할 수 있다.
2. 식별자는 숫자로 시작할 수 없다.
3. 프로그래밍 언어에서 이미 사용되고 있는 단어인 예약어는 식별자로 사용할 수 없다.

더불어, 몇 가지 규칙이 더 있는데 ES5부터 한글을 식별자로 사용할 수 있게 되었지만 호환성의 문제, 또 다른 개발자들과의 소통의 문제 등 여러 가지 이유로 한글보다는 영어로 식별자를 만드는 것이 좋다.
또한 변수 이름의 경우 메모리에 저장되어 있는 값을 대표할 수 있도록 직관적이고 명확하게 표현하는 것이 좋다. 따라서 의미 없는 단어로 만들어진 변수 이름보다는 데이터 혹은 값을 잘 표현할 수 있는 단어로 만들어야 한다.


참고
https://ko.javascript.info/

해당 글은 모던 JavaScript 튜토리얼 사이트와 모던 자바스크립트 Deep Dive 내용을 참고해 작성했습니다.

profile
🏠 블로그 이전 중 → https://gksk.tistory.com/

0개의 댓글