변수 (variable)
변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체이며, 메모리 공간을 식별하기 위해 붙인 이름 입니다.
이렇게 이야기를 하면 정확하게 무엇인지 감이 안잡힐 수도 있는데, 변수는 자바스크립트 코드를 사용하면서 자주 접하는 아주 가까운 친구입니다.
var number = 10
console.log(number) // 10위 예시에서 우리는 number라는 변수 이름으로 숫자 10을 저장하고, 출력할 수 있습니다.
즉, 값을 저장하고 우리가 쉽게 사용할 수 있도록 상징적인 이름을 붙인것이 변수입니다.
하지만 변수는 단순하게 특정한 값을 저장하는게 아닙니다. 사실 number는 10이라는 숫자 자체를 저장한 것이 아니라, 10이 저장된 메모리 공간을 참조하는 이름 입니다.
자바스크립트 엔진은 실제로는 우리가 코드에서 선언한 값을 컴퓨터 메모리의 특정 위치에 저장하고, 그 메모리 주소를 가리키는 이름표 가 바로 변수입니다.
결과적으로 number라는 변수는 우리가 10이라는 값을 쉽게 다룰 수 있도록 도와주는 메모리 주소*입니다.
📌 변수 이름과 변수 값
변수는 변수 이름 : 변수 값으로 구성됩니다.
변수이름 (또는 식별자)는 어떠한 값을 구별해서 식별할 수 있는 고유의 이름입니다. 앞서 설명했듯 변수 이름은 직접적으로 값과 연결되는 것이 아니라, 값이 저장된 메모리 주소를 참조합니다.
즉, 변수 이름은 값의 별명이 아니라 값이 저장된 메모리 위치를 가리키는 역할을 합니다.
변수 값은 변수 이름을 통해 접근할 수 있는 실제 데이터 입니다.
예를 들어 아래과 같은 비유로 생각할 수 있습니다.
변수 이름 - jin's house라는 별명
메모리 주소 - 여의대방로 XX길 이라는 실제 도로명 주소
값 - jin 해당 주소에 사는 거주자
변수 이름은 "jin's house"처럼 어떤 위치를 가리키는 별명이며, 실제로 그 별명이 참조하는 값은 "jin"이라는 사람입니다. 그리고 그 사람이 사는 위치(메모리 주소)가 "여의대방로 XX길"인 것처럼, 변수는 메모리에서 데이터를 가리키고 있습니다.
📌 변수 선언과 값의 할당
변수 선언은 변수를 생성하는 것을 의미합니다. 자세하게는 값을 저장할 메모리 공간을 확보하고, 변수 이름과 해당 메모리 공간을 연결하여, 나중에 값을 저장할 준비를 하는 과정입니다.
변수를 사용하기 위해서는 반드시 선언이 필요하며 선언시에는 var, let, const와 같은 키워드를 사용합니다.
값의 할당은 선언된 변수에 값을 저장하는 과정입니다. 할당된 값은 나중에 해당 변수 이름을 통해 접근할 수 있습니다.
선언과 할당은 각각 문을 나눠 표현하거나, 하나의 문으로 단축 표현이 가능합니다.
ex 1) 선언과 할당을 나눠서 표현
var spiderman // 변수 선언
spiderman = 'peter parker' // 값의 할당ex 2) 선언과 할당을 하나의 문으로 단축 표현
var spiderman = 'peter parker' // 변수 선언과 값의 할당 (동시 수행)여기서 주의할 점은, 변수 선언과 값의 할당이 항상 동시에 이루어지는 것은 아니라는 점입니다. 두 과정은 구분될 수 있으며, 각각 다른 시점에 실행될 수 있습니다.
예를 들어 변수의 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행되지만, 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행됩니다. 이는 자바스크립트의 특징인 변수 호이스팅입니다.
📌 변수 호이스팅
console.log(spiderman);
var spiderman; // 변수 선언문위 코드 처럼 변수 선언문보다 먼저 변수를 참조해서 출력하면 어떻게 될까요??
앞서 설명한 것처럼 변수 선언과 값의 할당은 동시에 이루어지지 않습니다.
자바스크립트에서는 변수 선언이 런타임(코드가 실행되는 시점)이 아니라 그 이전에 처리되기 때문에, 참조 오류(ReferenceError)가 발생하지 않고 undefined가 출력됩니다. (*var 키워드는 선언과 동시에 undefined로 초기화 되기 때문)
이는 자바스크립트 엔진이 실행 전에 코드 내 모든 선언문을 찾아 가장 먼저 처리하기 때문입니다. 이처럼 변수 선언문이 코드 상의 위치와 상관없이 마치 코드의 선두로 끌어올려진 것처럼 동작하는 자바스크립트의 고유한 특성을 변수 호이스팅(variable hoisting)이라고 합니다.
! 중요한 점은, 변수뿐만 아니라 함수 선언문 같은 모든 선언문도 런타임 이전에 미리 실행된다는 것입니다.
📌 값의 재할당
var spiderman = 'peter parker'
spiderman = 'Miles Morales'이미 값이 할당되어 있는 변수에 새로운 값을 또 다시 할당하고 싶을땐 재할당을 통해 값을 변경할 수 있습니다.
예를 들어, 위 코드에서 spiderman 변수에 처음에는 'peter parker'라는 값이 할당되어 있지만, 이후에 'Miles Morales'라는 값으로 재할당하게 되면, 기존 값이 변경되는 것이 아니라 새로운 메모리 공간이 확보되고 그곳에 새로운 값이 저장됩니다.
즉, 'peter parker'라는 값이 메모리에서 완전히 사라지는 것이 아니라, 메모리 어딘가에 남아 있을 수 있으며, 다만 더 이상 spiderman 변수가 그 값을 참조하지 않을 뿐입니다.
하지만, const 키워드를 사용해 선언한 변수는 재할당이 금지됩니다. 상수로 선언된 변수는 처음 할당된 값만 사용할 수 있고, 이후에 값을 변경하려고 하면 아래와 같이TypeError가 발생합니다.
const spiderman = 'peter parker';
spiderman = 'Miles Morales'; // TypeError: Assignment to constant variable.따라서, 변수에 값을 재할당할 필요가 있을 때는 let이나 var 키워드를 사용하고, 값을 변경하지 않겠다고 확실히 의도한 경우에는 const를 사용하는 것이 좋습니다.
변수 선언 키워드에 대해서는 다음 포스팅에서서 자세하게 설명하겠습니다 😀
📌 네이밍 규칙
변수 이름 (식별자)에는 아래와 같은 네이밍 규칙을 준수해야 합니다:
- 사용할 수 있는 문자: 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있습니다.
- 시작 문자: 식별자는 문자, 언더스코어(_), 달러 기호($)로 시작해야 하며, 숫자로 시작하는 것은 허용되지 않습니다.
- 예약어 사용 금지: 예약어는 식별자로 사용할 수 없습니다. 예약어는 await, break, case, class와 같이 프로그래밍 언어에서 이미 사용되고 있거나 사용될 예정인 단어를 의미합니다.
여러 단어로 구성된 식별자를 만들 때는 가독성을 높이기 위해 네이밍 컨벤션을 따르는 것이 중요합니다. 일반적으로 사용하는 몇 가지 방법은 다음과 같습니다.
- 카멜 케이스 (camelCase): 첫 번째 단어는 소문자로 시작하고, 그 이후의 단어는 대문자로 시작합니다. ex) userName, isLoggedIn, totalAmount
- 스네이크 케이스 (snake_case): 모든 단어를 소문자로 작성하고, 단어 사이에 언더스코어(_)를 사용하여 구분합니다. ex) user_name, is_logged_in, total_amount
- 파스칼 케이스 (PascalCase): 모든 단어의 첫 글자를 대문자로 작성합니다. 주로 클래스 이름에 사용됩니다. ex) UserName, IsLoggedIn, TotalAmount
- 헝가리안 표기법 (Hungarian Notation): 변수 이름 앞에 해당 변수의 데이터 타입이나 목적을 명시하는 방법입니다. 이 방식은 변수의 역할이나 데이터 타입을 즉시 알 수 있다는 장점이 있습니다. ex) strUserName: 문자열(string) 데이터를 담는 변수, nCount: 숫자(number) 데이터를 담는 변수, bIsLoggedIn: 불리언(boolean) 데이터를 담는 변수
저는 보통 카멜케이스를 주로 사용해왔는데, 책에 따르면 일반적으로 자바스크립트에서는 변수나 함수에는 카멜 케이스(camelCase)를, 생성자 함수, 클래스 이름에는 파스칼케이스(PascalCase)를 사용한다고 하며, 변수 선언시 위 규칙을 생각하며 이름을 만드는 습관을 기르면 코드 가독성이 더욱 높아질 것 같습니다.
⭐️ 마무리
앞으로 매주 모던자바스크립트 Deep Dive 책을 읽으며 배운 내용을 정리하고, 저만의 방식으로 이해한 내용을 작성해보려 합니다.
공부를 하며 내용을 정리하다보니 틀린 내용이나 수정이 필요한 부분이 있다면 언제든 따끔하게 말씀해주세요 🥲
출처: 모던 자바스크립트 Deep Dive 4장 변수 (34p ~ 49p)
따끔