🌱 JavaScript 기초

변수(variable)는 값을 잠시 보관해 두는 이름이 붙은 상자입니다. 나중에 그 이름을 부르면 안에 들어 있는 값이 꺼내져 나옵니다.

① 왜 변수를 쓰나요?

같은 값을 여러 곳에서 쓸 때, 매번 다시 적는 대신 한 번 저장해 두고 이름으로 부르기 위해서입니다. 값이 바뀌면 한 곳만 고치면 되니 실수도 줄어듭니다.

② 변수를 만드는 3가지 키워드

// ── const: 한번 정한 값을 바꿀 수 없습니다 ──
const 이름 = "홍길동";
const 나이 = 25;
console.log(이름, 나이);    // 홍길동 25

// 아래 줄은 에러! const는 다시 대입할 수 없어요
// 이름 = "이몽룡";  ❌ TypeError

// ── let: 값을 바꿔야 할 때 ──
let 점수 = 80;
점수 = 90;                  // ✅ OK
점수 = 점수 + 5;            // ✅ 95
console.log("점수:", 점수);

③ 변수 이름 규칙

• 영문자, 숫자, _, $만 사용 (한글도 가능하지만 보통 영문)
• 숫자로 시작하면 안 됨 (1name ❌)
• 예약어는 못 씀 (let, if, function 등)
• 관습적으로 카멜표기법을 씁니다: userName, totalCount

④ 값 사용하기 + 문자열 합치기

const 이름 = "민수";
const 나이 = 20;

// 방법 1: + 로 잇기
console.log("저는 " + 이름 + "이고, " + 나이 + "살입니다.");

// 방법 2: 백틱(`)으로 감싸고 ${변수} ← 이게 훨씬 편합니다!
console.log(`저는 ${이름}이고, ${나이}살입니다.`);

// 계산도 안에서 가능
console.log(`내년엔 ${나이 + 1}살이 됩니다.`);

변수에 담는 값의 종류를 자료형이라 합니다. 종류에 따라 할 수 있는 일이 달라요. (숫자는 더할 수 있지만 글자는 직접 곱할 수 없죠.)

// typeof 로 자료형을 확인할 수 있어요
console.log(typeof "사과");      // "string"
console.log(typeof 100);         // "number"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"

// 배열과 객체
const 과일들 = ["사과", "바나나", "포도"];   // 배열
console.log(과일들[0]);          // "사과"  (0부터 셈!)
console.log(과일들.length);      // 3

const 학생 = { 이름: "민수", 나이: 20 };     // 객체
console.log(학생.이름);          // "민수"
console.log(학생["나이"]);       // 20

① 숫자와 문자가 만나면? — 자동 형변환

console.log("5" + 3);     // "53"   ← 문자열 결합!
console.log("5" - 3);     // 2      ← 숫자로 자동 변환
console.log(Number("5")); // 5
console.log(String(5));   // "5"

함수(function)는 여러 줄의 코드를 이름 하나로 묶어 둔 것입니다. 한 번 만들어 두면 필요할 때마다 그 이름만 부르면 됩니다.

① 가장 기본 형태

// function 이름(매개변수) { ...할 일... return 결과; }
function 인사하기(이름) {
    return `안녕하세요, ${이름}님!`;
}

// 함수를 부르려면: 이름() 형태
console.log(인사하기("민수"));   // "안녕하세요, 민수님!"
console.log(인사하기("영희"));   // "안녕하세요, 영희님!"

용어 정리:
• 매개변수(parameter): 함수가 받을 값의 이름 — 위에선 이름
• 인자(argument): 부를 때 실제로 넣는 값 — 위에선 "민수"
• return: 함수가 돌려주는 결과 — 없으면 undefined 반환

② 화살표 함수 (요즘 가장 많이 쓰는 짧은 표기)

// 위와 똑같은 함수를 화살표로 ↓
const 인사하기2 = (이름) => {
    return `안녕하세요, ${이름}님!`;
};

// 한 줄짜리 함수는 더 짧게 (return 생략 가능)
const 두배 = (n) => n * 2;
console.log(두배(5));    // 10

// 매개변수 여러 개
const 더하기 = (a, b) => a + b;
console.log(더하기(3, 7));   // 10

// 매개변수 없음
const 인사 = () => "안녕!";
console.log(인사());

③ 기본값 매개변수

// 인자를 안 넣으면 기본값이 사용됩니다
function 음료주문(메뉴 = "아메리카노", 사이즈 = "Tall") {
    return `${사이즈} ${메뉴} 주문 완료!`;
}

console.log(음료주문());                    // Tall 아메리카노 주문 완료!
console.log(음료주문("라떼"));              // Tall 라떼 주문 완료!
console.log(음료주문("라떼", "Grande"));    // Grande 라떼 주문 완료!

프로그램이 상황에 따라 다른 길로 가도록 만드는 문법입니다. "비가 오면 우산을 챙기고, 안 오면 그냥 나간다" — 이런 흐름이죠.

① 비교 연산자 먼저 알기

② if / else if / else

const 점수 = 78;

if (점수 >= 90) {
    console.log("A 학점");
} else if (점수 >= 80) {
    console.log("B 학점");
} else if (점수 >= 70) {
    console.log("C 학점");      // ← 78점이라 여기 실행!
} else {
    console.log("재시험");
}

// AND, OR 연산자와 함께
const 나이 = 17;
const 보호자동반 = true;

if (나이 >= 19 || 보호자동반) {
    console.log("입장 가능");
} else {
    console.log("입장 불가");
}

③ 삼항 연산자 (한 줄 if-else)

// 형태: 조건 ? 참일때값 : 거짓일때값
const 나이 = 20;
const 결과 = 나이 >= 19 ? "성인" : "미성년자";
console.log(결과);    // "성인"

// 위는 아래와 똑같음
let 결과2;
if (나이 >= 19) 결과2 = "성인";
else 결과2 = "미성년자";

④ switch — 값이 여러 가지일 때

const 요일 = "월";

switch (요일) {
    case "월":
    case "화":
    case "수":
    case "목":
    case "금":
        console.log("평일");
        break;
    case "토":
    case "일":
        console.log("주말");
        break;
    default:
        console.log("알 수 없는 요일");
}

같은 일을 여러 번 해야 할 때 사용합니다. 100명에게 인사하기, 리스트의 모든 항목 출력하기 — 손으로 100번 쓸 순 없겠죠?

① for 문 — "몇 번 반복"이 정해졌을 때

// for (시작; 조건; 증가) { ...반복할 일... }

for (let i = 0; i < 5; i++) {
    console.log(`${i}번째 반복`);
}
// 출력: 0번째 반복 / 1번째 반복 / ... / 4번째 반복

// 1부터 10까지의 합
let 합계 = 0;
for (let i = 1; i <= 10; i++) {
    합계 = 합계 + i;     // 합계 += i 와 같음
}
console.log("1~10 합:", 합계);   // 55

구조를 차근차근 보면:
• let i = 0 → 시작값 (보통 0)
• i < 5 → 이 조건이 true인 동안 반복
• i++ → 한 번 끝날 때마다 i를 1 증가 (i = i + 1)

② for...of — 배열의 모든 항목 순회 (가장 쉬움!)

const 과일들 = ["사과", "바나나", "포도", "키위"];

for (const 과일 of 과일들) {
    console.log("좋아하는 과일:", 과일);
}
// 출력: 사과 → 바나나 → 포도 → 키위 차례로

③ forEach — 함수형 스타일

const 점수목록 = [85, 92, 78, 95, 60];

점수목록.forEach((점수, 인덱스) => {
    console.log(`${인덱스 + 1}번 학생: ${점수}점`);
});

④ while — 조건이 true인 동안 계속

// 횟수가 정해지지 않고 "어떤 조건이 만족될 때까지"
let 남은횟수 = 3;

while (남은횟수 > 0) {
    console.log(`남은 기회: ${남은횟수}`);
    남은횟수--;     // 1씩 감소 (남은횟수 = 남은횟수 - 1)
}
console.log("게임 끝!");

⑤ break / continue — 흐름 제어

// break: 반복 즉시 종료
for (let i = 0; i < 10; i++) {
    if (i === 5) break;     // 5가 되면 멈춤
    console.log(i);          // 0, 1, 2, 3, 4
}

// continue: 이번 회차만 건너뛰고 다음으로
for (let i = 0; i < 5; i++) {
    if (i === 2) continue;   // 2일 때 console.log를 건너뜀
    console.log(i);          // 0, 1, 3, 4
}

DOM(Document Object Model)은 브라우저가 HTML을 읽어 만든 객체 트리입니다. JS로 이 트리의 어떤 요소든 골라내서 글자, 모양, 행동을 바꿀 수 있어요. "인터랙티브한 웹"의 진짜 출발점입니다.

① 요소를 "선택"하는 4가지 방법

// 1. ID로 찾기 (한 개) — 가장 빠름
const 제목 = document.getElementById('title');

// 2. CSS 선택자로 찾기 (한 개) — 가장 자주 씀
const 첫번째버튼 = document.querySelector('.btn');     // 클래스
const 입력창 = document.querySelector('#email');        // id
const 첫p = document.querySelector('p');                // 태그

// 3. CSS 선택자로 여러 개 찾기 → 배열 비슷한 것
const 모든버튼 = document.querySelectorAll('.btn');
모든버튼.forEach(btn => console.log(btn.textContent));

// 4. 태그명으로 여러 개
const 모든p = document.getElementsByTagName('p');

② 직접 해보기 ① — 위 코드를 그대로 실행

아래는 위 코드의 대상이 되는 실제 HTML 구조입니다. ▶ 실행을 누르면 위 코드가 그대로 동작해 어떤 요소가 잡혔는지 결과로 보여줍니다.

③ 내용 바꾸기 — textContent vs innerHTML

const 제목 = document.querySelector('#target-text');

// textContent: 글자만 (HTML 태그 안 먹힘 → 안전)
제목.textContent = "새 제목입니다";

// innerHTML: HTML 태그 먹힘 (강력하지만 보안 주의)
제목.innerHTML = "<b>굵은</b> 제목";

// 입력창의 값은 .value
const 입력 = document.querySelector('#user-input');
console.log(입력.value);          // 사용자가 입력한 값 읽기
입력.value = "기본값 세팅";       // 값 채워 넣기

④ 직접 해보기 ② — 위 코드를 그대로 동작시키기

아래 데모는 위 코드 블록과 같은 식별자(#target-text, #user-input)를 사용합니다. 버튼을 누르면 위에 적힌 코드가 한 줄도 바꾸지 않고 그대로 실행됩니다.

// ↑ 위 데모 버튼이 실행하는 코드 (코드와 데모가 1:1 일치)
function changeText() {
    document.querySelector('#target-text').textContent
        = document.querySelector('#user-input').value;
}
function changeHTML() {
    document.querySelector('#target-text').innerHTML
        = document.querySelector('#user-input').value;
}
function readValue() {
    console.log(document.querySelector('#user-input').value);
}
function setValue() {
    document.querySelector('#user-input').value = "기본값 세팅";
}

① 스타일 직접 바꾸기 (.style)

const 박스 = document.querySelector('#color-box');

// CSS의 background-color → JS는 backgroundColor (카멜표기)
박스.style.backgroundColor = "tomato";
박스.style.color = "white";
박스.style.fontSize = "20px";
박스.style.padding = "20px";
박스.style.borderRadius = "12px";

⚠️ CSS 속성에 하이픈(-)이 있으면 JS에선 카멜표기로 바뀝니다.
background-color → backgroundColor, font-size → fontSize

② 직접 해보기 ① — 위 .style 코드를 그대로 적용

// ↑ 위 버튼이 실행하는 코드 (위쪽 코드와 한 줄도 다르지 않음)
function applyStyleCode() {
    const 박스 = document.querySelector('#color-box');
    박스.style.backgroundColor = "tomato";
    박스.style.color = "white";
    박스.style.fontSize = "20px";
    박스.style.padding = "20px";
    박스.style.borderRadius = "12px";
}

③ 클래스로 한 번에 바꾸기 (.classList) — 추천!

스타일을 직접 하나씩 바꾸는 것보다 CSS에 클래스를 미리 정의해 두고 JS로 클래스를 붙였다 떼는 방식이 훨씬 깔끔합니다.

// CSS에 .highlight { ... } 가 미리 정의돼 있다고 가정
const 박스 = document.querySelector('#color-box');

박스.classList.add('highlight');         // 클래스 추가
박스.classList.remove('highlight');      // 제거
박스.classList.toggle('highlight');      // 있으면 빼고, 없으면 더하기 (스위치!)
박스.classList.contains('highlight');    // 있나? → true/false (콘솔 출력)

④ 직접 해보기 ② — classList 4가지 메서드

같은 #color-box에 위 4가지 메서드를 그대로 호출해 봅니다. contains 결과는 아래 출력 박스에 표시됩니다.

⑤ 속성(attribute) 다루기

const 링크 = document.querySelector('#demo-link');
const 이미지 = document.querySelector('#demo-img');

// 읽기
console.log(링크.getAttribute('href'));

// 쓰기
링크.setAttribute('href', 'https://google.com');
이미지.setAttribute('alt', '귀여운 고양이');

// 자주 쓰는 속성은 직접 접근도 가능
링크.href = 'https://naver.com';

// 삭제
링크.removeAttribute('target');

⑥ 직접 해보기 ③ — 위 속성 코드를 그대로 실행

데모 링크 (현재: example.com)

① 새 요소 만들고 붙이기

// 1. 새 요소 만들기
const 새항목 = document.createElement('li');

// 2. 내용/스타일/클래스 설정
새항목.textContent = '새로 추가한 항목';

// 3. 부모 요소 안에 넣기
const 목록 = document.querySelector('#demo-list');
목록.appendChild(새항목);          // 맨 끝에 추가
// 목록.prepend(새항목);            // 맨 앞에

② 요소 삭제

const 삭제할것 = document.querySelector('#demo-list li:last-child');
삭제할것.remove();                // 자기 자신을 제거 (간단!)

③ 직접 해보기 ① — 위 코드를 그대로 실행

아래는 위 코드의 대상 #demo-list입니다. 두 버튼을 누르면 위 코드 그대로 실행됩니다.

④ 이벤트 — 사용자 행동에 반응하기 ⭐

클릭, 키 입력, 마우스 움직임, 스크롤... 사용자의 모든 행동은 이벤트로 전달됩니다. JS는 "이 요소에서 이런 일이 일어나면, 이걸 해라"라고 미리 등록해 둡니다.

const 버튼 = document.querySelector('#evt-btn');

// 형태: 요소.addEventListener('이벤트이름', 실행할함수)
버튼.addEventListener('click', () => {
    console.log('버튼이 클릭되었어요!');
});

// 입력창의 글자가 바뀔 때마다
const 입력 = document.querySelector('#evt-input');
입력.addEventListener('input', (e) => {
    console.log('현재 값:', e.target.value);
});

// 셀렉트의 선택값이 바뀌면
const 셀렉트 = document.querySelector('#evt-select');
셀렉트.addEventListener('change', (e) => {
    console.log('선택:', e.target.value);
});

⑤ 직접 해보기 ② — 위 이벤트 코드를 그대로 등록

아래 요소들의 식별자(#evt-btn, #evt-input, #evt-select)는 위 코드와 같습니다. ▶ 실행을 누르면 위 코드 3개가 그대로 등록되고, 그 뒤로 발생한 이벤트가 출력 박스에 기록됩니다.

⑥ 종합 데모 — 할 일 추가/삭제하기

// 위 데모의 핵심 코드
function addTodo() {
    const 입력 = document.querySelector('#todo-input');
    const 글자 = 입력.value.trim();
    if (글자 === '') return;          // 빈 값이면 무시

    const li = document.createElement('li');
    li.textContent = 글자 + ' ';

    const btn = document.createElement('button');
    btn.textContent = '삭제';
    btn.onclick = () => li.remove();   // 클릭하면 자기 li 제거
    li.appendChild(btn);

    document.querySelector('#todo-list').appendChild(li);
    입력.value = '';                   // 입력창 비우기
}

// Enter 키로도 추가
document.querySelector('#todo-input')
    .addEventListener('keydown', (e) => {
        if (e.key === 'Enter') addTodo();
    });

JS의 진짜 힘은 전 세계 개발자들이 만들어 둔 패키지(라이브러리)를 한 줄로 끌어다 쓸 수 있다는 점입니다. 차트, 지도, 애니메이션, 데이터 분석… 직접 만들면 몇 달 걸릴 기능을 몇 줄로 끝낼 수 있어요.

사용법은 정말 간단합니다 — 한 줄이면 끝

<!-- HTML의 <head> 또는 <body> 끝에 추가 -->
<script src="https://cdn.jsdelivr.net/npm/패키지이름"></script>

<!-- 그 다음부터 그 라이브러리의 기능을 그대로 쓸 수 있습니다 -->
<script>
    // 라이브러리가 제공하는 객체/함수 사용
</script>