변수
1. 변수란?
변수는 아래와 같은 포스트잇과 같습니다. 담겨져 있는 실체는 변하지 않아요. 다만 화장실에 화장실이라는 포스트잇을 붙여넣거나 토일렛이라는 포스트잇을 붙여놓으면, 그 화장실은 화장실이나 토일렛으로 불릴 수 있는 것이죠. 무엇이라 불리던 그 실체가 화장실인 것은 변하지 않습니다.
변수를 저장하는 곳이라고 설명하는 곳도 있어요!
종종 변수는 상자로 표현되곤 합니다. 이와 달리, 변수는 포스트잇에 비유되기도 합니다. 자바스크립트의 표준인 ECMAScript에서는 메모리 관리에 대한 명확한 규칙을 정하지 않고 있습니다. 그래서 어떤 브라우저는 변수를 상자처럼 관리하고, 다른 브라우저는 포스트잇처럼 관리할 수도 있습니다. 따라서 두 비유 모두 틀린 것은 아닙니다.
또한, 원시타입과 참조타입에 따라 변수가 가리키는 값이 달라지기 때문에 단순한 비유로는 설명하기 어려운 부분이 있습니다.
- 원시타입: 숫자(
1,2,3), 문자열('hello','world') 등 간단한 데이터 유형을 말합니다. 일반적으로 원시타입 변수는 실제 데이터를 저장합니다. - 참조타입: 객체(
{'hello':'안녕'}), 배열([1, 2, 3]) 등 여러 값을 가지고 있는 복잡한 데이터 유형을 말합니다. 참조타입 변수는 실제 데이터가 저장된 위치를 가리킵니다.
하지만 실제로는 브라우저가 메모리를 효율적으로 관리하기 위해 최적화를 합니다. 예를 들어, 동일한 값이 여러 번 사용되면 원시타입도 실제 데이터를 저장하지 않고 참조할 수 있습니다. 또한, 브라우저마다 이러한 최적화 방법이 다를 수 있습니다.
2. 변수 선언과 사용
JavaScript에서 변수를 만드는 것은 매우 간단합니다. 변하는 값을 저장하려면 let, 변하지 않는 값을 저장하려면 const를 사용합니다. 이어서 변수 이름을 정하고, 할당 연산자(=)를 사용하여 변수에 값을 할당하면 됩니다.
이 예제에서 'age'라는 변수에 30이라는 값을, 'name'이라는 변수에 "licat"이라는 값을 할당했습니다. 이는 아래와 같은 화살표가 그려지는 것입니다.
변수를 사용하기 위해서는 먼저 변수를 선언해주어야 합니다. 변수를 선언하지 않은 상태에서 변수를 사용하면 오류가 발생합니다.
만약 다음과 같이 변수 선언문 없이 할당문만 작성하면 어떻게 될까요?
위 코드는 문제없이 동작합니다. 키워드를 생략하고 변수의 할당문을 작성하면 해당 변수는 전역 객체의 속성으로 등록됩니다.
이는 var 키워드로 변수를 선언한것과 동일하게 동작합니다. var는 let과 const가 도입되기 전에 변수를 선언하는 키워드입니다. 하지만 var의 다음 몇 가지 특징은 변수를 안전하게 사용하는데 문제가 될 수 있습니다.
var는 재선언이 가능합니다. 변수 이름이 같은 변수를 여러 번 선언할 수 있습니다.
var의 이러한 특징들로 인해 변수를 안전하게 사용하는데 문제가 될 수 있습니다. var를 사용하면 변수를 선언하지 않고 값을 할당할 수 있기 때문에 변수를 선언하지 않고 값을 할당하는 것이 가능합니다.
이와 같은 특징들로 인해 변수를 안전하게 사용하는데 문제가 될 수 있습니다. 따라서 변수를 선언할 때는 let과 const를 사용하는 것을 권장합니다.
키워드를 생략하니 오류가 발생해요
위니북스는 엄격한 규칙을 적용하고 있습니다. 엄격 모드에서는 선언되지 않은 변수의 할당문을 허용하지 않습니다. 이는 변수를 선언할 때 키워드를 생략하는 것을 방지하기 위한 것입니다.
3. 변수는 가리키는 값
let x = 10;
let y = x;
let z = y;let x = 10;
let y = x;
let z = y;만약 위와 같이 변수를 선언하였다면 화살표는 어떻게 만들어질까요? 혹시 여러분이 다음과 같이 변수가 만들어졌다고 생각하신다면 오해를 하고 있는 것입니다
. 만약 위와 같은 화살표였다면 x가 가리키고 있는 값이 변했을 때 y와 z도 값이 변해야합니다. 실행 버튼을 통해 실행해보세요.
따라서 위와 같은 그림은 아래와 같이 그려지는 것이 맞습니다.
let x = 10;
let y = x;
let z = y;let x = 10;
let y = x;
let z = y;
그리고 2번째 예제는 아래와 같이 그려지는 것이죠.
특히 C와 같은 다른 언어에서 배우는 변수 개념으로 JavaScript, Python과 같은 스크립트 언어를 이해하시면 혼란이 올 수 있습니다. C는 변수가 값을 ‘가리키는 것’이 아니라 값이 ‘담겨’있습니다. 이 수업에서 필요 이상의 개념, 예를 들어 C언어나 JAVA언어를 함께 설명하진 않습니다. 여기서 가져가야 할 포인트는 ‘변수의 개념이 프로그래밍 언어마다 다르다’ 입니다.
4. 변수 값 변경
변수에 저장된 값을 변경하려면 새 값을 할당하면 됩니다. let 키워드는 변수를 정의할 때 한 번만 사용합니다.
이 예제에서, 처음에 x에 10을 할당하고, 그런 다음 20을 할당하여 x의 값을 변경했습니다.
이번에는 const로 선언된 변수의 값을 변경해보겠습니다.
TypeError: Assignment to constant variable.라는 메시지가 나올 것입니다. const로 선언된 변수는 한 번 할당된 값을 변경할 수 없습니다.
5. 변수 이름의 규칙
5.1. 변수명 작성 규칙
변수의 이름을 정할 때는 몇 가지 규칙을 따라야 합니다.
-
변수 이름은 문자, 숫자, 언더스코어(
_), 달러($)로 구성됩니다.
$,_를 제외한 공백, 특수문자, 구두점(점(,), 온점(.), 물음표(?) 등)은 사용할 수 없습니다.변수명에 사용되는 문자는 유니코드 문자를 사용할 수 있습니다. 따라서 다음과 같은 변수명이나 한글 변수명도 사용이 가능합니다. 하지만 코드의 가독성을 위해 영어로 작성하는 것을 권장합니다.
let π = 100; π + π; -
변수 이름은 숫자로 시작할 수 없습니다.
- _100test (O) / 1ten, 100_test (X)
-
예약어(if, else, while 등)는 변수 이름으로 사용할 수 없습니다.
JavaScript 예약어 -
변수 이름은 대소문자를 구분합니다. (예: 'name', 'Name', 'NAME'은 모두 다른 변수입니다.)
Name ≠ name
5.1.1. 올바른 변수
변수명 작성 규칙이 적용된 변수명은 다음과 같습니다.
nameageuser_nameUser1_temp$nameInput
5.1.2. 잘못된 변수
다음과 같은 변수명은 잘못된 변수명입니다. 변수명 작성 규칙을 지켜야 합니다.
1user: 숫자로 시작합니다user-name: 하이픈(-)은 허용되지 않습니다.if: 키워드는 변수명으로 사용할 수 없습니다.
5.2. 변수명 작성 관습
다음은 변수명을 작성할 때 주로 사용하는 관습입니다. 이는 꼭 지켜야 하는 규칙은 아니지만, 코드의 가독성을 높이기 위해 사용하는 것이 좋습니다.
- 변수나 함수는 카멜 표기법을 사용합니다. (예:
userName,userAge) - 비공개 속성이나 함수 내부 변수는 앞에 언더스코어(
_)를 붙입니다. (예:_test) - 클래스는 파스칼 표기법을 사용합니다. (예:
User,UserList) - 변수 이름은 의미를 알 수 있도록 작성합니다.
카멜 표기법은 언더스코어 대신 중간 문자를 대문자로 하는 표기법입니다. 낙타 등 같다 하여 카멜이라 합니다. 자바스크립트에서 변수, 함수, 메서드 이름을 짓는 데 많이 사용합니다.
dailyUserCount = 100;dailyUserCount = 100;파스칼 표기법은 모든 단어에 앞 문자를 대문자로 표기하는 것입니다. 클래스 등에서 많이 사용합니다.
DailyUserCount = 100;DailyUserCount = 100;스네이크 표기법은 언더스코어로 띄어쓰기를 표기하는 방법입니다. 뱀 같다 하여 스네이크라 합니다. 예를 들어 아래와 같이 표기될 수 있습니다.
daily_user_count = 100;daily_user_count = 100;