JavaScript 베이스캠프

주석과 변수

1. 주석

주석은 코드에 대한 설명을 추가하거나, 코드의 특정 부분을 일시적으로 비활성화할 때 사용됩니다. JavaScript에서는 두 가지 유형의 주석을 사용할 수 있습니다.

1.1 단일 행 주석

단일 행 주석은 코드의 한 줄에 주석을 추가할 때 사용됩니다. // 기호를 사용하여 주석을 시작합니다. // 뒤의 모든 내용은 주석으로 처리되며, JavaScript 엔진에 의해 무시됩니다.

let age = 30; // 나이 변수 let name = 'Jun'; // 이름 변수 console.log(age, name); // 결과 값은 30 Jun입니다.

이번에는 코드를 설명하는 것이 아니라 코드를 주석처리 해보도록 하겠습니다. 아래 코드에서 console.log(age);에 되어 있는 주석을 풀어보세요. 앞에 //를 지우면 됩니다.

let age = 30; let name = 'Jun'; // console.log(age); console.log(name);

1.2 다중 행 주석

다중 행 주석은 여러 줄에 걸쳐 주석을 추가할 때 사용됩니다. /*로 주석을 시작하고 */로 주석을 종료합니다. /*와 */ 사이의 모든 내용은 주석으로 처리됩니다.

/*
이 코드는 사용자의 나이와 이름을 저장합니다.
변수 age는 사용자의 나이를 저장하고,
변수 name은 사용자의 이름을 저장합니다.
*/
let age = 30;
let name = 'Jun';

/*
이 코드는 사용자의 나이와 이름을 저장합니다.
변수 age는 사용자의 나이를 저장하고,
변수 name은 사용자의 이름을 저장합니다.
*/
let age = 30;
let name = 'Jun';

주석은 코드의 가독성을 높이고, 협업 시 코드의 의도를 설명하는 데 매우 유용합니다. 적절한 주석을 사용하여 코드의 기능과 목적을 명확하게 하는 것이 좋습니다.

2. 변수

변수는 변하는 값이라는 뜻을 가지고 있습니다.

let name = 'Licat'; let age = 30; console.log(name); console.log(age);

여기서 변수는 name와 age입니다. name은 Licat이라는 값을, 변수 age는 30이라는 값을 가리킵니다. 변수가 수학에서처럼 저장하는 개념이 아니기에 포스트잇에 비유합니다. Licat에 값에 name이라는 포스트잇을 붙이고, 30에 값에 age라는 포스트잇을 붙인다고 생각하면 됩니다.

앞으로는 이 교안에서 변수와 값의 관계는 아래와 같은 화살표로 표시합니다.

변수를 저장하는 곳이라고 설명하는 곳도 있어요!

종종 변수는 상자로 표현되곤 합니다. 이와 달리, 변수는 포스트잇에 비유되기도 합니다. 자바스크립트의 표준인 ECMAScript에서는 메모리 관리에 대한 명확한 규칙을 정하지 않고 있습니다. 그래서 어떤 브라우저는 변수를 상자처럼 관리하고, 다른 브라우저는 포스트잇처럼 관리할 수도 있습니다. 따라서 두 비유 모두 틀린 것은 아닙니다.

또한, 원시타입과 참조타입에 따라 변수가 가리키는 값이 달라지기 때문에 단순한 비유로는 설명하기 어려운 부분이 있습니다.

원시타입: 숫자(1, 2, 3), 문자열('hello', 'world') 등 간단한 데이터 유형을 말합니다. 일반적으로 원시타입 변수는 실제 데이터를 저장합니다.
참조타입: 객체({'hello':'안녕'}), 배열([1, 2, 3]) 등 복잡한 데이터 유형을 말합니다. 참조타입 변수는 실제 데이터가 저장된 위치를 가리킵니다.

하지만 실제로는 브라우저가 메모리를 효율적으로 관리하기 위해 최적화를 합니다. 예를 들어, 동일한 값이 여러 번 사용되면 원시타입도 실제 데이터를 저장하지 않고 참조할 수 있습니다. 또한, 브라우저마다 이러한 최적화 방법이 다를 수 있기 때문에 일관되게 설명하기 어렵습니다.

이 강의에서는 변수를 포스트잇에 비유하여 설명할 것입니다. 더 자세한 메모리 관리는 중급자 강의인 '견고한 시리즈'를 참고해주세요.

3. 변수의 생성

JavaScript에서 변수를 만드는 방법은 3가지가 있습니다. var, let, const 키워드를 앞에 붙이는 것입니다. 이 중 var는 가장 오래된 변수 표현 방식이지만 여러가지 단점이 있어 모던자바스크립트에서 권고하지 않습니다. 전역에서 변하는 값을 저장하려면 var를, 변하는 값을 저장하려면 let를, 변하지 않는 값을 저장하려면 const를 사용합니다. 이어서 변수 이름을 정하고, = 기호를 사용하여 변수에 값을 할당하면 됩니다.

let age = 30;
let name = 'Jun';

let age = 30;
let name = 'Jun';

만약 키워드를 생략하고 변수를 만들어 보도록 하겠습니다. 실행 버튼을 눌러보세요.

age = 30; name = 'Jun';

ReferenceError: age is not defined라는 에러가 발생했을 것입니다. 변수를 만들 때는 반드시 키워드를 사용해야 합니다.

이제는 var 키워드 사용을 권장하지 않습니다. 변수를 선언할 때는 let과 const를 사용해 주세요.

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

4. 변수가 가리키는 값

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); // 결과 값은 20입니다. console.log(y); // 결과 값은 10입니다. console.log(z); // 결과 값은 10입니다.

따라서 위와 같은 그림은 아래와 같이 그려지는 것이 맞습니다.

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

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

그리고 2번째 예제는 아래와 같이 그려지는 것이죠.

let x = 10; let y = x; let z = y; x = 20; console.log(x); // 결과 값은 20입니다. console.log(y); // 결과 값은 10입니다. console.log(z); // 결과 값은 10입니다.

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

5. 변수 이름의 규칙

5.1 변수 이름 짓기

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

변수 이름은 알파벳(대문자와 소문자), 숫자, 언더스코어(_), 달러($)로 구성됩니다. $, _ 를 제외한 공백, 특수문자, 구두점(글의 여러 가지 경계를 구분하기 위해 사용되는 반점(,), 온점(.), 물음표(?), 띄어쓰기 등)을 사용할 수 없습니다.

물론 아래와 같은 변수명이 안되는 것은 아니지만 관습적으로 허락하지 않습니다.

let π = 100;
π + π;

let π = 100;
π + π;

변수 이름은 숫자로 시작할 수 없습니다. 1ten / 100_test (x) _100test
키워드(예: if, else, while 등)는 변수 이름으로 사용할 수 없습니다.
- 예약어가 쓰일 수 없습니다. 모두 외우실 필요는 없습니다. 문법을 익혀 나가면서 자연스럽게 익히게 됩니다.
변수 이름은 대소문자를 구분합니다. (예: 'name', 'Name', 'NAME'은 서로 다른 변수입니다.) Name ≠ name
관습
1. 일반 변수는 첫 문자를 소문자로 쓰는 것이 보통입니다.
2. 사용하지 않는 변수는 언더스코어(_)로 명명합니다. test → _test
3. 클래스는 첫 문자를 대문자로 사용합니다. class Test():
4. 변수 이름은 카멜 표기법을 주로 사용합니다. (선호하는 변수명은 언어마다 다릅니다.)

스네이크 표기법은 언더스코어로 띄어쓰기를 표기하는 방법입니다. 뱀 같다 하여 스네이크라 합니다. 예를 들어 아래와 같이 표기될 수 있습니다.

daily_user_count = 100;

daily_user_count = 100;

카멜 표기법은 언더스코어 대신 중간 문자를 대문자로 하는 표기법입니다. 낙타 등 같다 하여 카멜이라 합니다.

dailyUserCount = 100;

dailyUserCount = 100;

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

DailyUserCount = 100;

DailyUserCount = 100;

5.2 올바른 변수 이름의 예

name
age
user_name
User1
_temp

5.3 잘못된 변수 이름의 예

1user (숫자로 시작합니다)
user-name (하이픈(-)은 허용되지 않습니다)
if (키워드입니다)

6. 변수의 타입

변수의 타입은 해당 변수를 어떻게 관리하고 처리할 것인지를 결정합니다. 변수의 타입에 따라 컴퓨터는 메모리를 할당하고 값을 처리하거나 연산하는 등 해석하는 방식이 달라집니다.

아래 코드에서 age에는 10이라는 숫자를, name에는 "Jun"이라는 문자열을 할당합니다. 이때 age와 name은 서로 다른 타입을 가지게 됩니다. 아래 코드를 실행하면 변수의 타입을 확인할 수 있습니다.

let age = 10; console.log(typeof age); // "number" let name = 'Jun'; console.log(typeof name); // "string"

typeof 연산자는 변수의 타입을 문자열로 반환합니다. 예를 들어, typeof age는 number를 반환하고, typeof name은 string을 반환합니다.

age는 숫자이기 때문에 더하기, 빼기, 곱하기, 나누기 등의 수학적 연산을 수행할 수 있습니다. name은 이러한 수학적 연산이 되지 않습니다. 덧셈은 가능하지만 수학 연산이 아니라 문자열을 이어붙일 뿐이죠. 이렇듯 변수의 타입에 따라 변수가 가지는 특성이 달라집니다.

7. 변수 값 변경

변수에 저장된 값을 변경하려면 새 값을 할당하면 됩니다. let 키워드는 변수를 정의할 때 한 번만 사용합니다.

let x = 10; console.log(x); x = 20; console.log(x);

이 예제에서, 처음에 x에 10을 할당하고, 그런 다음 20을 할당하여 x의 값을 변경했습니다.

이번에는 const로 선언된 변수의 값을 변경해보겠습니다.

const y = 10; console.log(y); y = 20; console.log(y);

TypeError: Assignment to constant variable.라는 메시지가 나올 것입니다. const로 선언된 변수는 한 번 할당된 값을 변경할 수 없습니다.

8. 변수의 특징

변수를 만들 때는 var, let, const라는 세 가지 키워드를 사용할 수 있습니다. 이 키워드들은 변수를 어떻게 다룰지를 결정합니다.

var: 변수를 만들 때 사용하는 오래된 방법입니다. var로 만든 변수는 나중에 다시 선언할 수 있고, 값을 바꿀 수 있습니다. 하지만 이런 이유로 코드가 복잡해질 수 있어, 요즘은 잘 사용하지 않습니다.
let: 변수를 만들 때 요즘 많이 사용하는 방법입니다. let으로 만든 변수는 값을 바꿀 수 있지만, 같은 이름으로 다시 선언할 수는 없습니다. 그리고 let은 블록 안에서만 사용할 수 있습니다.
const: 상수를 만들 때 사용합니다. 상수는 값을 한 번 정하면 바꿀 수 없습니다. const로 만든 변수는 반드시 처음에 값을 정해줘야 합니다. let처럼 블록 안에서만 사용할 수 있습니다.

블록은 무엇인가요?

자바스크립트 문법에는 여러줄의 코드를 하나로 묶어주는 단위인 블록({})이 존재합니다. 블록은 코드의 범위를 나타내며, let과 const 키워드로 만든 블록 안에서 선언된 변수는 블록 밖에서 접근할 수 없습니다.

8.1 var 예제 코드

아래 예제를 통해 각 키워드의 특징을 확인해보세요.

var name = 'jun'; // 1000줄의 코드 생략 var name = 'licat'; // 같은 이름으로 변수를 다시 선언해도 에러가 나지 않습니다. console.log(name);

var로 만든 변수는 같은 이름으로 다시 선언해도 에러가 발생하지 않습니다. 이는 실수를 유발할 수 있습니다.

8.2 블록 예제 코드

아래 예제를 통해 let과 const의 특징을 확인해보세요.

{ let value = 'hello' } console.log(value); // 블록 밖에서는 val에 접근할 수 없습니다.

let과 const로 만든 변수는 블록 밖에서 접근할 수 없습니다. 다만 아래처럼 블록 밖에서 선언된 변수는 블록 안에서 접근이 가능합니다.

let value = 10; { console.log(value); // 블록 안에서 val에 접근할 수 있습니다. }

var는 블록 안에서 선언되어도 밖에서 접근할 수 있습니다. 좀 더 전문적인 용어로 var는 블록 스코프(block scope)를 가지지 않습니다.라고 얘기합니다.

{ var value = 'hello' } console.log(value)

8.3 중괄호가 어디서 사용되나요?

중괄호는 여러 줄의 코드를 하나로 묶어주는 블록을 만들 때 사용됩니다. 중괄호는 함수, 조건문, 반복문 등에서 사용됩니다.

아래 예제에서 중괄호는 if문에서 사용되었습니다. if문은 조건이 참일 때 중괄호 안의 코드를 실행합니다. 아래 코드를 한 번 실행해보세요.

if (true) { let value = 'hello'; console.log(value); }

이번에는 if문 안에 true인 값을 false로 바꾸고 실행해보세요.

let 과 const. 언제 사용해야 할까요?

JavaScript에서 const를 사용하는 것이 더 좋은 경우가 많습니다.

의도하지 않은 값의 변경을 방지할 수 있습니다.

const를 사용하면 변수의 값이 한 번 할당되면 변경될 수 없습니다. 따라서 의도하지 않은 값의 변경을 방지할 수 있습니다. 이것은 코드의 예측 가능성을 높이며, 따라서 애러가 발생되는 상황(버그)을 줄일 수 있습니다.
가독성을 높일 수 있습니다.

const를 사용하면 다른 개발자들이 변수의 값이 변경될 가능성이 없다는 것을 빠르게 인지할 수 있으며, 반드시 초기화를 해야하기 때문에 어떤 데이터가 사용되는지 초기에 확인 할 수 있습니다. 이것은 코드의 가독성(잘 읽히는 것)을 높이고 유지 보수성(누군가 수정을 잘 할 수 있게 하는 것)을 향상시킵니다.

그러나 변수의 가리키는 값이 반드시 변경되어야 하는 경우에는 let을 사용해야 합니다. 예를 들어 산술 연산과 같은 연산자로 값이 변경이 되어야 할 때에는 let을 사용해야 합니다. 따라서 const와 let을 적절하게 사용하여 코드를 작성하는 것이 중요합니다.

저는 강의할 때 이렇게 말합니다.

const로 선언하고 문제 생기면 let으로 변경하세요!