레슨 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); // 4Date & 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의 공식 레퍼런스입니다. 메서드의 정확한 사용법이나 브라우저 호환성을 확인할 때 참고하세요.