안동민 개발노트

웹 페이지를 정적으로 보여주는 것을 넘어, 사용자 인터랙션을 통해 동적으로 변화하는 웹을 구현하기 위해서는 자바스크립트(JavaScript) 가 필수적입니다. 자바스크립트는 웹 브라우저가 이해하고 실행할 수 있는 프로그래밍 언어로, 웹 페이지에 생동감을 불어넣는 역할을 담당합니다. 이번 장에서는 자바스크립트의 가장 기본적인 요소들을 함께 살펴보며, 웹 개발의 새로운 지평을 열어보겠습니다.

프로그래밍의 세계에서는 우리가 다루는 정보를 '데이터'라고 부릅니다. 그리고 이러한 데이터를 저장하고, 분류하며, 조작하는 방법을 아는 것이 프로그래밍 학습의 첫걸음입니다. 이번 장에서는 자바스크립트에서 데이터를 다루는 세 가지 핵심 개념인 변수(Variable), 데이터 타입(Data Type), 그리고 연산자(Operator) 에 대해 심도 있게 알아보겠습니다.

변수: 데이터를 담는 그릇

우리가 요리를 할 때, 설탕, 소금, 밀가루와 같은 재료들을 각자의 용기에 담아 보관하듯이, 프로그래밍에서도 다양한 데이터를 저장할 공간이 필요합니다. 이때 사용되는 것이 바로 변수입니다. 변수는 특정한 값을 저장할 수 있는 메모리 공간에 붙여진 이름이라고 생각하시면 됩니다. 이 이름을 통해 우리는 저장된 값을 언제든지 참조하고 변경할 수 있습니다.

자바스크립트에서는 변수를 선언하는 여러 가지 방법이 있습니다. 가장 일반적으로 사용되는 let과 const 키워드를 중심으로 살펴보겠습니다.

`let`: 유연한 변수 선언

let 키워드는 변수를 선언할 때 사용되며, 한 번 선언된 변수에 새로운 값을 다시 할당할 수 있습니다. 즉, 변수의 값이 변경될 수 있다는 의미입니다.

let userName = "김철수"; // userName이라는 변수를 선언하고 "김철수"라는 문자열을 할당했습니다.
console.log(userName);   // 결과: 김철수

userName = "이영희";    // userName 변수에 새로운 값 "이영희"를 다시 할당했습니다.
console.log(userName);   // 결과: 이영희

위 예시에서 userName이라는 변수는 처음에는 "김철수"라는 값을 가지고 있었지만, 나중에 "이영희"로 값이 변경되었습니다. 이처럼 let은 변수의 값이 동적으로 변할 필요가 있을 때 유용하게 사용됩니다.

`const`: 불변하는 상수 선언

const 키워드는 '상수(constant)'를 선언할 때 사용됩니다. 상수는 한 번 값이 할당되면, 프로그램이 실행되는 동안 절대로 그 값을 변경할 수 없습니다. 이는 예상치 못한 값의 변경으로 발생할 수 있는 오류를 방지하고, 코드의 안정성을 높이는 데 기여합니다.

const PI = 3.141592; // PI라는 상수를 선언하고 원주율 값을 할당했습니다.
console.log(PI);     // 결과: 3.141592

// PI = 3.14; // 이 코드는 오류를 발생시킵니다. 상수의 값은 변경할 수 없습니다.

const는 값이 변하지 않는 고정적인 데이터를 저장할 때 사용합니다. 예를 들어, 웹 사이트의 로고 경로, 고정된 메시지, 수학적 상수 등을 선언할 때 const를 사용하면 좋습니다.

let과 const의 선택 기준

값이 변하지 않을 것이라고 확신하는 경우에는 항상 const를 사용하는 것을 권장합니다. 이는 코드의 가독성을 높이고 잠재적인 오류를 줄이는 좋은 습관입니다.
값이 나중에 변경될 가능성이 있는 경우에만 let을 사용합니다.

변수 이름 규칙: 명확하고 의미 있게

변수와 상수의 이름을 지을 때에는 몇 가지 규칙과 권장 사항이 있습니다.

문자, 숫자, 밑줄(_), 달러 기호($)만 사용 가능합니다.
숫자로 시작할 수 없습니다. (예: 1name은 불가능합니다.)
예약어(JavaScript에서 특별한 의미를 가지는 단어)는 사용할 수 없습니다. (예: if, for, function, let, const 등)
의미 있는 이름을 사용하세요. (예: a, b보다는 userName, totalPrice와 같이 변수의 목적을 명확히 알 수 있는 이름을 사용합니다.)
카멜 케이스(camelCase)를 권장합니다. 첫 단어는 소문자로 시작하고, 이후 단어의 첫 글자는 대문자로 쓰는 방식입니다. (예: myNewVariable, totalScore)

데이터 타입: 데이터의 종류

변수에 저장할 수 있는 값은 숫자가 될 수도 있고, 문자가 될 수도 있으며, 참/거짓을 나타내는 값이 될 수도 있습니다. 이처럼 데이터가 가질 수 있는 형태를 데이터 타입이라고 합니다. 자바스크립트는 다양한 종류의 데이터 타입을 제공하며, 각 타입은 데이터를 저장하고 처리하는 방식에 영향을 미칩니다.

주요 데이터 타입들을 살펴보겠습니다.

원시 타입 (Primitive Types)

원시 타입은 하나의 값만 저장하는 가장 기본적인 형태의 데이터 타입입니다.

Number (숫자): 정수와 실수를 모두 포함합니다.

let age = 30;         // 정수
let pi = 3.14;        // 실수
let temperature = -5; // 음수

String (문자열): 텍스트 데이터를 나타냅니다. 작은따옴표(' '), 큰따옴표(" "), 또는 백틱(`)으로 감싸서 표현합니다.

let name = "홍길동";
let greeting = '안녕하세요!';
let message = `내 나이는 ${age}살 입니다.`; // 백틱은 템플릿 리터럴을 허용하여 변수를 문자열 안에 쉽게 포함할 수 있습니다.
console.log(message); // 결과: 내 나이는 30살 입니다.

Boolean (불리언): 논리적인 참(true) 또는 거짓(false)을 나타냅니다. 조건문에서 매우 유용하게 사용됩니다.
```
let isAdult = true;
let hasLicense = false;
```
Undefined (정의되지 않음): 변수를 선언하고 값을 할당하지 않았을 때 자동으로 주어지는 값입니다. '값이 할당되지 않았다'는 의미입니다.
```
let unknownVar;
console.log(unknownVar); // 결과: undefined
```
Null (널): '값이 없음'을 명시적으로 나타낼 때 사용합니다. undefined와 달리 개발자가 의도적으로 값을 비워둘 때 할당합니다.
```
let selectedItem = null; // 선택된 아이템이 없음을 명시적으로 나타냅니다.
```
Symbol (심볼): ES6에서 새로 추가된 타입으로, 고유하고 변경 불가능한 값을 생성할 때 사용됩니다. 주로 객체의 속성 키로 사용되어 이름 충돌을 방지하는 데 유용합니다. (초급 단계에서는 깊이 있게 다루지 않으므로, 이런 타입이 있다는 정도만 이해해도 충분합니다.)

객체 타입 (Object Type)

원시 타입 외의 모든 값은 객체(Object) 입니다. 객체는 여러 데이터를 한데 묶어서 표현할 수 있는 복합적인 데이터 타입입니다. 배열, 함수 등도 모두 객체의 한 종류입니다. 객체에 대해서는 뒤이은 내용에서 더 자세히 다루게 될 것입니다.

Object (객체): 키(key)와 값(value)의 쌍으로 이루어진 데이터의 집합입니다.

let person = {
    name: "김민수",
    age: 25,
    isStudent: true
};
console.log(person.name); // 결과: 김민수

Array (배열): 여러 개의 값을 순서대로 나열하여 저장하는 특별한 종류의 객체입니다.

let colors = ["red", "green", "blue"];
console.log(colors[0]); // 결과: red (배열은 0부터 시작합니다.)

Function (함수): 특정 작업을 수행하는 코드 블록입니다. 함수도 자바스크립트에서는 값으로 취급됩니다.

function greet(name) {
    return `안녕하세요, ${name}님!`;
}
console.log(greet("이유진")); // 결과: 안녕하세요, 이유진님!

데이터 타입 확인하기: typeof 연산자

어떤 변수의 데이터 타입이 궁금할 때에는 typeof 연산자를 사용할 수 있습니다.

console.log(typeof 123);           // 결과: "number"
console.log(typeof "hello");       // 결과: "string"
console.log(typeof true);          // 결과: "boolean"
console.log(typeof undefined);     // 결과: "undefined"
console.log(typeof null);          // 결과: "object" (자바스크립트의 역사적인 버그로, null은 object로 나옵니다.)
console.log(typeof {});            // 결과: "object"
console.log(typeof []);            // 결과: "object"
console.log(typeof function(){});  // 결과: "function" (함수도 객체의 일종이지만, typeof는 "function"을 반환합니다.)

연산자: 데이터를 조작하는 도구

변수에 담긴 데이터를 가져오고, 저장하는 것만큼 중요한 것이 바로 이 데이터를 가지고 다양한 작업을 수행하는 것입니다. 이때 우리는 연산자(Operator) 를 사용합니다. 연산자는 하나 이상의 값을 대상으로 연산을 수행하여 새로운 값을 만듭니다.

자바스크립트의 주요 연산자들을 함께 살펴보겠습니다.

산술 연산자

산술 연산자 (Arithmetic Operators)는 수학적 계산을 수행하는 연산자입니다.

+ (덧셈): 5 + 3 결과 8
- (뺄셈): 10 - 4 결과 6
* (곱셈): 2 * 6 결과 12
/ (나눗셈): 15 / 3 결과 5
% (나머지 연산): 10 % 3 결과 1 (10을 3으로 나눈 나머지)
** (거듭제곱): 2 ** 3 결과 8 (2의 3제곱)

let num1 = 10;
let num2 = 3;

console.log(num1 + num2); // 결과: 13
console.log(num1 - num2); // 결과: 7
console.log(num1 * num2); // 결과: 30
console.log(num1 / num2); // 결과: 3.3333333333333335
console.log(num1 % num2); // 결과: 1
console.log(2 ** 4);      // 결과: 16

주의: 문자열과 덧셈 연산

덧셈 연산자는 숫자뿐만 아니라 문자열에도 사용될 수 있습니다. 이때는 두 문자열을 연결하는 역할을 합니다.

let firstName = "길동";
let lastName = "홍";
let fullName = lastName + firstName; // 문자열 연결
console.log(fullName); // 결과: 홍길동

console.log("숫자" + 123); // 결과: "숫자123" (숫자가 문자열로 변환되어 연결됩니다.)

할당 연산자

할당 연산자 (Assignment Operators)는 변수에 값을 할당할 때 사용하는 연산자입니다.

= (할당): let x = 10;
+= (더하고 할당): x += 5;는 x = x + 5;와 같습니다.
-= (빼고 할당): x -= 2;는 x = x - 2;와 같습니다.
*= (곱하고 할당): x *= 3;는 x = x * 3;와 같습니다.
/= (나누고 할당): x /= 2;는 x = x / 2;와 같습니다.
%= (나머지 계산 후 할당): x %= 3;는 x = x % 3;와 같습니다.

let score = 100;
score += 50; // score는 150이 됩니다.
console.log(score); // 결과: 150

score /= 3;  // score는 50이 됩니다.
console.log(score); // 결과: 50

비교 연산자

비교 연산자 (Comparison Operators)는 두 값을 비교하여 true 또는 false를 반환하는 연산자입니다. 조건문에서 주로 사용됩니다.

== (동등): 값이 같은지 비교 (타입은 고려하지 않음)
=== (일치): 값과 타입이 모두 같은지 비교
!= (부등): 값이 다른지 비교 (타입은 고려하지 않음)
!== (불일치): 값 또는 타입이 다른지 비교
> (보다 큼):
< (보다 작음):
>= (크거나 같음):
<= (작거나 같음):

console.log(10 == "10"); // 결과: true (값만 비교)
console.log(10 === "10"); // 결과: false (값은 같지만 타입이 다름)

console.log(5 != "5");   // 결과: false (값만 비교, 같으므로 false)
console.log(5 !== "5");  // 결과: true (값은 같지만 타입이 다르므로 true)

console.log(7 > 5);      // 결과: true
console.log(3 < 3);      // 결과: false
console.log(8 >= 8);     // 결과: true

==와 ===의 차이점에 대한 추가 설명:

자바스크립트에서 == 연산자는 비교하기 전에 피연산자의 타입을 자동으로 변환(강제 변환)하여 값을 비교합니다. 반면 === 연산자는 타입 변환 없이 값과 타입을 엄격하게 비교합니다. 예상치 못한 오류를 방지하기 위해 일반적으로 ===와 !==를 사용하는 것이 강력히 권장됩니다.

논리 연산자

논리 연산자 (Logical Operators)는 불리언(true/false) 값을 가지고 논리적인 연산을 수행하는 연산자입니다. 여러 조건을 조합할 때 사용됩니다.

&& (AND): 두 피연산자 모두 true일 때 true를 반환합니다.
|| (OR): 두 피연산자 중 하나라도 true일 때 true를 반환합니다.
! (NOT): 피연산자의 논리 값을 반전시킵니다 (true는 false로, false는 true로).

let isRaining = true;
let hasUmbrella = false;

console.log(isRaining && hasUmbrella); // 결과: false (둘 다 true여야 true)
console.log(isRaining || hasUmbrella); // 결과: true (둘 중 하나라도 true면 true)
console.log(!isRaining);               // 결과: false (isRaining의 반대)

증감 연산자

증감 연산자 (Increment/Decrement Operators)란 숫자 값을 1씩 증가시키거나 감소시킬 때 사용하는 연산자입니다.

++ (증가): 값을 1 증가시킵니다.
-- (감소): 값을 1 감소시킵니다.

이 연산자들은 변수 앞에 붙느냐(전위 연산자) 뒤에 붙느냐(후위 연산자)에 따라 미묘한 차이가 있습니다.

전위 연산 (++a, --a): 먼저 값을 증감시킨 후, 그 값을 사용합니다.
후위 연산 (a++, a--): 값을 먼저 사용한 후, 값을 증감시킵니다.

let count = 5;
let result1 = ++count; // count를 먼저 6으로 만들고, result1에 6을 할당
console.log(count);   // 결과: 6
console.log(result1); // 결과: 6

let num = 10;
let result2 = num++;  // result2에 먼저 10을 할당하고, num을 11로 만듭니다.
console.log(num);     // 결과: 11
console.log(result2); // 결과: 10

이러한 차이점을 이해하는 것은 코드의 동작 방식을 정확히 예측하는 데 중요합니다.

마무리하며

이번 장에서는 자바스크립트의 가장 기본적인 빌딩 블록인 변수, 데이터 타입, 그리고 연산자에 대해 깊이 있게 알아보았습니다. 데이터를 저장하고, 그 종류를 이해하며, 다양한 방법으로 데이터를 조작하는 것은 모든 프로그래밍의 핵심입니다.

이제 여러분은 자바스크립트 코드를 통해 데이터를 다루는 기본적인 준비를 마쳤습니다.

변수, 데이터 타입, 연산자