자바스크립트 기초: 변수, 데이터 타입, 연산자 🚀

안녕, 친구들! 오늘은 우리가 프로그래밍의 세계로 떠나는 신나는 여행을 시작해볼 거야. 특히 자바스크립트라는 멋진 언어에 대해 알아볼 건데, 이 언어는 마치 우리가 재능넷에서 다양한 재능을 거래하듯이, 웹 세상에서 무궁무진한 가능성을 열어주는 도구야. 😎

자, 이제부터 우리는 자바스크립트의 기본 중의 기본인 변수, 데이터 타입, 그리고 연산자에 대해 알아볼 거야. 이 세 가지는 자바스크립트 프로그래밍의 핵심이라고 할 수 있지. 마치 요리를 할 때 재료와 도구, 그리고 조리 방법이 필요한 것처럼 말이야!

🎨 상상해봐: 자바스크립트는 마치 우리가 그림을 그리는 것과 같아. 변수는 우리의 팔레트, 데이터 타입은 다양한 색깔, 그리고 연산자는 우리의 붓이라고 생각하면 돼. 이 세 가지를 잘 활용하면, 웹이라는 캔버스에 우리만의 멋진 작품을 그려낼 수 있어!

자, 그럼 이제 본격적으로 시작해볼까? 준비됐니? 출발~! 🚗💨

1. 변수 (Variables) - 우리의 데이터 저장소 📦

변수란 뭘까? 쉽게 말해서, 변수는 우리가 데이터를 저장하는 상자라고 생각하면 돼. 마치 우리가 옷장에 옷을 넣어두는 것처럼, 프로그램에서는 변수에 데이터를 넣어두는 거지.

자바스크립트에서 변수를 선언하는 방법은 세 가지가 있어:

var: 옛날부터 쓰던 방식
let: 새로 나온 방식으로, 값을 바꿀 수 있는 변수를 만들 때 사용해
const: 이것도 새로 나온 건데, 한 번 값을 넣으면 바꿀 수 없는 변수를 만들 때 써

자, 이제 예시를 통해 살펴볼까?


// var 사용 예시
var myName = "철수";
console.log(myName);  // 출력: 철수

// let 사용 예시
let myAge = 25;
console.log(myAge);  // 출력: 25

// const 사용 예시
const PI = 3.14;
console.log(PI);  // 출력: 3.14

여기서 myName, myAge, PI가 바로 변수 이름이야. 그리고 = 기호 오른쪽에 있는 것들이 그 변수에 저장된 값이지.

🍎 꿀팁: 변수 이름을 지을 때는 의미 있는 이름을 사용하는 게 좋아. 예를 들어, 나이를 저장하는 변수라면 a보다는 age나 myAge처럼 말이야. 나중에 코드를 다시 볼 때 훨씬 이해하기 쉬워진다고!

그런데 말이야, var와 let, const의 차이점이 뭘까? 이걸 이해하려면 '스코프'라는 개념을 알아야 해. 스코프는 변수가 유효한 범위를 말하는데, 쉽게 말해 변수를 사용할 수 있는 영역이라고 생각하면 돼.

var로 선언한 변수는 함수 스코프를 가져. 즉, 함수 내에서 선언되면 그 함수 안에서만 사용할 수 있어. 반면에 let과 const는 블록 스코프를 가져. 이건 중괄호 {} 안에서 선언되면 그 중괄호 안에서만 사용할 수 있다는 뜻이야.


function exampleFunction() {
    var x = 10;
    if (true) {
        var x = 20;  // 같은 x를 가리킴
        console.log(x);  // 출력: 20
    }
    console.log(x);  // 출력: 20
}

function anotherExample() {
    let y = 10;
    if (true) {
        let y = 20;  // 새로운 y를 생성
        console.log(y);  // 출력: 20
    }
    console.log(y);  // 출력: 10
}

보이니? var로 선언한 x는 함수 전체에서 같은 변수를 가리키지만, let으로 선언한 y는 블록 안과 밖에서 서로 다른 변수야.

🌟 중요 포인트: 요즘에는 var 대신 let과 const를 주로 사용해. 왜냐하면 이들이 더 예측 가능한 스코프를 가지고 있고, 실수로 변수를 재선언하는 것을 방지해주기 때문이야.

자, 이제 변수에 대해 기본적인 이해가 됐지? 변수는 우리가 프로그램에서 데이터를 저장하고 관리하는 핵심 도구야. 마치 재능넷에서 다양한 재능을 카테고리별로 정리해두는 것처럼, 우리도 프로그램에서 다양한 데이터를 변수라는 상자에 잘 정리해두는 거지.

그런데 말이야, 변수에는 어떤 종류의 데이터를 저장할 수 있을까? 이게 바로 우리가 다음으로 알아볼 '데이터 타입'이라는 개념이야. 준비됐니? 다음 섹션으로 고고~! 🚀

2. 데이터 타입 (Data Types) - 우리의 다양한 정보 형태 🎭

자, 이제 우리는 변수라는 상자에 대해 알게 됐어. 그런데 이 상자에는 어떤 것들을 넣을 수 있을까? 바로 이게 데이터 타입이야. 데이터 타입은 우리가 프로그램에서 다루는 다양한 종류의 정보를 말해.

자바스크립트에는 크게 두 가지 종류의 데이터 타입이 있어:

원시 타입 (Primitive Types)
객체 타입 (Object Type)

먼저 원시 타입부터 살펴볼까?

2.1 원시 타입 (Primitive Types) 🧱

원시 타입은 가장 기본적인 데이터 타입이야. 자바스크립트에는 다음과 같은 원시 타입들이 있어:

숫자 (Number)
문자열 (String)
불리언 (Boolean)
undefined
null
심볼 (Symbol, ES6에서 추가됨)
BigInt (ES11에서 추가됨)

하나씩 자세히 알아볼까?

2.1.1 숫자 (Number) 🔢

자바스크립트에서 숫자는 정수와 실수를 모두 포함해. 다른 프로그래밍 언어와 달리 자바스크립트는 모든 숫자를 64비트 부동소수점으로 표현하지.


let age = 25;  // 정수
let price = 9.99;  // 실수
let bigNumber = 1e6;  // 1000000 (지수 표기법)
let smallNumber = 1e-6;  // 0.000001 (지수 표기법)

자바스크립트에서는 특별한 숫자 값들도 있어:

Infinity: 양의 무한대
-Infinity: 음의 무한대
NaN: "Not a Number"의 약자로, 숫자가 아님을 나타내는 특별한 값


console.log(1 / 0);  // Infinity
console.log(-1 / 0);  // -Infinity
console.log("Hello" / 2);  // NaN

💡 재미있는 사실: 자바스크립트에서 0으로 나누면 에러가 발생하지 않고 Infinity가 반환돼. 이건 다른 많은 프로그래밍 언어와는 다른 점이야!

2.1.2 문자열 (String) 📝

문자열은 텍스트 데이터를 나타내는 타입이야. 작은따옴표(''), 큰따옴표(""), 또는 백틱(``)으로 둘러싸서 표현할 수 있지.


let name = 'Alice';
let greeting = "Hello, World!";
let message = `Welcome, ${name}!`;  // 템플릿 리터럴

백틱을 사용한 문자열을 '템플릿 리터럴'이라고 해. 이걸 사용하면 문자열 안에 변수나 표현식을 쉽게 삽입할 수 있어. ${} 안에 변수나 표현식을 넣으면 돼.

문자열에는 다양한 메서드들이 있어. 몇 가지 예를 살펴볼까?


let str = "Hello, World!";
console.log(str.length);  // 13 (문자열의 길이)
console.log(str.toUpperCase());  // "HELLO, WORLD!" (모두 대문자로)
console.log(str.toLowerCase());  // "hello, world!" (모두 소문자로)
console.log(str.indexOf("World"));  // 7 ("World"의 시작 위치)
console.log(str.slice(0, 5));  // "Hello" (0부터 5 이전까지의 부분 문자열)

🎭 비유: 문자열은 마치 재능넷에서 사용자들이 남기는 리뷰나 코멘트 같은 거야. 다양한 정보를 텍스트로 표현하고 저장할 수 있지. 그리고 문자열 메서드들은 이 텍스트를 다양한 방식으로 가공하고 분석하는 도구들이라고 생각하면 돼!

2.1.3 불리언 (Boolean) ✅❌

불리언 타입은 참(true)과 거짓(false) 두 가지 값만을 가질 수 있어. 주로 조건문이나 반복문에서 많이 사용되지.


let isAdult = true;
let isSleeping = false;

if (isAdult) {
    console.log("성인입니다.");
} else {
    console.log("미성년자입니다.");
}

불리언 값은 비교 연산의 결과로도 얻을 수 있어:


let x = 5;
let y = 10;

console.log(x < y);  // true
console.log(x > y);  // false
console.log(x === y);  // false (값과 타입이 모두 같은지 비교)
console.log(x !== y);  // true (값이나 타입이 다른지 비교)

⚠️ 주의: 자바스크립트에서는 다른 타입의 값들도 불리언 문맥에서 'truthy'나 'falsy'한 값으로 평가될 수 있어. 예를 들어, 0, null, undefined, NaN, 빈 문자열('')은 'falsy'한 값으로 평가되고, 그 외의 값들은 'truthy'한 값으로 평가돼.

2.1.4 undefined와 null 🕳️

undefined와 null은 둘 다 '값이 없음'을 나타내는 특별한 타입이야. 하지만 미묘한 차이가 있지.

undefined는 변수가 선언되었지만 아직 값이 할당되지 않았을 때의 기본값이야.


let x;
console.log(x);  // undefined

null은 '의도적으로 값이 없음'을 나타낼 때 사용해.


let y = null;
console.log(y);  // null

🎭 비유: undefined는 마치 빈 상자와 같아. 상자는 있지만 아직 아무것도 넣지 않은 상태지. 반면 null은 의도적으로 비워둔 상자야. "여기는 일부러 비워뒀어요"라고 말하는 것과 같지.

2.1.5 심볼 (Symbol) 🔰

심볼은 ES6에서 새롭게 도입된 원시 타입이야. 심볼은 유일한 식별자를 만들 때 사용돼.


let sym1 = Symbol("mySymbol");
let sym2 = Symbol("mySymbol");

console.log(sym1 === sym2);  // false

위의 예시에서 sym1과 sym2는 같은 설명("mySymbol")을 가지고 있지만, 서로 다른 심볼이야. 심볼은 항상 유일해!

심볼은 주로 객체의 프로퍼티 키로 사용되어, 이름 충돌을 방지하는 데 활용돼.


const MY_KEY = Symbol();
let obj = {};

obj[MY_KEY] = 123;
console.log(obj[MY_KEY]);  // 123

🎭 비유: 심볼은 마치 재능넷에서 각 사용자에게 부여되는 고유 ID 같은 거야. 이름이 같더라도 각자 다른 사용자를 구분할 수 있게 해주는 것처럼, 심볼도 이름이 같더라도 서로 다른 고유한 값을 만들어내는 거지.

2.1.6 BigInt 🐘

BigInt는 ES11(ES2020)에서 도입된 새로운 원시 타입이야. 이는 Number 타입으로 안전하게 표현할 수 있는 최대치(2^53 - 1)보다 큰 정수를 다룰 수 있게 해줘.


const bigNumber = 0000n;
console.log(bigNumber);  // 0000n

const result = bigNumber + 1n;
console.log(result);  // 0001n

BigInt 리터럴은 숫자 뒤에 'n'을 붙여 표현해. 또는 BigInt() 함수를 사용해서 만들 수도 있어.

💡 참고: BigInt는 Number 타입과 혼합해서 연산할 수 없어. 항상 같은 타입끼리만 연산해야 해.

자, 이렇게 해서 우리는 자바스크립트의 원시 타입들에 대해 알아봤어. 이 타입들은 우리가 프로그래밍을 할 때 가장 기본적으로 다루는 데이터들이야. 마치 재능넷에서 사용자 정보, 재능 설명, 가격 등 다양한 종류의 정보를 다루는 것처럼, 우리도 프로그래밍에서 이런 다양한 타입의 데이터를 다루게 되는 거지.

그런데 말이야, 이런 기본적인 데이터 타입들만으로는 복잡한 정보를 표현하기 어려울 때가 있어. 예를 들어, 한 사람의 정보(이름, 나이, 주소 등)를 하나의 단위로 묶어서 다루고 싶다면 어떻게 해야 할까? 이럴 때 사용하는 게 바로 '객체 타입'이야. 다음 섹션에서 이에 대해 자세히 알아보자!

2.2 객체 타입 (Object Type) 🏠

자, 이제 우리는 원시 타입에 대해 잘 알게 됐어. 하지만 프로그래밍을 하다 보면 이런 단순한 데이터 타입만으로는 부족할 때가 있어. 예를 들어, 한 사람의 정보를 표현하려면 어떻게 해야 할까? 이름, 나이, 주소 등 여러 가지 정보를 하나로 묶어서 다루고 싶을 때 사용하는 게 바로 '객체'야.

객체는 관련된 데이터와 함수(메서드라고 부르지)를 하나의 단위로 묶은 것이라고 생각하면 돼. 마치 재능넷에서 한 명의 사용자 정보를 관리하는 것과 비슷해. 사용자의 이름, 이메일, 보유한 재능 목록 등을 하나의 단위로 묶어서 관리하는 거지.

2.2.1 객체 생성하기 🏗️

자바스크립트에서 객체를 생성하는 방법은 여러 가지가 있어. 가장 간단한 방법은 객체 리터럴을 사용하는 거야.


let person = {
    name: "Alice",
    age: 25,
    isStudent: true,
    sayHello: function() {
        console.log("Hello, I'm " + this.name);
    }
};

여기서 name, age, isStudent는 객체의 속성(property)이고, sayHello는 메서드야.

객체의 속성에 접근하려면 점 표기법이나 대괄호 표기법을 사용할 수 있어:


console.log(person.name);  // "Alice"
console.log(person["age"]);  // 25

person.sayHello();  // "Hello, I'm Alice"

💡 팁: 대괄호 표기법은 속성 이름이 변수에 저장되어 있거나, 특수 문자가 포함된 경우에 유용해. 예를 들어:


let propertyName = "age";
console.log(person[propertyName]);  // 25

person["favorite color"] = "blue";
console.log(person["favorite color"]);  // "blue"

2.2.2 객체의 메서드 🛠️

객체의 속성 중 함수인 것을 특별히 메서드라고 불러. 메서드는 객체가 할 수 있는 동작을 정의해.


let calculator = {
    add: function(a, b) {
        return a + b;
    },
    subtract: function(a, b) {
        return a - b;
    }
};

console.log(calculator.add(5, 3));  // 8
console.log(calculator.subtract(10, 4));  // 6

ES6부터는 메서드를 정의할 때 더 간단한 문법을 사용할 수 있어:


let calculator = {
    add(a, b) {
        return a + b;
    },
    subtract(a, b) {
        return a - b;
    }
};

2.2.3 객체 생성자 함수 🏭

비슷한 객체를 여러 개 만들어야 할 때는 생성자 함수를 사용하면 편리해.


function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHello = function() {
        console.log("Hello, I'm " + this.name);
    };
}

let person1 = new Person("Alice", 25);
let person2 = new Person("Bob", 30);

person1.sayHello();  // "Hello, I'm Alice"
person2.sayHello();  // "Hello, I'm Bob"

여기서 Person은 생성자 함수야. new 키워드와 함께 호출하면 새로운 객체를 생성하고 초기화해.