📝 Day 1 – 문법과 자료형 (Grammar and Types)
들어가며
코드랑 처음 싸우고 얻는 경험치은 늘 비슷하다. “글자를 어떻게 쓰고, 이름을 어떻게 붙이고, 어떤 재료(자료형)를 다루는지”를 아는 보상을 얻는 것이다.
JavaScript도 마찬가지다. 아래에서 JavaScript가 어떻게 문장을 만들고, 주석을 달고, 변수를 선언하고, 값의 종류를 구분하는지 하나씩 알아보자.
기본 (Basics)
JavaScript는 Java, C, C++에서 문법을 많이 빌려왔다. 그리고 Awk, Perl, Python 같은 언어에서 자유로운 부분도 조금 가져왔다.
- 대소문자를 구별한다. 예를 들어, 아래 코드처럼 똑같이
Moodo라는 글자를 쓰더라도, 대문자와 소문자가 다르면 전혀 다른 변수다.const Moodo = "무한도전"; - 문(statement): 코드에서 실행되는 “명령문장”이다. 보통은 세미콜론(
;)으로 끝난다. 한 줄에 하나만 있을 땐 세미콜론을 생략해도 되지만, 두 개 이상을 한 줄에 쓰면 꼭 세미콜론으로 나눠야 한다.
주석 (Comments)
주석은 “이건 설명이야, 실행하지 마”라는 표시다. 코드를 읽는 사람에게만 보이고, 컴퓨터는 무시한다.
// 한 줄 주석
/* 이건 더 긴,
* 여러 줄 주석입니다.
*/
// 하지만 중첩된 주석은 안 돼요!
/* /* 중첩 */ */ // SyntaxError
👉 쉽게 말하면, 주석은 “메모장에 낙서하기”랑 같다. 낙서라고 해서 발표 때 읽히지 않듯, 주석은 실행되지 않는다.
변수 선언 (var, let, const)
- *변수(variable)**는 값을 담는 “이름표 붙은 상자”다.
var: 옛날부터 있던 선언 방식. 함수 단위로 동작한다.let: 블록 단위({}안)에서만 살아있다. 다시 값을 바꿀 수 있다.const: 블록 단위에서만 살아있고, 절대 다른 값으로 바꿀 수 없다. 선언과 동시에 꼭 값을 줘야 한다.
var a = 10;
let b = 20;
const PI = 3.14;
👉 “var = 오래된 상자, let = 자유롭게 쓰는 상자, const = 이름표 붙이고 절대 못 바꾸는 상자”라고 기억하면 된다.
변수 스코프 (Scope)
- *스코프(scope)**는 “변수가 활동할 수 있는 구역”이다.
예를 들어, 집에서만 부르는 애칭은 집 밖에서는 통하지 않는 것처럼, 변수가 어디서 선언되었는지에 따라 사용할 수 있는 범위가 달라진다.
if (true) {
let y = 5;
}
console.log(y); // ReferenceError: y는 여기에 없음
let이나 const는 블록 {} 안에서만 쓸 수 있다.
반대로 var는 블록을 무시하고, 함수 단위로만 스코프가 나뉜다.
if (true) {
var x = 5;
}
console.log(x); // 5 (밖에서도 보임!)
👉 비유: let과 const는 “방 안에서만 쓸 수 있는 닉네임”, var는 “집 전체에서 통하는 닉네임” 같은 느낌이다.
호이스팅 (Hoisting)
- *호이스팅(hoisting)**은 “변수 선언이 코드 맨 위로 끌어올려진 것처럼 동작하는 현상”이다.
console.log(x === undefined); // true
var x = 3;
이 코드는 사실 이렇게 실행된다:
var x;
console.log(x === undefined); // true
x = 3;
즉, var로 선언한 변수는 선언만 위로 올라가고, 값은 뒤늦게 들어간다.
반대로 let과 const는 “Temporal Dead Zone(TDZ)”이라는 구간에 갇혀서, 선언하기 전에 접근하면 에러가 난다.
console.log(y); // ReferenceError
let y = 3;
👉 쉽게 말하면, var는 미리 이름만 적어둔 자리표, let/const는 자리표를 확인하기 전에 쓰면 “아직 자리 배정 안 됐어!”라며 에러를 내는 거다.
전역 변수 (Global Variable)
어디서나 쓸 수 있는 변수다. 브라우저 환경에서는 window 객체의 속성이 된다.
var phone = "010-1234";
console.log(window.phone); // "010-1234"
👉 하지만 전역 변수는 “교실 전체에 울려 퍼지는 별명” 같은 거라서, 다른 사람이 같은 이름을 쓰면 충돌이 나기 쉽다. 그래서 실제 코딩할 때는 전역 변수는 최소한만 사용한다.
상수 (Constants)
const는 절대 다른 값으로 바꿀 수 없는 변수다.
const PI = 3.14;
단, 배열이나 객체처럼 안에 들어있는 값은 바꿀 수 있다.
const TEAM = ["A", "B"];
TEAM.push("C");
console.log(TEAM); // ["A", "B", "C"]
👉 즉, 상자는 못 바꾸지만, 상자 안의 물건은 꺼내고 넣을 수 있다.
데이터 형 (Data Types)
원시 타입 (Primitive)
- Boolean →
true,false - null → “비어있음”
- undefined → “아직 값 없음”
- Number → 숫자
- BigInt → 큰 숫자 (
123n) - String → 문자
- Symbol → 유일한 값
객체 타입 (Object)
배열, 함수, 객체 등 → 값들을 모아두는 꾸러미
👉 비유: 원시 타입은 “하나짜리 과자”, 객체는 “과자 묶음 세트”라고 보면 된다.
자료형 변환 (Type Conversion)
JavaScript는 동적 타이핑 언어라서, 변수의 값이 실행 중에도 마음대로 바뀔 수 있다.
var answer = 42;
answer = "뭘 봐 지금 모니터 보고 일해"; // 오류 없음
- 숫자와 문자열을
+하면 문자열로 변한다."점수는 " + 100; // "점수는 100" - 문자열을 숫자로 바꾸려면?
parseInt("101", 2); // 5 (2진수) parseFloat("3.14"); // 3.14 +"42"; // 42
리터럴 (Literals)
리터럴은 코드 안에 직접 적어둔 값이다.
- 배열 리터럴
let coffees = ["French Roast", "Colombian", "Kona"]; - 객체 리터럴
var car = { brand: "Honda", year: 2020 }; - 문자열 리터럴
"안녕" 'Hello' `템플릿 ${1+2} 도 가능` - 정규식 리터럴
var re = /ab+c/;
👉 쉽게 말해, 리터럴은 “있는 그대로 쓰는 값”이다. 변수가 아니라 직접 쓰는 값.
마무리
- 문(statement): 마침표 찍는 문장 같은 것.
- 주석(comment): 낙서처럼, 실행 안 되는 설명.
- 스코프(scope): 변수가 살아있는 활동 범위.
- 호이스팅(hoisting): 선언이 코드 위로 올라간 것처럼 보이는 동작.
- 전역 변수(global): 어디서나 쓸 수 있지만 위험한 변수.
- 상수(const): 한 번 정하면 못 바꾸는 이름표.
- 자료형: 원시형(단일 값)과 객체형(묶음 값).
- 리터럴: 값 자체를 코드에 직접 적은 것.
