2. 자바스크립트 변수와 데이터 타입 기초

자바스크립트 변수와 데이터 타입 기초

자바스크립트 100개 포스팅 시리즈의 두 번째 글에 온 걸 환영한다! 첫 번째 글에서 자바스크립트가 뭔지, 어디에 쓰이는지, 왜 중요한지 알아봤다면, 이번엔 실질적인 첫걸음을 내딛는다. 자바스크립트에서 변수를 선언하고 사용하는 방법, 그리고 데이터 타입의 기초를 다룰 거다. 코딩의 기본 중 기본이라 이걸 이해하면 앞으로 훨�ın 수월해진다.

변수는 데이터를 담는 상자 같은 거고, 데이터 타입은 그 상자에 담길 내용물의 종류다. 초보자든 좀 해본 사람이든, 이 기본기를 잘 다져놓으면 자바스크립트를 자유롭게 다룰 수 있다. 천천히 따라오면서 코드도 직접 쳐보면 좋다. 브라우저 콘솔이나 간단한 HTML 파일에서 테스트해보면서 배우자!

변수란 무엇인가?

변수는 데이터를 저장하고 나중에 꺼내 쓸 수 있게 이름을 붙인 거다. 자바스크립트에선 변수를 선언할 때 var, let, const라는 세 가지 키워드를 쓴다. 각각 쓰임새가 다르니까 하나씩 알아보자.

변수 선언 방법

var: 옛날부터 쓰이던 변수 선언 방식이다. 범위(scope)가 함수 단위로 적용되고, 같은 이름으로 여러 번 선언해도 에러 안 난다. 근데 이게 문제가 될 때가 많아서 요즘은 잘 안 쓴다. 예를 들면:

var name = "홍길동";
console.log(name); // "홍길동"
var name = "이순신"; // 다시 선언해도 문제없음
console.log(name); // "이순신"

내가 처음 var 썼을 땐 편했는데, 나중에 코드 꼬이는 걸 보고 놀랐다.

let: ES6에서 나온 현대적인 변수 선언법이다. 블록 범위(block scope)를 따르고, 같은 이름으로 재선언은 안 된다. 값은 바꿀 수 있다.

let age = 25;
console.log(age); // 25
age = 30; // 값 변경 가능
console.log(age); // 30
// let age = 35; // 이건 에러남 (재선언 불가)

요즘 내가 변수 쓸 때 주로 let을 쓴다. 범위 명확해서 안전하다.

const: 상수를 선언할 때 쓴다. 블록 범위고, 선언 후 값 변경도 재선언도 안 된다. 근데 객체 내부는 수정 가능하다(이건 나중에 설명).

const pi = 3.14;
console.log(pi); // 3.14
// pi = 3.14159; // 에러남 (값 변경 불가)

상수 이름은 보통 대문자(예: PI)로 짓는 관습도 있다.

변수 이름 짓는 규칙도 있다: 영문, 숫자, _, $만 쓴다(숫자로 시작하면 안 됨). CamelCase(예: myName)로 쓰는 게 일반적이다. 의미 있는 이름을 붙인다(x 대신 userName).

변수 스코프

변수 스코프는 변수가 어디까지 유효한지를 말한다. 자바스크립트엔 두 가지 스코프가 있다.

함수 스코프(Function Scope): var로 선언한 변수는 함수 안에서만 유효하다.

function test() {
    var x = 10;
    console.log(x); // 10
}
test();
console.log(x); // 에러남 (x is not defined)

블록 스코프(Block Scope): let과 const는 블록(if, for 등) 안에서만 유효하다.

if (true) {
    let y = 20;
    console.log(y); // 20
}
console.log(y); // 에러남 (y is not defined)

내가 처음 스코프 배울 때 헷갈렸는데, 블록 스코프가 더 직관적이다.

데이터 타입이란?

자바스크립트엔 여러 데이터 타입이 있다. 변수에 담을 수 있는 값의 종류를 말한다. 크게 원시 타입(Primitive)과 객체 타입(Object)으로 나뉜다. 먼저 원시 타입부터 보자.

원시 데이터 타입과 비원시 데이터 타입

숫자(Number): 정수든 소수든 숫자는 다 Number 타입이다. 계산하거나 크기 비교할 때 쓴다.

let height = 175.5;
let count = 10;
console.log(height + count); // 185.5

특이한 값으로 NaN(Not a Number), Infinity, -Infinity도 있다.

문자열(String): 텍스트 데이터다. 따옴표('나 ")로 감싼다.

let greeting = "안녕하세요";
let name = '홍길동';
console.log(greeting + ", " + name); // "안녕하세요, 홍길동"

불리언(Boolean): 참(true) 또는 거짓(false)만 있다.

let isAdult = true;
console.log(isAdult); // true

undefined: 변수 선언했는데 값이 없는 상태다.

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

null: 의도적으로 "없음"을 나타낸다.

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

심볼(Symbol): ES6에서 추가된 타입으로, 고유한 식별자를 만든다.

let sym1 = Symbol("id");
let sym2 = Symbol("id");
console.log(sym1 === sym2); // false

객체(Object): 여러 데이터를 하나로 묶는다.

let person = {
    name: "홍길동",
    age: 25
};
console.log(person.name); // "홍길동"

배열과 함수도 객체 타입에 속한다.

타입 확인하기

데이터 타입을 확인하려면 typeof 연산자를 쓴다:

console.log(typeof 42); // "number"
console.log(typeof "hello"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" (버그지만 남아있음)

타입 변환

자바스크립트는 암묵적으로 타입을 바꾼다:

console.log("5" + 3); // "53"
console.log("5" - 3); // 2

명시적 변환도 가능하다:

let num = Number("123");
console.log(num); // 123

실습

간단한 실습으로 해보자:

let name = "홍길동";
const age = 25;
let hobbies = ["축구", "게임"];
console.log(name, age, hobbies);

주의할 점

변수 선언 안 하면 전역 변수로 간다. 타입 변환 주의하자.

결론

이번 포스팅에서 자바스크립트 변수와 데이터 타입을 다뤘다. 다음엔 조건문과 반복문을 배워보자.