참고 자료 · 치트시트
JavaScript 치트시트
자주 사용하는 문법을 한 화면에 모았습니다. 오른쪽 번호를 누르면 그 문법을 다루는 단원으로 갑니다.
값과 변수
let n = 1; |
다시 넣을 수 있는 변수입니다. | 1.3 |
const NAME = "홍길동"; |
다시 넣을 수 없습니다. 기본으로 이것을 사용합니다. | 1.3 |
typeof value |
값의 타입을 글자로 돌려줍니다. | 1.4 |
Number("12") · String(12) |
타입을 바꿉니다. 숫자로 바꿀 수 없으면 NaN 입니다. |
1.4 |
null · undefined |
비었다고 정한 값과, 아직 넣지 않은 값입니다. | 1.4 |
Boolean(value) |
거짓이 되는 값은 0 · "" · null ·
undefined · NaN 입니다. |
1.7 |
문자열
`${name} 님` |
백틱 안에서 값을 끼워 넣습니다. | 1.5 |
text.length |
글자 수입니다. 괄호를 붙이지 않습니다. | 1.5 |
text.includes("가") |
담고 있으면 true 입니다. |
1.5 |
text.slice(0, 3) |
일부를 잘라 냅니다. 음수는 뒤에서 셉니다. | 1.5 |
text.split(",") |
글자를 잘라 배열로 만듭니다. | 1.5 |
text.trim() · text.replace(a, b) |
양끝 공백을 없애고, 찾은 것을 바꿉니다. 원본은 그대로입니다. | 1.5 |
숫자
0.1 + 0.2 |
0.30000000000000004 입니다. 소수는 자릿수를 정해 견줍니다. |
1.6 |
n.toFixed(2) |
소수 자릿수를 정합니다. 결과는 글자입니다. | 1.6 |
Math.round · floor · ceil |
반올림 · 내림 · 올림입니다. | 1.6 |
Math.max(...values) |
가장 큰 값입니다. 배열은 스프레드로 펴서 넘깁니다. | 3.7 |
n.toLocaleString("ko-KR") |
자릿점을 찍습니다. | 8.4 |
Number.isNaN(value) |
숫자가 아닌지 확인합니다. NaN === NaN 은 거짓입니다. |
1.6 |
조건과 반복
=== · !== |
값과 타입을 함께 비교합니다. == 는 사용하지 않습니다. |
1.7 |
&& · || · ! |
그리고 · 또는 · 반대입니다. 앞이 결과를 정하면 뒤는 실행하지 않습니다. | 1.7 |
if · else if · else |
조건에 따라 다른 코드를 실행합니다. | 1.8 |
switch (v) { case 1: … break; } |
값이 여럿일 때 사용합니다. break 를 빠뜨리면 다음으로 흘러갑니다. |
1.9 |
cond ? a : b |
값을 고르는 자리에 사용합니다. | 1.9 |
for (let i = 0; i < n; i++) |
횟수가 정해진 반복입니다. | 1.10 |
for (const v of list) |
배열의 값을 하나씩 꺼냅니다. | 3.2 |
while (cond) |
조건이 참인 동안 반복합니다. 멈추는 조건을 반드시 둡니다. | 1.10 |
break · continue |
반복을 끝내거나, 이번 회차만 건너뜁니다. | 1.10 |
함수
function add(a, b) { return a + b; } |
선언문입니다. 위로 끌어올려져 앞에서도 호출됩니다. | 2.1 |
const add = (a, b) => a + b; |
화살표 함수입니다. 중괄호가 없으면 그 값이 반환값입니다. | 2.2 |
function f(a = 1) { } |
넘기지 않았을 때의 기본값입니다. | 2.3 |
function f(...args) { } |
남은 인자를 배열로 받습니다. | 2.3 |
let · const 의 범위 |
중괄호 안에서만 살아 있습니다. var 는 함수 전체입니다. |
2.4 |
| 클로저 | 안쪽 함수가 바깥 변수를 기억합니다. | 2.5 |
| 함수를 인자로 넘기기 | list.map(fn) 처럼 함수 자체를 값으로 다룹니다. |
2.6 |
배열
list.push(v) · pop() |
끝에 넣고 끝에서 꺼냅니다. 원본을 바꿉니다. | 3.1 |
list.forEach(v => …) |
하나씩 실행합니다. 반환값이 없습니다. | 3.2 |
list.map(v => v * 2) |
같은 길이의 새 배열을 만듭니다. | 3.3 |
list.filter(v => v > 0) |
조건에 맞는 것만 담은 새 배열입니다. | 3.3 |
list.find(v => v.id === 1) |
처음 맞는 값 하나입니다. 없으면 undefined 입니다. |
3.4 |
list.some · every |
하나라도 맞는지 · 모두 맞는지입니다. | 3.4 |
list.reduce((sum, v) => sum + v, 0) |
값을 하나로 모읍니다. 마지막 인자가 시작값입니다. | 3.4 |
list.sort((a, b) => a - b) |
원본을 바꿉니다. 비교 함수를 빠뜨리면 글자 차례로 정렬합니다. | 3.5 |
[...list] |
얕은 복사입니다. 원본을 지키고 싶을 때 사용합니다. | 3.7 |
list.join(", ") |
배열을 글자로 잇습니다. | 3.1 |
객체와 JSON
const user = { name: "홍길동", age: 20 }; |
이름과 값의 짝입니다. | 3.6 |
user.name · user["name"] |
이름이 변수에 담겨 있으면 대괄호로 읽습니다. | 3.6 |
Object.keys · values · entries |
이름 · 값 · 짝을 배열로 꺼냅니다. | 3.6 |
const { name, age } = user; |
구조 분해입니다. 이름이 같은 변수를 한 번에 만듭니다. | 3.7 |
{ ...user, age: 21 } |
펼쳐 담고 일부만 덮어씁니다. 원본은 그대로입니다. | 3.7 |
JSON.stringify(value) |
값을 글자로 바꿉니다. 저장하거나 보낼 때 사용합니다. | 3.8 |
JSON.parse(text) |
글자를 값으로 되돌립니다. 모양이 맞지 않으면 예외가 발생합니다. | 3.8 |
DOM
document.querySelector("#id") |
맞는 것 하나입니다. 없으면 null 입니다. |
4.2 |
document.querySelectorAll(".c") |
맞는 것 모두입니다. forEach 로 탐색합니다. |
4.2 |
el.textContent = "글" |
글자를 넣습니다. 태그는 글자 그대로 보입니다. | 4.3 |
el.value |
입력 칸의 값입니다. 언제나 글자입니다. | 4.7 |
el.dataset.name |
data-name 속성을 읽고 씁니다. |
4.3 |
el.classList.add · remove · toggle |
클래스를 다룹니다. 스타일은 CSS 에 두고 클래스로 바꿉니다. | 4.4 |
document.createElement("li") |
요소를 만듭니다. append 로 넣어야 보입니다. |
4.6 |
parent.append(child) · replaceChildren() |
넣고, 안을 통째로 비웁니다. | 4.6 |
이벤트
el.addEventListener("click", fn) |
이벤트를 연결합니다. 같은 요소에 여럿을 달 수 있습니다. | 4.5 |
e.target |
실제로 눌린 요소입니다. | 4.5 |
e.preventDefault() |
기본 동작을 막습니다. 폼 제출을 직접 다룰 때 사용합니다. | 4.7 |
e.target.closest(".row") |
위임에 사용합니다. 눌린 자리에서 위로 올라가며 찾습니다. | 4.7 |
"submit" · "input" · "change" |
폼에서 자주 사용하는 이벤트입니다. | 4.7 |
비동기
setTimeout(fn, 1000) |
정한 시간 뒤에 한 번 실행합니다. | 5.1 |
setInterval(fn, 1000) · clearInterval(id) |
되풀이하고 멈춥니다. 돌려받은 번호를 담아 두어야 멈출 수 있습니다. | 8.3 |
new Promise((resolve, reject) => …) |
끝나면 알려 주는 값입니다. | 5.3 |
p.then(fn).catch(fn).finally(fn) |
성공 · 실패 · 언제나입니다. | 5.3 |
async function f() { await p; } |
기다렸다가 다음 줄로 갑니다. await 는 async 안에서만 사용합니다. |
5.4 |
const res = await fetch(url); |
요청을 보냅니다. res.ok 로 성공을 확인합니다. |
5.5 |
const data = await res.json(); |
응답 본문을 값으로 바꿉니다. 이것도 기다려야 합니다. | 5.5 |
try { … } catch (ex) { … } finally { … } |
실패를 받아 화면에 알립니다. | 5.6 |
await Promise.all([a, b]) |
여럿을 함께 기다립니다. 하나라도 실패하면 실패입니다. | 5.3 |
클래스와 모듈
class Product { constructor(name) { … } } |
형태를 정하고 new 로 만듭니다. |
6.1 |
#count |
비공개 필드입니다. 클래스 밖에서 읽을 수 없습니다. | 6.1 |
get total() { … } |
계산해서 돌려주는 속성입니다. 괄호 없이 읽습니다. | 6.1 |
class A extends B { super(); } |
물려받고 부모의 생성자를 호출합니다. | 6.2 |
this |
호출하는 방식이 정합니다. 화살표 함수는 바깥의 것을 그대로 사용합니다. | 6.3 |
export const half = n => n / 2; |
내보냅니다. 파일 하나가 모듈 하나입니다. | 6.4 |
import { half } from "./util.js"; |
필요한 것만 가져옵니다. <script type="module"> 이어야 합니다. |
6.4 |
최신 문법과 저장소
user.address?.city |
앞이 null · undefined 이면 거기서 멈춥니다. |
6.5 |
count ?? 10 |
null · undefined 일 때만 오른쪽을 사용합니다.
0 과 "" 는 그대로 둡니다. |
6.5 |
new Map() · map.get · set · has |
어떤 값이든 열쇠로 사용합니다. 넣은 차례를 지킵니다. | 6.5 |
new Set([1, 2, 2]) |
중복을 없앱니다. [...set] 으로 배열로 되돌립니다. |
6.5 |
localStorage.setItem(k, v) |
새로 고쳐도 남습니다. 값은 글자만 담깁니다. | 7.4 |
JSON.parse(localStorage.getItem(k) ?? "[]") |
배열이나 객체를 꺼낼 때의 모양입니다. 처음 실행도 함께 다룹니다. | 7.4 |
자주 만나는 오류
ReferenceError: x is not defined |
선언하지 않은 이름을 사용했습니다. 철자와 선언 위치를 확인합니다. | 7.1 |
TypeError: Cannot read properties of null |
querySelector 가 찾지 못했습니다. 선택자와 스크립트 위치를 확인합니다. |
7.1 |
TypeError: x is not a function |
함수가 아닌 것을 호출했습니다. 이름과 값의 종류를 확인합니다. | 7.1 |
SyntaxError: Unexpected end of input |
괄호나 중괄호를 닫지 않았습니다. | 7.1 |
TypeError: Assignment to constant variable |
const 로 선언한 변수에 다시 넣었습니다. |
1.3 |
Uncaught (in promise) |
실패한 Promise 를 받지 않았습니다. catch 를 답니다. |
5.6 |