[JavaScript] 값과 변수 이해하기

비얌·2023년 1월 10일

값 변수 표현식

개요

Just JavaScript라는 곳에서 자바스크립트 강의 자료를 보고 공부하고 있다. 챕터 1을 막 읽기 시작했을 때, 강의에 이런 질문이 나왔다.

아래의 코드가 실행된 후 x와 y는 각각 어떤 값이 되겠는가?

그래서 일단 x는 0, y는 10이라고 답했다.

답은 맞았지만 어림짐작으로 이렇게 될 것 같다고 생각했을뿐, 정확히 이 코드에서 무슨 일이 일어나는지는 알지 못했다.

하지만 챕터 3까지 읽은 지금은 왜 x가 0, y가 10이 되는지 알게되었다!

지금까지 배운 내용을 바탕으로 '값과 변수'에 대한 내용과 위의 질문에 대한 풀이를 써보려고 한다.

목차
개요
1. 값
2. 값의 타입
3. 값과 표현식
4. 값과 변수
5. 문제 풀이
회고

Just JavaScript에서 배운 내용을 토대로 작성한 내용입니다.

1. 값

먼저, 값(Values)이 무엇인지부터 알아야 할 것 같다. 값이란 Booleans, Numbers, BigInts, Strings, Symbols, Undefined, Null, Objects, Functions을 말한다. 이외의 것은 값이 아니다. 이것들이 무엇인지는 아래에서 더 자세히 알아보자.

2. 값의 타입

값의 타입인 자료형에 대해 간단하게 알아보자. 값은 크게 두 가지로 나뉜다.

바로 원시값(Primitive)과 객체&함수(Objects&Functions)이다. 그 외의 다른 타입은 없다. 이 포스팅에서 자세한 타입은 다루지 않을 것이다!

<원시값>

Undefined
Null
Numbers
Booleans
BigInts
Strings
Symbols

<객체&함수>

Objects
Functions

우리는 원시값을 변경할 수 없다. 원시값은 읽기만 가능하다(Read-only). 예전에 원시값에 대해 처음 배웠을 때는 원시값을 수정할 수 없다는 설명이 전혀 이해가지 않았다.

하지만 이 자료를 읽고서 원시값은 수정할 수 없다는 말을 이해하게 되었다.

이곳에서는 비유를 들어 원시값의 수정 불가능한 특성을 설명하고 있다.

원시값은 '항성(별)'과 같다. 우리는 항상 그 별을 찾을 수 있고 가리킬 수 있지만, 너무 멀리 떨어져 있어 그들을 변경할 수는 없다.

예를 들어보자. 아래와 같은 코드는 어떤 결과가 나올까? 'likes'라고 예상할 수도 있겠지만, 결과는 'yikes'이다.

let reaction = 'yikes';
reaction[0] = 'l';
console.log(reaction); // 'yikes'

아래의 코드도 봐보자.

arr는 배열로, 212인 arr[0]을 420로 바꿀 수 있다. 하지만, 'h'인 str[0]을 'j'로 바꿀 수는 없다.

이유는, arr는 변경이 가능한 객체(Object)이고, str은 멀리 떨어져 있는 별과 같은 개념이라서) 변경할 수 없는 원시값(Primitive)이기 때문이다.

let arr = [212, 8, 506];
let str = 'hello';

console.log(arr[0]); // 212
console.log(str[0]); // 'h'

arr[0] = 420;
console.log(arr);

str[0] = 'j'; 
console.log(str); // 'jello'을 예상할 수 있지만 'hello'가 출력됨

3. 값과 표현식

표현식에 대해서도 알아보자. 표현식(Expressions)이란 무엇일까?

예시를 들어보자. 여기서는 2 + 2가 표현식이다.

console.log(2 + 2); // 4

표현식은 자바스크립트가 답할 수 있는 질문이다. 그리고 콘솔에 찍힌 4를 보면 알 수 있겠지만, 자바스크립트는 표현식에 값으로 답한다. 또, 자바스크립트는 동일한 표현식에 대한 답으로 오직 하나의 값을 가진다.

🔥 참고
'2', 'hello'도 표현식이다.

4. 값과 변수

위에서 원시값은 변경할 수 없다는 것을 알았다. 그런데, 아래의 코드를 봐보자.

pet이 'hamham'에서 'zikzik'으로 변경되었다! 분명히 'hamham'은 원시값인 String인데 어떻게 'zikzik'으로 변경된 것일까?

let pet = 'hamham';
pet = 'zikzik';
console.log(pet); // zikzik

그것은 바로 여기서 pet이 값이 아니기 때문이다. pet은 변수(Variables)이다. 애초에 pet은 값이 아니므로 변경 불가능한 원시'값'도 아닌 것이다.

강의에서는 이에 대해 두 문장으로 정리한다.

Variables are not values 👉 변수는 값이 아니다
Variables point to values 👉 변수는 값을 '가리킨다'

이에 따르면, 아래의 코드에서 pet은 'hamham'이라는 값이 아니라, 'hamham'을 가리킬 뿐이다. 그리고 pet = 'zikzik'으로 인해 pet이 'hamham'이 아니라'zikzik'을 가리키게 되고, 따라서 pet을 콘솔로 찍으면 'zikzik'이 출력된다.

let pet = 'hamham';
pet = 'zikzik';
console.log(pet); // zikzik

🔥 참고
변수도 표현식이다. console.log(pet)을 하면 "현재 pet의 값이 무엇인지" 질문하는 것이다. 이것은 자바스크립트가 답할 수 있는 질문이기 때문에 변수도 표현식이다.

이 과정을 그림으로 그려보면 아래와 같다. pet이 'hamham'을 가리켰다가, 'zikzik'을 가리킨다. 이때, 'hamham'과 'zikzik' 자체는 전혀 변경되지 않는다.

💡 `= (할당연산자)`에 관한 세 가지 규칙

여기서 = (할당연산자)에 대해 더 자세히 알아보려고 한다. = (할당연산자)를 쓸 때에는 세 가지 규칙이 있다.

= (할당 연산자)의 왼쪽에는 절대 값이 들어갈 수 없다.
2000이나 'war'과 같은 값은 왼쪽에 들어갈 수 없다.

20000 = 'leagues under the sea'; // 왼쪽이 값이라서 안 됨
'war' = 'peace'; // 왼쪽이 값이라서 안 됨

= (할당 연산자)의 오른쪽에는 반드시 표현식이 들어가야 한다.
표현식이란 2 + 2와 같이 자바스크립트가 답할 수 있는 질문이다. 자바스크립트는 표현식에 '값'으로 답하므로, = (할당 연산자)의 오른쪽은 항상 결론적으로 값이 된다.

🔥 하지만!!!!
모든 값, 변수도 표현식임을 기억하자. 따라서 1번의 '왼쪽에는 값이 들어갈 수 없다'를 더 중요하게 여기면 될 것 같다. 오른쪽에는 모든 값, 표현식, 변수가 들어갈 수 있으므로!
변수는 서로를 가리킬 수 없다. 변수는 언제나 값을 가리킨다.
즉, = (할당 연산자)의 오른쪽에 모든 값, 표현식, 변수가 들어갈 수 있다는 2번 문항에 따라 = (할당 연산자)의 왼쪽과 오른쪽 모두에 변수가 들어갈 수는 있다. 하지만 = (할당 연산자)의 왼쪽에 있는 변수는 오른쪽에 있는 변수 자체를 가리키는 것이 아니라 그 변수가 가리키는 값을 가리킨다.

5. 문제 풀이

이제 맨 위 개요 부분에서 잠시 언급했던 문제를 풀어보자.

아래의 코드가 실행된 후 x와 y는 각각 어떤 값이 되겠는가?

먼저, let x = 10;에 의해 변수 x가 값 10을 가리킨다.

그리고 'let y = x'`에 의해 변수 y도 값 10을 가리킨다.

💥 질문!!
여기서 y는 왜 x를 직접적으로 가리키지 않고 x가 가리키는 값인 10을 가리킬까?
👉 왜냐하면, 변수는 서로를 가리킬 수 없기 때문이다. 변수는 언제나 값을 가리킨다. = (할당 연산자)의 왼쪽과 오른쪽 모두 변수이지만, 변수는 언제나 값을 가리킨다. 따라서 왼쪽에 있는 변수 y는 x가 가리키는 값인 10을 가리킨다.