🌈 시작하며
휴, 이제야 변수로 들어가게 되는군요.
최근에 마찰력이라는 것을 이전 지인에게 들었어요. 모든 것을 다시 시작할 때에는 마치 마찰력이 존재해서, 처음에 엄청 큰 힘이 든다는 것이었습니다.
사실 이 글을 쓰게 되면서, 꽤 적잖은 시간이 걸렸어요. 거의 반나절...?은 걸린 것 같아요.
그렇지만 제가 스터디를 했던 순간들을 제대로 남겨놓기 위해서는, 분명 저만의 언어로 모든 글들을 재정립해야 한다는 것을 배웠고, 이를 실천하기 위해 다시금 차분히 글을 쓰기 시작했습니다.
그럼, 다시 들여다 볼까요? 👀
🚦 본론
변수(Variable)란 무엇일까요?
일단 이름에서 어느정도 유추할 수 있을 것 같아요. 간단히 말하자면 변할 수 있는 수라고 말할 수 있겠습니다.
하지만 좀 더 깊이 들여다 보면, 이 말이 맞는 것 같지만 담긴 의미는 살짝 다르다는 것을 알 수 있어요. 함께 들여다 볼까요? 👀
그러면 일단 의아한 게 있어요.
어떻게 컴퓨터는 변화를 인식할 수 있을까요?
이는 먼저 CPU와 메모리를 이해해야 합니다.
보통 CPU는 연산을 처리하고, 메모리는 값의 저장을 담당합니다.
따라서, 우리가 만약 특정 식을 썼다면, 우선 기호를 구분하여 연산을 처리하고, 결과적으로 식을 파싱(해석)하여 어떤 특정 값을 메모리에다 저장하는 것입니다.
그런데, 메모리의 어느 곳에다 넣었는지를 정확히 알아야 하겠죠?
그것이 바로 주소입니다. 마치 아파트 주소처럼,
- 컴퓨터는 어떤 특정한 값을 저장할 때 어떤 주소에 넣고,
- 나중에 그 주소를 말하면 그 안에 있는 값을 빼내오는 거에요.
😮 잠깐!
그러면, 변수는 도대체 왜 필요한 거죠? 주소로만 접근하면 되잖아요.
이는, 안전성과 가독성 때문입니다.
결국 메모리 주소로 접근한다는 것은 이 값에 담긴 의미를 정확히 해석하기 어렵다는 단점이 있어요. 이는 고레벨 수준의 언어에서의 장점을 스스로 지워버리는 꼴이죠.
또한, 이 값의 의미가 없기 때문에, 자칫 오타 등으로 쉽게 접근해버리는 수가 있습니다.
특히, 이 값을 변경해버리는 순간, 그 주소가 어떤 중요한 값을 내포했는지에 따라 컴퓨터가 정말 큰일 나겠죠?
따라서, 이런 실수들을 범하지 않도록, 자바스크립트는 메모리에 대한 직접적인 접근을 제한하고, 접근을 권장하지 않아요.
대신, 변수를 통해
- 어떤 특정한 메모리 주소를 마치 별칭으로 붙이고,
- 이 주소에 접근하여 값을 알아내기 때문에
우리는 이를 식별자라고 부르기도 합니다.
핵심은, 변수는 정확히 말하자면 메모리 주소를 기억한다는 것이에요.
그렇기에 변수에 값을 할당한다는 것은, 특정 메모리 주소에 값을 할당한다는 의미와 상통하게 되는 것이죠.
그럼 이런 궁금증이 생기실 수 있어요. 어떻게 변수는 주소를 기억하고 있을까요?
이를 확인해보기 위해 <코어자바스크립트> 책을 추가로 뒤져본 결과, 다음과 같은 설명이 나오네요.
변수 영역에서 빈 메모리 공간을 확보한 후, 확보한 공간의 식별자를 지정합니다.
이후, 해당 영역의 빈 공간에 값을 저장합니다.
이렇게 투 트랙에 걸쳐서, 변수는 드디어 값을 담고 있는 주소에 접근할 수 있는 것이에요.
이렇게 굳이 두 번에 나뉘어서 메모리에 식별자와 값을 별도로 저장하는 이유는 무엇일까요?
이는 메모리를 동적으로 할당할 때 발생할 수 있는 문제점을 방지하기 위해서입니다.
예컨대 만약 문자열이 가변적으로 변한다면, 데이터의 크기가 달라지므로 이에 맞게 메모리에 계속해서 저장해야겠죠?
그런데 만약 제가 이 문자열을 지속적으로 수정한다고 할 때, 이 문자가 뒤에 있는 남은 공간이 없다고 하면 어떻게 될까요?
그렇게 되면, 모든 뒤의 데이터들의 저장 공간을 뒤로 옮기고, 다시 다른 변수들에게도 변한 주소 값을 지칭하도록 연결하는 작업이 추가적으로 발생할 거에요.
그런데 사실, 해당 값의 주소만 바꾸고, 변수명에 저장된 주소만 다시 재지정해주면 되는 일이잖아요? 따라서 이런 동적인 메모리 관리에 유리하도록, 식별자(변수)와 데이터의 저장 공간을 별도로 지정해주는 것이랍니다. 🥰
정리하자면, 변수란 변할 수 있는 값들을 메모리 상에 담은 주소를 기억하는 식별자라고 할 수 있겠어요.
변수 선언과 할당, 호이스팅
원래 책에서는 이를 다 나눠서 설명하고 있지만, 저는 이를 합치기로 했어요.
결국 핵심은 언제 선언되고, 언제 초기화되며, 언제 실행되는지를 정확히 인지하는 것에서 모든 것을 이해할 수 있다고 생각했기 때문이에요.
그리고 이 시작은 변수 선언이며, 이것을 이해하는 것이 정말 중요합니다.
자바스크립트의 변수 선언 시점은 중요해요. 이로 인해 호이스팅이라는 현상이 발생하기 때문이죠!
변수를 선언하는 건 간단해요.
var a;
let b;
const c = 1; // const는 상수화된 변수이므로, 반드시 값을 할당해주어야 합니다.모두 가능한 방식입니다.
그런데 보통 코드랑 달라서 의아할 거에요. 왜 const 빼고 값을 할당해주지 않아도 되는 거죠?
그것은 자바스크립트의 동작 방식에서 기인한 현상이에요.
자바스크립트에서는 일단 코드를 실행하기 전에 먼저 값을 저장하기 위한 메모리 공간을 확보시켜줍니다. 그리고 주소를 연결해주어 해제하기 전까지 다른 사람이 접근을 할 수 없도록 보장해줘요.
따라서 var a = 2라는 것이 있다면, 컴퓨터는 이런 식으로 동작하게 됩니다.
var a;- 변수 a라는 게 있구나!- 메모리를 쓸 수 있게끔 해주어야겠다. 일단 초기화를 해둘까?
- 준비 과정이 끝났어. 이제 코드를 실행해볼까? (런타임)
a라는 변수에는 2라는 값이 할당되어야 하겠구나!
핵심은, 런타임 이전에 선언과 초기화가 먼저 이루어진다는 것입니다.
따라서 자바스크립트는 이런 괴상한 기행이 가능해요. 물론 var라는 예약어에 한정해서 말이죠.
console.log(jy)
var jy;
jy = '재영';
console.log(jy);이는 이렇게 해석이 됩니다.
1. 선언을 먼저 찾는다.
여기서 포인트는, 선언문은 자바스크립트에서 해석한 순간, 실행 과정에서 제외된다는 것이에요. 그래서 이제 3번을 보면, 그 선언문이 없어지는 것을 확인할 수 있습니다.
console.log(jy)
var jy; // 이 친구가 선언이구나! 이제 얘는 알아냈으니, 시간 아까우니 없는 셈치자!
jy = '재영';
console.log(jy);
2. 초기화한다.
var jy = undefined로 해석해준다.
3. 런타임을 실행한다.
// jy = undefined
console.log(jy)
jy = '재영';
console.log(jy);
그렇다면 결과는 undefined, 재영이겠네요. 간단하죠? 물론 저도 스터디할 때 굉장히 헷갈렸는데, 이 순서를 정확히 짚은 순간 헷갈리지 않더라구요.
항상 이 흐름을 기억해주면, 어떤 방식이든 어렵지 않습니다.
변수 호이스팅
그런데 위의 해석의 3번을 보면, 마치 변수가 끌어올려진 것 같지 않나요?
위에서도 말했지만, 선언문은 먼저 선언 때 정리하는 순간, 이후 런타임 실행 때는 마치 끌어올려진 것으로 해석되어, 별도로 해석을 하지 않게 돼요.
이를 변수 호이스팅이라고 하는 거에요. 매우 간단하죠?
✨ 마치며
후! 확실히 글로 풀어 쓰니까, 저 자신에게 더 깔끔하게 납득할 수 있는 언어로 개념이 이해될 것 같아요. 정말 많은 시간이 들었지만, 충분한 투자였던 것 같아요.
아! 변수에 있어서 빠져서는 안될 예약어인 let, const는 나중에 별도로 서술되어 있기 때문에 그 때 보충해서 설명하면 될 거 같아요. 그래서 var을 위주로 서술했답니다.
아마 이제는 하루에 2개씩, 글을 쓰게 될 것 같아요. 다들 즐거운 코딩하시길 바라며, 그럼 이상!
.jpg)