예비 개발자

const firstStudyLog = "변수(variable)";

어떤 언어를 사용하든 가장 처음 배우게 되는 것은 ‘변수’일 것이다. 우리가 배웠던 수학에서의 식과 흡사하게 생겨서 어렵게 느껴지지는 않으면서도, 기초가 되는 개념이다.

1. 변수?

‘내가 지정한 이름을 가진 어떤 것에 어떠한 값을 저장해주는 것’ 아니야?

처음 나의 이해는 위와 같았다. 변수는 사람이 이해하기에는 정말 쉬운 개념이다. ‘나 = 임근홍’ 혹은 ‘x = 10, y = 20. 따라서 x + y = 30’. Javascript에서는 변수 이름 앞에 const 나 let (예전에는 var)이 붙어서 “이게 변수다!” 라고 알려준다는 점 말고는 큰 차이가 없기 때문이다.

프로그래밍 언어를 배우다보면 사람과 컴퓨터는 비슷하다는 것을 알게 된다. (사람과 달리 컴퓨터는 하나 하나 다 알려줘야한다는 점에서는 차이가 있지만…)

let x = 1;
let y = 2;

let sum = x + y;

예를 들어 위와 같은 식을 사람의 경우 다음과 같이 이해한다.

‘= 는 우항과 좌항이 같다는 의미! x는 1, y는 2. + 기호는 둘을 더하라는 거고... sum은 3이겠구나!’

컴퓨터도 다를 바가 없다. 다만 차이라면, 우리는 이 모든 것을 뇌에서 처리하지만 컴퓨터는 계산과 기억을 다른 곳에서 한다. 계산은 cpu에서, 기억(저장)은 메모리(memory)에서 하게 된다.

이 기억(저장)하는 과정에서 변수가 필요해진다. 이를 이해하기 위해서는 메모리(memory)에 대해 알 필요가 있다.

메모리(memory)는 더 작은 단위, 메모리 셀로 이루어져 있다. (메모리 셀의 크기가 1바이트(8비트)이기에 컴퓨터는 1바이트 단위로 데이터를 저장하거나 읽어들인다.) 각 메모리 셀은 메모리 주소를 가지고 있다. 1-1의 예시라면 1, 2라는 값들이 2진수로 특정 위치(메모리 주소)에 저장이 된 후, 연산 뒤 그 결과 또한 특정 메모리 주소에 저장이 되는 것이다.

다시 결과값이 필요해질 때마다 메모리 주소를 써서 부르면 되는 것 아닌가하는 생각이 든다…

그러나, 메모리 주소를 통해서 직접적으로 접근 하는 것은 아래와 같은 치명적 오류를 발생시킬 가능성이 높다고 한다.

  1. 실수로 운영체제가 사용하는 값을 변경하면 시스템을 멈추게 할 수도 있다.

  2. 값이 저장될 메모리 주소는 코드가 실행될 때마다 변경된다.

    -출처: 모던 자바스크립트 Deep Dive

그러므로 안전하게 값의 위치를 가리키기 위해서 변수를 사용하는 것이다!

변수 선언과 할당?

위에서 가볍게 말하고 지나갔지만! Javascript에서 변수를 생성하기 위해서는 ****변수 선언을 해야 한다. 이에는 당연히 규칙이 존재한다.

let fullName = "geunhong Lim";

변수 선언 방법에 대해 설명하기 이전에 구조를 살펴보고 싶다.

fullName은 변수 이름이며, 다른 말로 식별자 라고도 한다. (변수 이름 뿐만 아니라 식별할 수 있는 것들을 모두 지칭하여 사용한다.) fullName이라는 변수이름 안에는 두 가지의 정보가 필수적으로 저장되어야 한다. 바로 ‘값’ 과 ‘메모리 주소’다.

‘메모리 주소’는 위에서 살펴 보았던 것이고,‘geunhong Lim’이 값이다.

그렇다… 저것이 바로 변수 선언에서 반드시 필요한 키워드이다!

Javascirpt에서는 기호들과 값, 변수 이름만으로는 변수를 선언할 수 없다(python 등은 가능하다). 다 빼고 아래와 같이 쓰더라도 변수는 선언된다.

let fullName;
const fullName;

위와 같은 키워드를 사용하면 변수가 생성되어 이제 안전하게 메모리 주소에 값을 저장하고 다시 사용할 수 있다.

여기서 let과 const, 그리고 구글검색하면 나오는 다양한 Javascript 코드에서 발견되는 var의 차이점은 무엇인지에 대해 의문이 생긴다. var과 관련된 이야기는 다음에! let과 const의 차이는 밑에서 재할당을 설명할때 살펴보도록 하자.

다시, 1-2의 예시를 조금 분리해서 보자.

let fullName;
//혹은 const fullName;

fullName = "geunhong Lim";

let 혹은 const를 앞에 써주는 것으로 변수 선언이 되었다. 이후fullName = 'geunhong Lim'처럼 ‘=’ 연산자를 써서 값을 저장해주었다. 이것이 바로 할당이다.

const와 let?

만약 코드 안에서 하나의 변수가 값을 변경해야 하는 경우에는 다시 할당을 해줘야할 것이다.

이렇게 재할당을 할 때에, const와 let의 차이를 알 수 있게 된다. 아래에서 보여줄 두 예시 중, 하나는 재할당이 가능하다. 다음 중 console에 code kim이 나올 것은? (error가 없는 것은?)

//1번

let fullName = "geunhong lim";

console.log(fullName);

//재할당
fullName = "code kim";
console.log(fullName);

//2번

const fullName = "geunhong lim";

console.log(fullName);

//재할당
fullName = "code kim";
console.log(fullName);

답은 1번이다! const의 경우에는 재할당이 금지된다. 힌트는 단어 그자체에 있었다! const, 상수(변하지 않는 수)를 의미하니까…!

그러므로 재할당이 필요한 변수는 let, 그렇지 않을 때는 const를 사용하는 것이 적절하다.

정리

이렇게 해서 기초가 되는 ‘변수’에 대한 내용이 끝났다. 대부분 내용은 wecode강의를 바탕으로, 모던 자바스크립트 Deep Dive를 추가로 공부한 내용이다. 항상 Javascript를 더 깊게! 이해하고 싶은 욕심이 있었기에 책 내용을 추가로 붙이면서도, 최대한‘변수’파트에서 벗어나지 않으려고 노력하며 작성해보았다.

컴퓨터의 구조에 대한 지식이 더해지니 변수를 ‘정말로 왜?’ 사용하는지에 대한 설명이 가능했다.

메모리 주소에 저장된 값을 안전하게 재사용하기 위해서 변수를 사용한다. 그러므로 변수는 값이 저장되는 공간을 말하는 것이다.

이렇게 정리하니 간단하다!

다음 정리에서는 데이터 타입에 대해서 다룰 것이다. 그리고 앞으로는 기초적인 내용은 물론, 조금 더 깊은! 구체적인! 주제들을 다루는 글도 올릴 필요성이 느껴진다. 글을 쓰는 목적이 ‘나의 공부’를 위해서이니 어려운 내용들도 열심히 다뤄보고 싶다.

2022- 01 - 20

참고