소개 & 변수와 데이터 타입

#1. 자바스크립트란?

자바스크립트는 1995년 Brendan Eich가 개발한 프로그래밍 언어다. 처음에는 웹 페이지의 보조 기능을 위해 만들어졌지만, 지금은 웹 프론트엔드의 핵심 언어를 넘어 서버(Node.js), 모바일 앱, 게임 등 다양한 분야에서 쓰인다.

• 웹 페이지의 동적인 요소를 조작하고 사용자와 상호작용한다.

• 변수, 조건문·반복문, 함수, 객체와 클래스, 배열, DOM 조작, 이벤트 처리, 비동기 프로그래밍, 모듈 등 폭넓은 기능을 제공한다.

#HTML · CSS · JavaScript의 역할 분담

flowchart LR
    A["🦴 HTML<br/>구조 (뼈대)"] --> D["🌐 완성된<br/>웹페이지"]
    B["🎨 CSS<br/>표현 (옷·화장)"] --> D
    C["⚙️ JavaScript<br/>동작 (행동·반응)"] --> D
    style A fill:#ffe0b2,stroke:#fb8c00
    style B fill:#e3f2fd,stroke:#1e88e5
    style C fill:#fff9c4,stroke:#fbc02d
    style D fill:#e8f5e9,stroke:#43a047

#2. 개발 환경과 코드 실행

자바스크립트를 작성하고 실행하려면 다음이 필요하다.

• 텍스트 에디터: VS Code, Sublime Text 등 (이 강의는 VS Code 기준)

• 웹 브라우저: Chrome, Edge, Firefox 등 — 코드 실행과 결과 확인

• 개발자 도구: 브라우저에서 ++f12++ 키로 열며, Console 탭에서 코드 실행·디버깅이 가능하다.

#HTML에 자바스크립트 연결하기

자바스크립트를 HTML에 넣는 방법은 세 가지다.

<!-- 1. <head> 안의 <script>에 직접 작성 -->
<head>
  <script>
    console.log("Hello from head");
  </script>
</head>

<!-- 2. <body> 끝에 <script> 작성 (요소가 모두 로드된 뒤 실행되어 안전) -->
<body>
  <!-- ... 페이지 내용 ... -->
  <script>
    console.log("Hello from body");
  </script>
</body>

<!-- 3. 외부 .js 파일로 분리하고 src로 연결 (권장) -->
<head>
  <script src="hello.js" defer></script>
</head>

#첫 코드: Hello, World!

console.log("Hello, JavaScript!");

Hello, JavaScript!

#console 메서드

자바스크립트는 콘솔(console)로 실행 결과를 확인하고 디버깅한다.

console.log()는 쉼표로 여러 값을 한 번에 출력할 수 있다.

console.log("점수:", 90, "합격:", true);

점수: 90 합격: true

#3. 변수 — 값을 담는 상자

변수(variable)는 값을 저장하는 공간이며, 저장한 값을 재사용하기 위해 사용한다. 변수에는 의미가 드러나는 이름을 붙이는 것이 좋다(시맨틱 네이밍).

자바스크립트에서 변수를 선언하는 키워드는 var, let, const 세 가지다.

let name = "John";   // 선언과 동시에 값 할당
let point;           // 선언만 (값은 아직 없음 → undefined)
point = 123;         // 나중에 값 할당

#var — 옛날 방식 (지양)

ES6 이전에 쓰던 키워드다. 같은 이름으로 다시 선언해도 오류가 나지 않고, 블록({ })을 무시하는 등 예측이 어려운 동작 때문에 요즘은 거의 쓰지 않는다.

#let — 값이 바뀌는 변수

• 값을 재할당할 수 있다.

• 같은 이름으로 재선언은 할 수 없다.

• 블록 스코프를 가진다 — { } 안에서 선언한 변수는 그 블록 안에서만 유효하다.

let x = 10;
{
  let x = 2;        // 블록 안의 x는 별개
  console.log(x);   // 2
}
console.log(x);     // 10 (블록 밖 x는 그대로)

2 10

#const — 바뀌지 않는 상수

• 재할당이 불가능한 상수를 선언한다.

• 선언과 동시에 반드시 값을 할당해야 한다.

const PI = 3.14;
PI = 3.141;   // ❌ TypeError: Assignment to constant variable.

const cars = ["Saab", "Volvo"];
cars[0] = "Toyota";   // ✅ 요소 변경 가능
cars.push("Audi");    // ✅ 요소 추가 가능
cars = ["BMW"];       // ❌ 배열 자체 재할당은 불가

#4. 데이터 타입

자바스크립트의 데이터 타입은 크게 기본형(Primitive)과 참조형(Reference)으로 나뉜다.

flowchart TD
    A["데이터 타입"] --> B["기본형 Primitive<br/>(값 자체를 저장)"]
    A --> C["참조형 Reference<br/>(주소를 저장)"]
    B --> B1["Number · String · Boolean<br/>Undefined · Null · Symbol · BigInt"]
    C --> C1["Object · Array · Function"]
    style B fill:#e3f2fd,stroke:#1e88e5
    style C fill:#e8f5e9,stroke:#43a047

#기본형 (Primitive Types)

값 자체가 메모리에 직접 저장되며, 한 번 만들어진 값은 바뀌지 않는다(불변성).

• Number: 숫자. 자바스크립트는 정수와 실수를 구분하지 않는다.

  let integer = 10;
  let float = 3.14;

  특수한 숫자 값으로 NaN(Not-a-Number, 숫자가 아님), Infinity(무한대)가 있다.

  console.log(1 * "A");   // NaN
  console.log(1 / 0);     // Infinity

  NaN

Infinity

• String: 문자열. 작은따옴표 ' ', 큰따옴표 " ", 백틱 ` `로 감싼다.

  let a = '안녕하세요';
  let b = "Hello";
  let c = `World`;

• Boolean: 참/거짓 두 값. true 또는 false.

  let isOpen = true;
  let isDone = false;

• Undefined: 변수를 선언만 하고 값을 할당하지 않았을 때의 초기값.

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

  undefined

• Null: "값이 없음"을 개발자가 의도적으로 표현한 값.

  let empty = null;

• Symbol: ES6에서 추가된 고유하고 변경 불가능한 값. 주로 객체의 유일한 식별자로 쓴다.

  let s1 = Symbol('id');
  let s2 = Symbol('id');
  console.log(s1 === s2);   // false (항상 고유함)

  false

• BigInt: 아주 큰 정수를 표현할 때 쓰며, 숫자 뒤에 n을 붙인다.

  let big = 1234567890123456789012345678901234567890n;

#참조형 (Reference Types)

값 대신 주소(참조)가 저장되고, 그 주소를 통해 실제 데이터에 접근한다. 객체({}), 배열([]), 함수가 모두 참조형이다.

• Object: 키와 값의 쌍으로 이루어진 데이터 묶음.

  let person = { name: "Alice", age: 30 };
  console.log(person);   // { name: 'Alice', age: 30 }

  { name: 'Alice', age: 30 }

• Array: 순서가 있는 값의 목록. (자바스크립트 배열은 사실 객체의 일종)

  let numbers = [1, 2, 3, 4, 5];

• Function: 실행 가능한 코드 블록. 자바스크립트에서는 함수도 객체다.

  function greet() { console.log("Hello!"); }

#타입 확인: 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 { a: 1 });   // "object"

number string boolean undefined object