WeniVooks

검색

JavaScript 에센셜

변수란?

1. 변수란?

변수는 이름표의 역할을 합니다. 아래 그림의 포스트잇처럼 공간에 화장실이라는 이름표를 붙여 공간을 지칭할 수 있습니다. 또 다른 공간에는 회의실이라는 이름표를 붙여 공간을 지칭할 수 있습니다. 변수도 이와 같이 값을 지칭하는 이름표입니다.

이 공간에 화장실, 토일렛 등 여러 개의 포스트잇을 붙일 수 있는 것처럼 변수도 하나의 값에 여러 개의 이름표를 붙일 수 있습니다. 포스트잇을 몇 개를 붙이든, 포스트잇에 어떤 글을 쓰든 실체는 변하지 않습니다. 그리고 이 곳을 포스트잇에 적힌 화장실, 토일렛으로 불릴 수 있게 됩니다.

이처럼 변수는 어떤 값을 나타내기 위해 사용하는 이름표라고 할 수 있습니다.

변수는 상자? 포스트잇?

학습 자료에 따라 변수는 상자로 표현되기도 합니다. 자바스크립트의 표준인 ECMAScript에서는 메모리 관리에 대한 명세를 정하지 않고 있으며, 브라우저 엔진마다 다르게 구현될 수 있습니다. 따라서 어떤 브라우저는 변수를 상자처럼 관리하고, 다른 브라우저는 포스트잇처럼 관리할 수도 있습니다. 두 비유 모두 틀린 것은 아닙니다.

또한 브라우저는 메모리의 효율적인 관리를 위해 최적화를 하므로 동일한 값이 여러 번 사용되면 원시타입도 실제 데이터를 저장하지 않고 참조할 수 있습니다. 브라우저마다 이러한 최적화 방법이 다를 수 있습니다. 중요한 것은 변수는 어떤 값을 나타낼 때 사용한다는 것입니다.

1.1. 변수 사용하기
선언

변수는 let 또는 const 키워드를 사용해서 만들 수 있습니다.

let name; console.log(name);
할당

선언한 변수에 값을 저장할 수 있습니다. 변수에 값을 저장하는 것을 할당이라고 합니다. 값을 할당할 때는 할당 연산자(=)를 사용합니다.

let name; // 선언 name = 'licat'; // 할당

let으로 선언한 변수는 값의 재할당이 가능합니다. 하지만 const로 선언한 변수는 재할당이 불가합니다. 따라서 선언과 할당을 동시에 진행해야 합니다.

// const name; // SyntaxError: Missing initializer in const declaration const name = 'licat'; // name = 'weniv'; // TypeError: Assignment to constant variable.

쉼표를 이용하여 여러 개의 변수를 선언할 수도 있습니다.

let age = 20, message = 'hello';
참조

변수에 저장된 데이터를 사용하는 것을 참조라고 합니다. 변수명을 이용하여 변수에 저장된 값에 접근할 수 있습니다. 선언하지 않은 변수에 접근하면 오류가 발생합니다. 따라서 변수를 사용하기 전에 반드시 선언 해야 합니다.

const name = 'licat'; console.log(name); console.log(age); // ReferenceError: age is not defined let age = 20, message = 'hello'; age = 30; console.log(name); console.log(age);

이 예제에서 'age'라는 변수에 30이라는 값을, 'name'이라는 변수에 "licat"이라는 값을 할당했습니다. 이는 아래와 같은 화살표가 그려지는 것입니다.

선언문 없이 할당문만 사용하면
변수를 사용하기 위해서는 반드시 변수를 먼저 선언해야 합니다. 하지만 자바스크립트에서 선언하지 않은 변수의 할당문을 사용하면 오류가 발생하지 않는 것을 알 수 있습니다.

a = 10; b = 20; console.log(a); console.log(b);

키워드를 생략하고 변수의 할당문을 작성하면 해당 변수는 전역 객체의 속성으로 등록됩니다. 즉, window 객체의 속성으로 등록됩니다. 선언문을 생략하는 것은 엄격모드에서는 오류가 발생합니다. 또한 전역 객체의 속성으로 등록되기 때문에, 전역 변수를 만들게 됩니다. 이는 코드의 가독성을 떨어뜨리고, 전역 변수를 덮어쓰는 등의 문제를 일으킬 수 있습니다. 따라서 자바스크립트에서는 변수를 선언할 때 반드시 키워드를 사용해야 합니다.

1.2 변수는 가리키는 값

변수는 값을 나타내기 위해 사용됩니다. 만약 다음과 같이 변수를 다른 변수에 할당하면 어떻게 동작할까요?

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; x = 20; console.log(x); console.log(y); console.log(z);

자바스크립트에서 변수를 다른 변수에 할당하면 변수가 가리키는 값이 복사되어 전달됩니다. 따라서 다음 코드는 아래와 같이 그려집니다.

let x = 10;
let y = x;
let z = y;
let x = 10;
let y = x;
let z = y;

따라서 x, y, z가 모두 다른 값을 가리키고 있기 때문에, x의 값을 변경해도 y와 z의 값은 변하지 않습니다.

let x = 10; let y = x; let z = y; x = 20; console.log(x); // 20 console.log(y); // 10 console.log(z);

특히 C와 같은 다른 언어에서 배우는 변수 개념으로 JavaScript, Python과 같은 스크립트 언어를 이해하시면 혼란이 올 수 있습니다. C는 변수가 값을 ‘가리키는 것’이 아니라 값이 ‘담겨’있습니다. 이 수업에서 필요 이상의 개념, 예를 들어 C언어나 JAVA언어를 함께 설명하진 않습니다. 여기서 가져가야 할 포인트는 ‘변수의 개념이 프로그래밍 언어마다 다르다’ 입니다.

2. 변수명 작성 규칙

2.1 작성 규칙

변수의 이름을 정할 때는 몇 가지 규칙을 따라야 합니다.

  1. 변수 이름은 문자, 숫자, 언더스코어(_), 달러($) 로 구성됩니다.
    $, _ 를 제외한 공백, 특수문자, 구두점(점(,), 온점(.), 물음표(?) 등)은 사용할 수 없습니다.

    변수명에 사용 가능한 유니코드 문자에는 알파벳 뿐만 아니라 그리스 문자( α, β, γ, δ, π), 한글, 일본어, 중국어 등도 포함됩니다. 따라서 변수명은 영어뿐만 아니라 다양한 언어로 작성할 수 있습니다. 하지만 코드의 가독성을 위해 영어로 작성하는 것을 권장합니다.

    let π = 100; console.log(π + π); const 사용자_이름 = 'licat'; console.log(사용자_이름);

  2. 변수 이름은 숫자로 시작할 수 없습니다.

    • _100test (O) / 1ten, 100_test (X)

  3. 예약어(if, else, while 등) 는 변수 이름으로 사용할 수 없습니다.

    JavaScript 예약어

  4. 변수 이름은 대소문자를 구분합니다. (예: 'name', 'Name', 'NAME'은 모두 다른 변수입니다.) Name ≠ name

자바스크립트의 예약어
자바스크립트 언어 자체의 예약어는 변수명으로 사용할 수 없습니다. 하지만 DOM이나 BOM과 관련한 객체들은 기술적으로는 변수명으로 사용할 수 있습니다. 변수명으로 사용하면 기존의 객체를 덮어쓰게 되고 기존 기능을 사용할 수 없게 되므로 주의해야 합니다.

let console = "hello"; console.log(console);
올바른 변수

변수명 작성 규칙이 적용된 변수명은 다음과 같습니다.

  • name
  • age
  • user_name
  • User1
  • _temp
  • $nameInput
잘못된 변수

다음과 같은 변수명은 잘못된 변수명입니다. 변수명 작성 규칙을 지켜야 합니다.

  • 1user: 숫자로 시작합니다
  • user-name: 하이픈(-)은 허용되지 않습니다.
  • if: 키워드는 변수명으로 사용할 수 없습니다.
2.2 변수명 작성 관습

다음은 변수명을 작성할 때 주로 사용하는 관습입니다. 이는 꼭 지켜야 하는 규칙은 아니지만, 코드의 가독성을 높이기 위해 사용하는 것이 좋습니다.

  1. 변수나 함수는 카멜 표기법 을 사용합니다. (예: userName, userAge)
  2. 비공개 속성이나 함수 내부 변수는 앞에 언더스코어(_)를 붙입니다. (예: _test)
  3. 클래스는 파스칼 표기법을 사용합니다. (예: User, UserList)
  4. 변수 이름은 의미를 알 수 있도록 작성합니다.

카멜 표기법(camelCase)
언더스코어 대신 중간 문자를 대문자로 하는 표기법입니다. 낙타 등 같다 하여 카멜이라 합니다. 자바스크립트에서 변수, 함수, 메서드 이름을 짓는 데 많이 사용합니다.

const userName = 'licat';
function printUserInfo() { ... };
const userName = 'licat';
function printUserInfo() { ... };

파스칼 표기법(PascalCase)
모든 단어에 앞 문자를 대문자로 표기하는 것입니다. 클래스 등에서 많이 사용합니다.

class UserProfile { ... };
class UserProfile { ... };

스네이크 표기법(snake_case)
언더스코어(_)로 띄어쓰기를 표기하는 방법입니다. 뱀 같다 하여 스네이크라 합니다. 예를 들어 아래와 같이 표기될 수 있습니다. 상수를 나타날 때 대문자로 표기하는 경우가 많습니다.

const MAX_COUNT = 10;
const API_KEY = 'xxx';
const MAX_COUNT = 10;
const API_KEY = 'xxx';

케밥 표기법(kebab-case)
하이픈(-)으로 단어를 연결하는 표기법입니다. HTML 요소의 id, class 등에 주로 사용합니다.

<div class="user-profile" data-user-id="123"></div>
<style>
  .nav-item {
    ...;
  }
  .btn-primary {
    ...;
  }
</style>
<div class="user-profile" data-user-id="123"></div>
<style>
  .nav-item {
    ...;
  }
  .btn-primary {
    ...;
  }
</style>
2장 변수2.2 변수의 특징