Learning
레슨 9 / 9·15분

JavaScript 레퍼런스

문자열 메서드

javascript
const s = "Hello, World!";

s.length;                  // 13
s.toUpperCase();           // "HELLO, WORLD!"
s.toLowerCase();           // "hello, world!"
s.includes("World");       // true
s.startsWith("Hello");     // true
s.endsWith("!");           // true
s.indexOf("World");        // 7  (-1 if not found)
s.slice(0, 5);             // "Hello"
s.slice(-6);               // "orld!"
s.split(", ");             // ["Hello", "World!"]
s.replace("World", "JS");  // "Hello, JS!"
s.trim();                  // 양쪽 공백 제거
s.padStart(20, "-");       // "-------Hello, World!"
s.repeat(2);               // "Hello, World!Hello, World!"

배열 메서드

javascript
const a = [3, 1, 4, 1, 5];

// 변환 (새 배열 반환)
a.map(n => n * 2);          // [6, 2, 8, 2, 10]
a.filter(n => n > 2);       // [3, 4, 5]
a.slice(1, 3);              // [1, 4]
a.concat([9, 2]);           // [3, 1, 4, 1, 5, 9, 2]
a.flat();                   // 중첩 배열 평탄화
[...new Set(a)];            // [3, 1, 4, 5] (중복 제거)

// 검색
a.find(n => n > 3);         // 4
a.findIndex(n => n > 3);    // 2
a.includes(4);              // true
a.indexOf(1);               // 1
a.some(n => n > 4);         // true
a.every(n => n > 0);        // true

// 축약
a.reduce((s, n) => s + n, 0); // 14
a.join("-");                // "3-1-4-1-5"

// 수정 (원본 변경)
a.push(6);                  // 끝에 추가
a.pop();                    // 끝에서 제거
a.unshift(0);               // 앞에 추가
a.shift();                  // 앞에서 제거
a.splice(1, 2);             // index 1부터 2개 제거
a.sort((x, y) => x - y);   // 오름차순 정렬
a.reverse();                // 뒤집기

객체 메서드

javascript
const obj = { a: 1, b: 2, c: 3 };

Object.keys(obj);           // ["a", "b", "c"]
Object.values(obj);         // [1, 2, 3]
Object.entries(obj);        // [["a",1], ["b",2], ["c",3]]
Object.assign({}, obj);     // 얕은 복사
Object.freeze(obj);         // 수정 불가로 만듦
"a" in obj;                 // true
obj.hasOwnProperty("a");    // true

// entries 활용 — 객체를 배열처럼 순회
Object.entries(obj).forEach(([key, val]) => {
  console.log(key + ": " + val);
});

// fromEntries — 배열을 객체로
const pairs = [["x", 10], ["y", 20]];
Object.fromEntries(pairs);  // { x: 10, y: 20 }

숫자 & Math

javascript
// 숫자 변환
Number("42");              // 42
parseInt("42px");          // 42
parseFloat("3.14em");      // 3.14
(3.14159).toFixed(2);      // "3.14"

// Math 객체
Math.round(4.5);           // 5
Math.floor(4.9);           // 4
Math.ceil(4.1);            // 5
Math.max(1, 5, 3);         // 5
Math.min(1, 5, 3);         // 1
Math.abs(-7);              // 7
Math.random();             // 0 이상 1 미만 랜덤
Math.PI;                   // 3.141592653589793
Math.pow(2, 10);           // 1024
Math.sqrt(16);             // 4

Date & JSON

javascript
// Date
const now = new Date();
now.getFullYear();         // 2025
now.getMonth();            // 0-11 (0 = 1월)
now.getDate();             // 1-31
now.getDay();              // 0-6 (0 = 일요일)
now.toLocaleDateString("ko-KR"); // "2025. 1. 15."
now.toISOString();         // "2025-01-15T..."
Date.now();                // 현재 타임스탬프 (ms)

// JSON
const data = { name: "Kim", scores: [90, 85] };
const json = JSON.stringify(data);       // 문자열로
const parsed = JSON.parse(json);         // 객체로
JSON.stringify(data, null, 2);           // 들여쓰기

DOM API 요약

  • document.querySelector(css) — 첫 번째 매칭 요소
  • document.querySelectorAll(css) — 모든 매칭 요소 (NodeList)
  • element.textContent — 텍스트 읽기/쓰기
  • element.innerHTML — HTML 읽기/쓰기 (XSS 주의)
  • element.classList.add/remove/toggle/contains — 클래스 조작
  • element.style.속성 — 인라인 스타일 변경
  • element.setAttribute(name, value) — 속성 설정
  • element.dataset.키 — data-* 속성 접근
  • element.addEventListener(type, fn) — 이벤트 등록
  • element.remove() — 요소 삭제
  • document.createElement(tag) — 요소 생성
  • parent.appendChild(child) — 자식 추가
💡

MDN Web Docs(developer.mozilla.org)는 JavaScript의 공식 레퍼런스입니다. 메서드의 정확한 사용법이나 브라우저 호환성을 확인할 때 참고하세요.