C
JavaScript/기초/Lesson 02

JavaScript 소개

30분·theory
이 챕터
1/5

JavaScript 소개

🎯 이 lesson 을 읽고 나면

이 lesson 을 다 읽고 나면 아래 3가지를 자신 있게 할 수 있습니다.

  • ✅ var · let · const 차이 + hoisting 동작
  • ✅ 타입 7가지 + typeof 의 함정 (typeof null === 'object')
  • ✅ 스크립트 로딩 (defer · async · module) 차이

학습 목표를 체크리스트로 두고 다 답할 수 있게 되면 lesson 을 닫으세요.

JavaScript 가 뭐냐 — *웹의 두뇌*

핵심 한 줄

JavaScript = 웹 페이지를 동적으로 만드는 프로그래밍 언어. 1995 년 10일 만에 Brendan Eich 가 만들었습니다. 지금은 세상에서 가장 많이 쓰이는 언어 중 하나.

이름이 JavaScript 인가

이름과 달리 Java 와 거의 무관 합니다. 1995 년 Java 가 핫 할 때 마케팅 차원에서 비슷한 이름을 붙였습니다. 실제론 Java 보다 Lisp·Scheme 에 가까운 함수형 언어죠.

> 💡 Java 와 JavaScript = "햄과 햄스터" 만큼 무관.

JavaScript 의 3가지 얼굴

처음엔 브라우저 안 에서만 돌아갔습니다. 이제는:

1. 브라우저 — 클릭·입력·애니메이션 등 동적 동작
2. 서버 (Node.js, 2009~) — Java·Python 처럼 백엔드 가능
3. 모바일·데스크탑 — React Native·Electron 으로 앱 개발

같은 언어로 프론트·백·모바일 다 가능. 이게 JS 의 압도적 강점.

변수 — let · const · var

javascript
const PI = 3.14;        // 🔒 한 번 정하면 못 바꿈 (불변)
let count = 0;          // 🔓 변경 가능
count = 10;             // OK — let 이라 재할당 됨

var oldStyle = "옛날";   // ⚠️ 옛 키워드, 쓰지 마세요

console.log(PI, count, oldStyle);   // 3.14 10 "옛날"

// 시도하면 에러:
// PI = 3.15;   // ❌ TypeError: Assignment to constant variable.

규칙: 항상 const 먼저. 변경이 필요하면 let. var2015 이전 코드에만.

기본 자료형

javascript
const n = 42;                // number  — 정수·실수
const s = "hello";           // string  — 문자열
const b = true;              // boolean — 참/거짓
const u = undefined;         // 값 없음 (선언만)
const x = null;              // 의도적 비움
const arr = [1, 2, 3];       // array   — 배열 (객체의 한 종류)
const obj = { name: "홍" };  // object  — 객체

// 🔍 typeof 로 각각 어떤 타입인지 찍어보기
console.log(typeof n);     // "number"
console.log(typeof s);     // "string"
console.log(typeof b);     // "boolean"
console.log(typeof u);     // "undefined"
console.log(typeof x);     // "object"   ← null 의 유명한 버그
console.log(typeof arr);   // "object"   ← 배열도 객체
console.log(typeof obj);   // "object"

함수도 입니다 — 변수에 담고 인자로 전달:

javascript
const greet = (name) => `안녕, ${name}!`;
console.log(greet("홍길동"));   // "안녕, 홍길동!"

가장 헷갈리는 — == vs ===

javascript
console.log("5" == 5);    // true   ← == 는 타입을 자동으로 맞춤 ("5" → 5)
console.log("5" === 5);   // false  ← === 는 타입까지 같아야 함 (string ≠ number)
console.log(0 == false);  // true   ← false 가 0 으로 변환됨
console.log(0 === false); // false  ← 타입 다름 (number vs boolean)

==타입을 알아서 맞춰 비교 — 예상치 못한 결과 자주. ===타입까지 일치해야. 항상 === 권장.

비동기 — JS 의 진짜 강점

JS 는 단일 스레드 인데도 빠릅니다. 비밀은 이벤트 루프 + 비동기:

javascript
console.log("1");                              // ① 즉시 실행
setTimeout(() => console.log("2"), 0);         // ⏳ 대기열로 — 0초여도 "나중"
console.log("3");                              // ② 즉시 실행

// 📤 출력 순서: 1, 3, 2
//   → 동기 코드(1, 3)가 먼저 다 끝난 후에야 setTimeout 콜백(2)이 실행됨

setTimeout대기열 에 들어가고, 현재 코드가 끝나야 실행. 그 사이 다른 일을 블록 없이 처리합니다.

async/await 로 비동기 코드를 동기처럼:

javascript
async function fetchUser(id) {
    const res = await fetch(`/api/users/${id}`);
    const data = await res.json();
    return data;
}

await 으로 기다리는 동안 JS 는 다른 일을 합니다. 동시 요청 1만개도 거뜬.

한 번 정리

  • 동적 타입: 변수에 아무 값이나
  • 비동기 중심: async/await 표준
  • 함수가 일등 시민: 변수처럼 다룸
  • == 대신 === — 항상

JS 는 조롱받던 언어에서 세상을 지배하는 언어로 진화했습니다. 모르면 현대 웹 개발 불가.

⚡ 직접 해보기 — JS 변수와 함수

코드를 수정하고 ▶ 실행 으로 결과 확인.
✏️ JS 코드
📟 콘솔 출력
▶ 실행 버튼을 눌러보세요
⚠️ 브라우저 샌드박스에서 실행 — console.log()만 지원, alert/fetch 불가

🤖 AI 에게 이렇게 요청해보세요

이 lesson 의 개념을 알면 AI 에게 구체적으로 지시할 수 있습니다. 막연한 "고쳐줘" 가 아니라 어휘를 가진 요청 — 그게 토큰 절약의 출발점입니다.

  • "이 JavaScript 코드에 JavaScript 소개 개념을 적용해 리팩토링해줘"
  • "JavaScript 소개 가 면접에서 자주 묻는 포인트 3가지 알려줘"
  • "이 코드의 JavaScript 소개 관련 안티패턴 검사해줘"

왜 이게 토큰을 줄이나

개념을 모를 땐 AI 답변을 받고도 "그게 뭐예요?" 를 다시 물어야 합니다. 그 "다시 물음" 이 토큰을 잡아먹습니다. 개념 한 번 익혀두면 대화가 한 번에 끝납니다.

먼저 읽으면 좋은 개념: JavaScript 학습 가이드
JavaScript란? - JavaScript