1회독에서는 코드 → 예상 결과 → 상세 설명 순서로 읽습니다. 2회독에서는 숫자·문자열·조건을 직접 바꾸어 결과를 예측한 뒤 실행합니다. 3회독에서는 예제를 보지 않고 같은 기능을 새 코드로 다시 작성합니다. 특히 배열 메서드, DOM 이벤트, Promise/async-await는 여러 예제를 연속해서 비교하면 차이를 빠르게 이해할 수 있습니다.
중요: DOM·fetch·localStorage 예제는 브라우저 환경을 전제로 합니다. 일부 코드는 필요한 HTML 요소나 서버 API가 있어야 완전히 실행됩니다. 따라서 각 예제는 문법과 핵심 구조를 이해하는 최소 단위로 제시했습니다.
console.log()는 개발자 도구 콘솔에 값을 출력합니다.
console.log("Hello, JavaScript!");문자열은 따옴표로 감싸며, 문장 끝의 세미콜론은 문장의 끝을 명확하게 표시합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
console.log()에는 여러 값을 쉼표로 구분해 전달할 수 있습니다.
let name = "민수";
let age = 17;
console.log(name, age);디버깅할 때 변수 여러 개의 현재 값을 한 줄에서 확인하기 좋습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
+ 연산자는 숫자 덧셈뿐 아니라 문자열 연결에도 사용됩니다.
let language = "JavaScript";
console.log("나는 " + language + "를 공부합니다.");피연산자 중 하나가 문자열이면 문자열 연결이 일어날 수 있으므로 자료형을 주의합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
백틱(`) 문자열에서는 ${표현식}으로 값을 자연스럽게 삽입할 수 있습니다.
let name = "지수";
let score = 95;
console.log(`${name}의 점수는 ${score}점입니다.`);문자열 연결을 여러 번 사용하는 것보다 읽기 쉽고 줄바꿈도 편리합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
alert()는 브라우저에서 간단한 메시지 창을 띄웁니다.
alert("JavaScript 학습을 시작합니다!");학습용으로는 편리하지만 실제 서비스에서는 사용자 흐름을 막기 때문에 남용하지 않습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
prompt()는 사용자가 입력한 값을 문자열로 반환합니다.
let name = prompt("이름을 입력하세요.");
console.log("안녕하세요, " + name + "님!");숫자를 입력받아 계산하려면 Number() 같은 형 변환이 필요합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
confirm()은 확인을 누르면 true, 취소를 누르면 false를 반환합니다.
let answer = confirm("계속하시겠습니까?");
console.log(answer);조건문과 함께 사용하면 사용자의 선택에 따라 동작을 나눌 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
// 뒤의 내용은 한 줄 주석입니다.
// 이 문장은 실행되지 않습니다.
console.log("실행되는 문장");주석은 코드의 목적과 주의점을 기록하지만 너무 당연한 내용을 반복하면 오히려 가독성을 해칠 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
/* ... */는 여러 줄 주석입니다.
/*
여러 줄에 걸친
설명을 작성할 수 있습니다.
*/
console.log("주석 학습");함수 설명이나 임시 메모에 사용할 수 있지만 실제 프로젝트에서는 문서화 규칙을 일관되게 정하는 것이 좋습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
JavaScript는 대소문자를 구분합니다.
let score = 100;
let Score = 80;
console.log(score, Score);score와 Score는 서로 다른 식별자이므로 변수명 규칙을 일관되게 유지하는 것이 중요합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
코드는 기본적으로 위에서 아래 순서로 실행됩니다.
console.log("1단계");
console.log("2단계");
console.log("3단계");제어문이나 비동기 코드가 없다면 작성된 순서가 실행 순서가 됩니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
세미콜론은 문장의 끝을 나타냅니다.
let a = 10;
let b = 20;
console.log(a + b);JavaScript는 자동 세미콜론 삽입 기능이 있지만 학습 단계에서는 일관되게 쓰는 편이 이해하기 쉽습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
바깥 따옴표와 다른 종류의 따옴표를 안쪽에 사용할 수 있습니다.
console.log('그는 "안녕"이라고 말했다.');또는 역슬래시를 사용해 따옴표를 이스케이프할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
\n은 줄바꿈, \t는 탭을 뜻합니다.
console.log("첫째 줄\n둘째 줄\t탭");문자열에서 직접 표현하기 어려운 제어 문자를 역슬래시와 함께 나타냅니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
typeof 연산자는 값의 자료형을 문자열로 알려줍니다.
console.log(typeof 123);
console.log(typeof "123");
console.log(typeof true);디버깅이나 입력값 검증에서 유용하지만 null에는 역사적 이유로 'object'가 나오는 예외가 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
숫자로 바꿀 수 없는 값을 Number()로 변환하면 NaN이 될 수 있습니다.
let x = Number("abc");
console.log(x);
console.log(Number.isNaN(x));NaN 자체 비교보다는 Number.isNaN()으로 검사하는 것이 안전합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
JavaScript 숫자에는 양·음의 무한대를 나타내는 값이 있습니다.
console.log(1 / 0);
console.log(-1 / 0);일반적인 계산 결과에서 Infinity가 나오면 0으로 나누기나 범위 초과를 의심해야 합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
'use strict'는 일부 느슨한 문법을 엄격하게 검사합니다.
"use strict";
let x = 10;
console.log(x);현대의 ES 모듈과 클래스는 기본적으로 엄격 모드이지만 전통 스크립트에서는 명시할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
script를 body 끝에 두면 앞선 HTML 요소가 먼저 만들어진 뒤 코드가 실행됩니다.
<body>
<h1>제목</h1>
<script>
console.log("body 끝에서 실행");
</script>
</body>외부 스크립트에는 defer를 사용하는 방식도 널리 쓰입니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
JavaScript를 별도 .js 파일로 분리하면 구조와 유지보수가 좋아집니다.
<!-- index.html -->
<script src="app.js" defer></script>
// app.js
console.log("외부 파일 실행");defer는 HTML 파싱을 막지 않고 문서 파싱 뒤에 스크립트를 실행하도록 돕습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
let으로 선언한 변수는 값을 다시 대입할 수 있습니다.
let count = 1;
count = 2;
console.log(count);변경될 가능성이 있는 값을 저장할 때 let을 사용합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
const는 재대입할 수 없는 바인딩을 만듭니다.
const PI = 3.14159;
console.log(PI);객체 자체가 얼어붙는 것은 아니므로 객체 내부 속성은 별도로 변경될 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
var는 블록 스코프가 아니라 함수 스코프를 가집니다.
var x = 1;
if (true) {
var x = 2;
}
console.log(x);현대 JavaScript에서는 의도하지 않은 범위 확장을 막기 위해 보통 let/const를 우선합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
정수와 실수 모두 기본적으로 number 자료형입니다.
let n = 42;
let pi = 3.14;
console.log(typeof n, typeof pi);대부분의 일반 수치 계산은 number로 처리합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
BigInt는 매우 큰 정수를 정확하게 다루기 위한 자료형입니다.
let big = 9007199254740993n;
console.log(big + 2n);BigInt와 일반 number를 직접 섞어 계산할 수 없으므로 변환 기준을 명확히 해야 합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
문자열은 문자들의 순서 있는 값입니다.
let s = "JavaScript";
console.log(s.length);length 속성으로 UTF-16 코드 단위 기준 길이를 확인할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
boolean은 true와 false 두 값을 가집니다.
let isPass = 90 >= 60;
console.log(isPass);조건식의 결과나 상태 플래그를 표현할 때 가장 많이 사용합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
선언만 하고 값을 넣지 않은 변수의 값은 undefined입니다.
let data;
console.log(data);값이 아직 정해지지 않은 상태를 뜻하는 경우가 많습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
null은 의도적으로 값이 없음을 나타낼 때 사용합니다.
let selected = null;
console.log(selected);undefined와 목적을 구분해 사용하면 상태를 더 명확하게 표현할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Symbol은 서로 겹치지 않는 고유한 값을 만들 수 있습니다.
const id = Symbol("id");
console.log(typeof id);객체의 충돌 가능성이 낮은 특별한 키 등에 활용됩니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
+는 숫자 덧셈을 수행합니다.
let a = 7, b = 3;
console.log(a + b);문자열이 포함될 경우 문자열 결합으로 동작할 수 있으므로 자료형을 확인합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
/는 나눗셈 연산자입니다.
console.log(7 / 2);Python의 // 같은 정수 나눗셈 연산자는 없으며 필요하면 Math.floor 등을 조합합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
%는 나눗셈의 나머지를 구합니다.
console.log(17 % 5);짝홀 판정, 주기 계산, 순환 인덱스에서 자주 사용합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
**는 거듭제곱 연산자입니다.
console.log(2 ** 10);Math.pow(2, 10)과 같은 의미지만 더 간결합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
++는 값을 1 증가시킵니다.
let n = 5;
n++;
console.log(n);전위형과 후위형은 표현식 안에서 반환값이 다르므로 단독 문장으로 쓰면 혼란을 줄일 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
+=, *= 등은 연산과 대입을 합친 연산자입니다.
let score = 80;
score += 5;
score *= 2;
console.log(score);score += 5는 score = score + 5와 같은 뜻입니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
==는 비교 전에 형 변환을 수행할 수 있습니다.
console.log(5 == "5");예상하기 어려운 결과를 줄이기 위해 보통 ===를 권장합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
===는 값과 자료형을 함께 비교합니다.
console.log(5 === "5");현대 JavaScript에서는 equality 비교의 기본 선택으로 사용하기 좋습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
!==는 값 또는 자료형이 다르면 true입니다.
console.log(10 !== "10");!=보다 암묵적 형 변환이 적어 의도가 더 분명합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
&&는 두 조건이 모두 참인지 검사합니다.
let age = 18;
let hasTicket = true;
console.log(age >= 18 && hasTicket);앞쪽 값이 falsy면 뒤 표현식을 평가하지 않는 단락 평가가 일어납니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
||는 앞 값이 falsy이면 뒤 값을 반환할 수 있습니다.
let nickname = "";
console.log(nickname || "익명");기본값 지정에 쓰이지만 0이나 빈 문자열도 falsy라는 점을 고려합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
!는 참과 거짓을 반전합니다.
console.log(!true);
console.log(!!"hello");!!값 패턴은 값을 boolean으로 바꾸는 간단한 방법입니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
??는 null 또는 undefined일 때만 오른쪽 값을 사용합니다.
let count = 0;
console.log(count ?? 10);0, false, 빈 문자열을 유효한 값으로 유지하고 싶을 때 ||보다 적합합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
?.는 중간 값이 null/undefined일 때 오류 대신 undefined를 반환합니다.
let user = {};
console.log(user.address?.city);깊은 객체의 선택적 속성에 접근할 때 방어 코드를 줄일 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
조건 ? 참일때 : 거짓일때 형태로 값을 선택합니다.
let score = 85;
let result = score >= 60 ? "합격" : "불합격";
console.log(result);간단한 분기에는 유용하지만 중첩이 깊으면 if문이 더 읽기 쉽습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Number()는 가능한 문자열을 숫자로 변환합니다.
let a = Number("25");
console.log(a + 5);사용자 입력은 문자열인 경우가 많아 계산 전에 명시적 변환이 중요합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
parseInt는 문자열 앞부분의 정수 형태를 해석합니다.
console.log(parseInt("42px", 10));진법을 두 번째 인자로 명시하면 의도가 분명해집니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
parseFloat는 문자열 앞부분의 실수 형태를 읽습니다.
console.log(parseFloat("3.14kg"));형식 전체가 숫자인지 검증해야 하는 상황에서는 Number()와 차이를 이해해야 합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
toString()은 값을 문자열 표현으로 바꿀 수 있습니다.
let n = 123;
console.log(n.toString());화면 출력, 문자열 조립, 진법 표현 등에 사용합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
숫자의 toString(진법)은 다른 진법 문자열을 만듭니다.
let n = 255;
console.log(n.toString(16));2진수·8진수·16진수 표현 학습에 유용합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
곱셈은 덧셈보다 먼저 계산됩니다.
console.log(2 + 3 * 4);
console.log((2 + 3) * 4);복잡한 표현식은 괄호로 의도를 명시하면 오류를 줄일 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
...은 배열 요소를 펼칠 수 있습니다.
let a = [1, 2];
let b = [...a, 3];
console.log(b);복사·병합·함수 인수 전달 등 다양한 문맥에서 활용됩니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
구조 분해 할당은 배열이나 객체에서 필요한 값을 바로 꺼냅니다.
let [a, b] = [10, 20];
console.log(a, b);임시 변수를 줄여 데이터를 읽는 의도를 간결하게 표현합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
객체 구조 분해는 속성명과 같은 변수로 값을 추출합니다.
let user = {name: "유진", age: 17};
let {name, age} = user;
console.log(name, age);함수 매개변수에서 필요한 옵션만 뽑아낼 때도 자주 사용합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
변수명과 속성명이 같으면 {name: name}을 {name}으로 줄일 수 있습니다.
let name = "민준";
let age = 18;
let user = {name, age};
console.log(user);객체 생성 코드가 간결해지고 반복이 줄어듭니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
if는 조건이 true일 때 블록을 실행합니다.
let temp = 30;
if (temp >= 30) {
console.log("덥습니다.");
}조건식 자체가 boolean이 아니어도 truthy/falsy 규칙으로 판단됩니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
if-else는 두 경우 중 하나를 선택합니다.
let n = 7;
if (n % 2 === 0) console.log("짝수");
else console.log("홀수");서로 배타적인 조건을 표현하기에 적합합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
else if는 여러 범위를 위에서부터 검사합니다.
let score = 87;
if (score >= 90) console.log("A");
else if (score >= 80) console.log("B");
else console.log("C 이하");범위 조건은 넓은 조건과 좁은 조건의 순서를 주의해야 합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
if 블록 안에 또 다른 if를 둘 수 있습니다.
let age = 19;
let member = true;
if (age >= 18) {
if (member) console.log("입장 가능");
}중첩이 깊어지면 논리 연산자나 조기 반환으로 단순화할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
switch는 하나의 값을 여러 case와 비교합니다.
let day = 2;
switch (day) {
case 1: console.log("월"); break;
case 2: console.log("화"); break;
default: console.log("기타");
}break가 없으면 다음 case까지 이어 실행되는 fall-through가 발생할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
빈 문자열은 falsy입니다.
if ("") console.log("참");
else console.log("거짓");0, -0, NaN, null, undefined, false, 빈 문자열 등이 대표적인 falsy 값입니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
for는 초기식·조건식·증감식을 한 곳에 모읍니다.
for (let i = 1; i <= 5; i++) {
console.log(i);
}반복 횟수가 비교적 분명할 때 적합합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
증감식은 감소 형태로도 작성할 수 있습니다.
for (let i = 5; i >= 1; i--) console.log(i);카운트다운이나 역순 탐색에 활용합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
증감 폭은 1일 필요가 없습니다.
for (let i = 0; i <= 10; i += 2) console.log(i);일정 간격으로 값을 생성하거나 인덱스를 건너뛸 때 사용합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
누적 변수에 반복적으로 값을 더해 합계를 계산합니다.
let sum = 0;
for (let i = 1; i <= 100; i++) sum += i;
console.log(sum);반복 알고리즘에서 accumulator 패턴의 기본 예입니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
누적 곱을 이용해 팩토리얼을 계산할 수 있습니다.
let fact = 1;
for (let i = 1; i <= 5; i++) fact *= i;
console.log(fact);초기값을 0이 아니라 곱셈의 항등원 1로 잡아야 합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
while은 조건이 참인 동안 반복합니다.
let n = 1;
while (n <= 3) {
console.log(n);
n++;
}증감이나 상태 변화가 빠지면 무한 반복이 생길 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
do-while은 조건 검사보다 본문을 먼저 실행합니다.
let n = 5;
do {
console.log(n);
} while (n < 3);따라서 조건이 처음부터 거짓이어도 최소 한 번 실행됩니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
break는 가장 가까운 반복문을 즉시 종료합니다.
for (let i = 1; i <= 10; i++) {
if (i === 4) break;
console.log(i);
}원하는 값을 찾았을 때 탐색을 일찍 끝내 효율을 높일 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
continue는 현재 반복만 건너뛰고 다음 반복으로 이동합니다.
for (let i = 1; i <= 5; i++) {
if (i === 3) continue;
console.log(i);
}제외 조건을 앞부분에서 처리하면 본문 중첩을 줄일 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
반복 변수로 규칙적인 출력을 만들 수 있습니다.
for (let i = 1; i <= 9; i++) {
console.log(`2 × ${i} = ${2*i}`);
}템플릿 리터럴과 산술 연산을 함께 연습하는 예입니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
반복문 안에 반복문을 배치하면 2차원 순회를 표현할 수 있습니다.
for (let r = 1; r <= 3; r++) {
for (let c = 1; c <= 3; c++) {
console.log(r, c);
}
}표, 격자, 행렬 탐색의 기초 구조입니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
문자열 repeat()과 반복문을 조합할 수 있습니다.
for (let i = 1; i <= 5; i++) {
console.log("*".repeat(i));
}반복 패턴을 시각적으로 이해하는 대표 예제입니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
필요한 값만 생성하도록 반복 간격을 설계할 수 있습니다.
let sum = 0;
for (let i = 2; i <= 100; i += 2) sum += i;
console.log(sum);모든 수를 돌며 if로 거르는 방법보다 의도가 명확합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
유클리드 호제법은 나머지 연산을 반복해 최대공약수를 구합니다.
let a = 48, b = 18;
while (b !== 0) {
[a, b] = [b, a % b];
}
console.log(a);구조 분해 할당을 이용하면 두 변수 갱신을 간결하게 표현할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
조건의 우선순위가 중요한 대표 반복 문제입니다.
for (let i = 1; i <= 15; i++) {
if (i % 15 === 0) console.log("FizzBuzz");
else if (i % 3 === 0) console.log("Fizz");
else if (i % 5 === 0) console.log("Buzz");
else console.log(i);
}15의 배수 검사를 먼저 해야 3과 5의 공배수가 FizzBuzz로 처리됩니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
약수는 제곱근까지만 검사해도 소수 여부를 판정할 수 있습니다.
let n = 29;
let prime = n >= 2;
for (let d = 2; d * d <= n && prime; d++) {
if (n % d === 0) prime = false;
}
console.log(prime);d*d <= n 조건은 불필요한 반복을 줄여 효율을 개선합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
앞의 두 항으로 다음 항을 만드는 상태 갱신 예제입니다.
let a = 0, b = 1;
for (let i = 0; i < 10; i++) {
console.log(a);
[a, b] = [b, a + b];
}배열 구조 분해를 이용하면 임시 변수 없이 두 값을 동시에 바꿀 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
반복문과 조건문을 결합하여 선택적으로 값을 누적합니다.
let total = 0;
for (let i = 1; i <= 7; i++) {
if (i % 3 === 0) total += i;
}
console.log(total);반복 범위, 배수 조건, 누적 변수를 바꾸면서 알고리즘의 구성 요소가 결과에 어떤 영향을 주는지 연습합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
반복문과 조건문을 결합하여 선택적으로 값을 누적합니다.
let total = 0;
for (let i = 1; i <= 8; i++) {
if (i % 4 === 0) total += i;
}
console.log(total);반복 범위, 배수 조건, 누적 변수를 바꾸면서 알고리즘의 구성 요소가 결과에 어떤 영향을 주는지 연습합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
반복문과 조건문을 결합하여 선택적으로 값을 누적합니다.
let total = 0;
for (let i = 1; i <= 9; i++) {
if (i % 2 === 0) total += i;
}
console.log(total);반복 범위, 배수 조건, 누적 변수를 바꾸면서 알고리즘의 구성 요소가 결과에 어떤 영향을 주는지 연습합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
반복문과 조건문을 결합하여 선택적으로 값을 누적합니다.
let total = 0;
for (let i = 1; i <= 10; i++) {
if (i % 3 === 0) total += i;
}
console.log(total);반복 범위, 배수 조건, 누적 변수를 바꾸면서 알고리즘의 구성 요소가 결과에 어떤 영향을 주는지 연습합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
반복문과 조건문을 결합하여 선택적으로 값을 누적합니다.
let total = 0;
for (let i = 1; i <= 11; i++) {
if (i % 4 === 0) total += i;
}
console.log(total);반복 범위, 배수 조건, 누적 변수를 바꾸면서 알고리즘의 구성 요소가 결과에 어떤 영향을 주는지 연습합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
반복문과 조건문을 결합하여 선택적으로 값을 누적합니다.
let total = 0;
for (let i = 1; i <= 12; i++) {
if (i % 2 === 0) total += i;
}
console.log(total);반복 범위, 배수 조건, 누적 변수를 바꾸면서 알고리즘의 구성 요소가 결과에 어떤 영향을 주는지 연습합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
반복문과 조건문을 결합하여 선택적으로 값을 누적합니다.
let total = 0;
for (let i = 1; i <= 13; i++) {
if (i % 3 === 0) total += i;
}
console.log(total);반복 범위, 배수 조건, 누적 변수를 바꾸면서 알고리즘의 구성 요소가 결과에 어떤 영향을 주는지 연습합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
반복문과 조건문을 결합하여 선택적으로 값을 누적합니다.
let total = 0;
for (let i = 1; i <= 14; i++) {
if (i % 4 === 0) total += i;
}
console.log(total);반복 범위, 배수 조건, 누적 변수를 바꾸면서 알고리즘의 구성 요소가 결과에 어떤 영향을 주는지 연습합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
반복문과 조건문을 결합하여 선택적으로 값을 누적합니다.
let total = 0;
for (let i = 1; i <= 15; i++) {
if (i % 2 === 0) total += i;
}
console.log(total);반복 범위, 배수 조건, 누적 변수를 바꾸면서 알고리즘의 구성 요소가 결과에 어떤 영향을 주는지 연습합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
반복문과 조건문을 결합하여 선택적으로 값을 누적합니다.
let total = 0;
for (let i = 1; i <= 16; i++) {
if (i % 3 === 0) total += i;
}
console.log(total);반복 범위, 배수 조건, 누적 변수를 바꾸면서 알고리즘의 구성 요소가 결과에 어떤 영향을 주는지 연습합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
반복문과 조건문을 결합하여 선택적으로 값을 누적합니다.
let total = 0;
for (let i = 1; i <= 17; i++) {
if (i % 4 === 0) total += i;
}
console.log(total);반복 범위, 배수 조건, 누적 변수를 바꾸면서 알고리즘의 구성 요소가 결과에 어떤 영향을 주는지 연습합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
반복문과 조건문을 결합하여 선택적으로 값을 누적합니다.
let total = 0;
for (let i = 1; i <= 18; i++) {
if (i % 2 === 0) total += i;
}
console.log(total);반복 범위, 배수 조건, 누적 변수를 바꾸면서 알고리즘의 구성 요소가 결과에 어떤 영향을 주는지 연습합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
함수는 반복할 코드를 이름으로 묶습니다.
function greet() {
console.log("안녕하세요!");
}
greet();선언문 형태 함수는 호출 시점보다 뒤에 정의되어 있어도 호이스팅으로 사용할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
매개변수는 함수가 외부 값을 받아들이는 통로입니다.
function greet(name) {
console.log(`안녕하세요, ${name}님!`);
}
greet("서연");함수를 데이터에 따라 재사용 가능하게 만듭니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
return은 함수의 계산 결과를 호출한 곳으로 돌려줍니다.
function add(a, b) {
return a + b;
}
let result = add(3, 4);
console.log(result);return 이후 같은 블록의 코드는 실행되지 않습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
매개변수에 기본값을 지정할 수 있습니다.
function power(x, n = 2) {
return x ** n;
}
console.log(power(5));인수를 생략했을 때 사용할 합리적인 기본 동작을 정의합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
함수를 값처럼 변수에 저장할 수 있습니다.
const add = function(a, b) {
return a + b;
};
console.log(add(2, 5));함수 표현식은 변수의 초기화 시점 이후에 호출해야 합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
화살표 함수는 짧은 함수 표현에 유용합니다.
const square = x => x * x;
console.log(square(6));중괄호와 return을 생략한 한 줄 표현식에서는 그 표현식 값이 자동 반환됩니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
매개변수가 둘 이상이면 괄호를 사용합니다.
const add = (a, b) => a + b;
console.log(add(10, 20));콜백 함수에서 특히 많이 사용되는 문법입니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
함수를 다른 함수의 인수로 전달할 수 있습니다.
function runTwice(fn) {
fn();
fn();
}
runTwice(() => console.log("실행"));이런 함수 인수를 콜백이라고 하며 이벤트·비동기 처리의 핵심 개념입니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
let/const는 선언된 블록을 중심으로 유효 범위를 가집니다.
function test() {
let x = 10;
console.log(x);
}
test();함수 안에서 만든 변수는 일반적으로 함수 밖에서 직접 접근할 수 없습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
전역 변수는 여러 함수가 공유할 수 있습니다.
let count = 0;
function increase() {
count++;
}
increase();
console.log(count);편리하지만 의존성이 커지므로 가능한 한 좁은 스코프를 사용하는 것이 유지보수에 유리합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
내부 함수는 외부 함수 실행이 끝난 뒤에도 외부 변수에 접근할 수 있습니다.
function makeCounter() {
let count = 0;
return () => ++count;
}
const counter = makeCounter();
console.log(counter(), counter());이러한 성질을 클로저라 하며 상태 은닉에 활용할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
재귀 함수는 자기 자신을 호출합니다.
function factorial(n) {
if (n <= 1) return 1;
return n * factorial(n - 1);
}
console.log(factorial(5));반드시 종료 조건이 있어야 무한 호출과 스택 초과를 막을 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
큰 문제를 더 작은 같은 형태의 문제로 줄여 해결할 수 있습니다.
function sum(n) {
if (n === 0) return 0;
return n + sum(n - 1);
}
console.log(sum(5));재귀식과 종료 조건의 관계를 이해하는 데 좋은 예입니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
...nums는 여러 인수를 하나의 배열로 모읍니다.
function sum(...nums) {
return nums.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3, 4));인수 개수가 정해지지 않은 함수를 만들 때 유용합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
함수는 반환값이 될 수도 있습니다.
function multiplier(k) {
return x => x * k;
}
const double = multiplier(2);
console.log(double(7));고차 함수는 동작을 조립하고 재사용하는 함수형 프로그래밍의 기초입니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
입력값을 매개변수로 받고 계산 결과를 반환하는 순수 함수 형태를 연습합니다.
function transform1(value) {
const offset = 1;
return value * 2 + offset;
}
console.log(transform1(3));같은 입력에는 같은 결과를 돌려주는 함수는 테스트하기 쉽습니다. 함수 이름, 입력, 반환식의 역할을 분리해서 읽어 보세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
입력값을 매개변수로 받고 계산 결과를 반환하는 순수 함수 형태를 연습합니다.
function transform2(value) {
const offset = 2;
return value * 2 + offset;
}
console.log(transform2(4));같은 입력에는 같은 결과를 돌려주는 함수는 테스트하기 쉽습니다. 함수 이름, 입력, 반환식의 역할을 분리해서 읽어 보세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
입력값을 매개변수로 받고 계산 결과를 반환하는 순수 함수 형태를 연습합니다.
function transform3(value) {
const offset = 3;
return value * 2 + offset;
}
console.log(transform3(5));같은 입력에는 같은 결과를 돌려주는 함수는 테스트하기 쉽습니다. 함수 이름, 입력, 반환식의 역할을 분리해서 읽어 보세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
입력값을 매개변수로 받고 계산 결과를 반환하는 순수 함수 형태를 연습합니다.
function transform4(value) {
const offset = 4;
return value * 2 + offset;
}
console.log(transform4(6));같은 입력에는 같은 결과를 돌려주는 함수는 테스트하기 쉽습니다. 함수 이름, 입력, 반환식의 역할을 분리해서 읽어 보세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
입력값을 매개변수로 받고 계산 결과를 반환하는 순수 함수 형태를 연습합니다.
function transform5(value) {
const offset = 5;
return value * 2 + offset;
}
console.log(transform5(7));같은 입력에는 같은 결과를 돌려주는 함수는 테스트하기 쉽습니다. 함수 이름, 입력, 반환식의 역할을 분리해서 읽어 보세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
입력값을 매개변수로 받고 계산 결과를 반환하는 순수 함수 형태를 연습합니다.
function transform6(value) {
const offset = 6;
return value * 2 + offset;
}
console.log(transform6(8));같은 입력에는 같은 결과를 돌려주는 함수는 테스트하기 쉽습니다. 함수 이름, 입력, 반환식의 역할을 분리해서 읽어 보세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
입력값을 매개변수로 받고 계산 결과를 반환하는 순수 함수 형태를 연습합니다.
function transform7(value) {
const offset = 7;
return value * 2 + offset;
}
console.log(transform7(9));같은 입력에는 같은 결과를 돌려주는 함수는 테스트하기 쉽습니다. 함수 이름, 입력, 반환식의 역할을 분리해서 읽어 보세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
입력값을 매개변수로 받고 계산 결과를 반환하는 순수 함수 형태를 연습합니다.
function transform8(value) {
const offset = 8;
return value * 2 + offset;
}
console.log(transform8(10));같은 입력에는 같은 결과를 돌려주는 함수는 테스트하기 쉽습니다. 함수 이름, 입력, 반환식의 역할을 분리해서 읽어 보세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
입력값을 매개변수로 받고 계산 결과를 반환하는 순수 함수 형태를 연습합니다.
function transform9(value) {
const offset = 9;
return value * 2 + offset;
}
console.log(transform9(11));같은 입력에는 같은 결과를 돌려주는 함수는 테스트하기 쉽습니다. 함수 이름, 입력, 반환식의 역할을 분리해서 읽어 보세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
입력값을 매개변수로 받고 계산 결과를 반환하는 순수 함수 형태를 연습합니다.
function transform10(value) {
const offset = 10;
return value * 2 + offset;
}
console.log(transform10(12));같은 입력에는 같은 결과를 돌려주는 함수는 테스트하기 쉽습니다. 함수 이름, 입력, 반환식의 역할을 분리해서 읽어 보세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
입력값을 매개변수로 받고 계산 결과를 반환하는 순수 함수 형태를 연습합니다.
function transform11(value) {
const offset = 11;
return value * 2 + offset;
}
console.log(transform11(13));같은 입력에는 같은 결과를 돌려주는 함수는 테스트하기 쉽습니다. 함수 이름, 입력, 반환식의 역할을 분리해서 읽어 보세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
입력값을 매개변수로 받고 계산 결과를 반환하는 순수 함수 형태를 연습합니다.
function transform12(value) {
const offset = 12;
return value * 2 + offset;
}
console.log(transform12(14));같은 입력에는 같은 결과를 돌려주는 함수는 테스트하기 쉽습니다. 함수 이름, 입력, 반환식의 역할을 분리해서 읽어 보세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
입력값을 매개변수로 받고 계산 결과를 반환하는 순수 함수 형태를 연습합니다.
function transform13(value) {
const offset = 13;
return value * 2 + offset;
}
console.log(transform13(15));같은 입력에는 같은 결과를 돌려주는 함수는 테스트하기 쉽습니다. 함수 이름, 입력, 반환식의 역할을 분리해서 읽어 보세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
입력값을 매개변수로 받고 계산 결과를 반환하는 순수 함수 형태를 연습합니다.
function transform14(value) {
const offset = 14;
return value * 2 + offset;
}
console.log(transform14(16));같은 입력에는 같은 결과를 돌려주는 함수는 테스트하기 쉽습니다. 함수 이름, 입력, 반환식의 역할을 분리해서 읽어 보세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
입력값을 매개변수로 받고 계산 결과를 반환하는 순수 함수 형태를 연습합니다.
function transform15(value) {
const offset = 15;
return value * 2 + offset;
}
console.log(transform15(17));같은 입력에는 같은 결과를 돌려주는 함수는 테스트하기 쉽습니다. 함수 이름, 입력, 반환식의 역할을 분리해서 읽어 보세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
입력값을 매개변수로 받고 계산 결과를 반환하는 순수 함수 형태를 연습합니다.
function transform16(value) {
const offset = 16;
return value * 2 + offset;
}
console.log(transform16(18));같은 입력에는 같은 결과를 돌려주는 함수는 테스트하기 쉽습니다. 함수 이름, 입력, 반환식의 역할을 분리해서 읽어 보세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
입력값을 매개변수로 받고 계산 결과를 반환하는 순수 함수 형태를 연습합니다.
function transform17(value) {
const offset = 17;
return value * 2 + offset;
}
console.log(transform17(19));같은 입력에는 같은 결과를 돌려주는 함수는 테스트하기 쉽습니다. 함수 이름, 입력, 반환식의 역할을 분리해서 읽어 보세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
입력값을 매개변수로 받고 계산 결과를 반환하는 순수 함수 형태를 연습합니다.
function transform18(value) {
const offset = 18;
return value * 2 + offset;
}
console.log(transform18(20));같은 입력에는 같은 결과를 돌려주는 함수는 테스트하기 쉽습니다. 함수 이름, 입력, 반환식의 역할을 분리해서 읽어 보세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
입력값을 매개변수로 받고 계산 결과를 반환하는 순수 함수 형태를 연습합니다.
function transform19(value) {
const offset = 19;
return value * 2 + offset;
}
console.log(transform19(21));같은 입력에는 같은 결과를 돌려주는 함수는 테스트하기 쉽습니다. 함수 이름, 입력, 반환식의 역할을 분리해서 읽어 보세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
입력값을 매개변수로 받고 계산 결과를 반환하는 순수 함수 형태를 연습합니다.
function transform20(value) {
const offset = 20;
return value * 2 + offset;
}
console.log(transform20(22));같은 입력에는 같은 결과를 돌려주는 함수는 테스트하기 쉽습니다. 함수 이름, 입력, 반환식의 역할을 분리해서 읽어 보세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
문자열은 0부터 시작하는 인덱스로 문자에 접근할 수 있습니다.
let s = "JavaScript";
console.log(s[0], s[4]);문자열 자체는 불변이므로 특정 문자를 직접 대입해 바꾸는 방식은 사용할 수 없습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
includes()는 부분 문자열 포함 여부를 검사합니다.
console.log("JavaScript".includes("Script"));대소문자를 구분합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
slice(start, end)는 start 이상 end 미만 범위를 잘라냅니다.
console.log("JavaScript".slice(0, 4));원본 문자열은 변경되지 않습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
toUpperCase(), toLowerCase()로 대소문자를 변환합니다.
console.log("Hello".toUpperCase());
console.log("WORLD".toLowerCase());검색어 정규화 같은 작업에 자주 사용합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
trim()은 문자열 양끝 공백을 제거합니다.
console.log(" hello ".trim());사용자 입력 정리 단계에서 유용합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
split()은 구분자를 기준으로 문자열을 배열로 나눕니다.
console.log("a,b,c".split(","));CSV와 같은 간단한 구분 문자열을 처리할 때 활용할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
replace()는 일치하는 부분을 다른 문자열로 바꿉니다.
console.log("I like Java".replace("Java", "JavaScript"));정규표현식과 함께 사용하면 더 복잡한 치환도 가능합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
배열은 여러 값을 순서대로 저장합니다.
let colors = ["red", "green", "blue"];
console.log(colors[1]);인덱스는 0부터 시작합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
push()는 배열 끝에 요소를 추가합니다.
let a = [1, 2];
a.push(3);
console.log(a);원본 배열을 변경하며 새 길이를 반환합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
pop()은 배열 끝 요소를 제거하고 반환합니다.
let a = [1, 2, 3];
console.log(a.pop());
console.log(a);스택의 pop 동작과 같은 방식입니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
unshift()는 배열 앞에 요소를 추가합니다.
let a = [2, 3];
a.unshift(1);
console.log(a);큰 배열에서는 뒤 요소들을 이동해야 하므로 빈번한 사용은 비용이 커질 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
shift()는 배열 첫 요소를 제거해 반환합니다.
let a = [1, 2, 3];
console.log(a.shift());큐처럼 보일 수 있지만 대규모 큐에는 전용 자료구조 설계를 고려할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
배열 slice()는 일부 요소를 새 배열로 복사합니다.
let a = [10,20,30,40];
console.log(a.slice(1,3));원본 배열은 변경되지 않습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
splice()는 원하는 위치에서 삭제·삽입을 수행합니다.
let a = [1,2,3,4];
a.splice(1,2,9);
console.log(a);원본 배열을 직접 변경하는 메서드입니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
indexOf()는 값의 첫 인덱스를 찾습니다.
console.log([10,20,30].indexOf(20));없으면 -1을 반환합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
배열 includes()는 특정 값 존재 여부를 boolean으로 반환합니다.
console.log([1,2,3].includes(2));존재 확인 목적에는 indexOf보다 의도가 분명합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
join()은 배열 요소를 문자열로 연결합니다.
console.log(["2026","09","02"].join("-"));split()과 반대 방향의 변환으로 생각할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
for...of는 iterable의 값을 순서대로 순회합니다.
for (const x of [10,20,30]) console.log(x);배열에서 인덱스가 필요 없을 때 간결합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
forEach()는 각 요소에 콜백을 실행합니다.
[1,2,3].forEach(x => console.log(x * 2));반환 배열을 만들지는 않으므로 변환 목적이라면 map()이 더 적합합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
map()은 각 요소를 변환한 새 배열을 만듭니다.
let b = [1,2,3].map(x => x * x);
console.log(b);원본 배열을 직접 바꾸지 않고 데이터 변환 파이프라인을 구성할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
filter()는 조건을 만족하는 요소만 모아 새 배열을 만듭니다.
let b = [1,2,3,4,5].filter(x => x % 2 === 0);
console.log(b);선택 조건을 콜백으로 표현합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
reduce()는 배열을 하나의 값으로 누적합니다.
let sum = [1,2,3,4].reduce((acc,x) => acc+x, 0);
console.log(sum);합계, 객체 그룹화, 빈도 계산 등 다양한 집계에 활용할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
find()는 조건을 처음 만족하는 요소를 반환합니다.
console.log([3,7,10,12].find(x => x > 8));없으면 undefined입니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
findIndex()는 조건을 처음 만족하는 인덱스를 반환합니다.
console.log([3,7,10].findIndex(x => x >= 7));없으면 -1입니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
some()은 하나라도 조건을 만족하는지 검사합니다.
console.log([1,3,5,8].some(x => x % 2 === 0));논리적 존재(∃) 검사로 이해할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
every()는 모든 요소가 조건을 만족하는지 검사합니다.
console.log([2,4,6].every(x => x % 2 === 0));논리적 전체(∀) 검사에 해당합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
기본 sort는 문자열 기준이므로 숫자 정렬에는 비교 함수를 전달해야 합니다.
let a=[10,2,30,4];
a.sort((x,y)=>x-y);
console.log(a);x-y가 음수면 x가 앞에 오도록 정렬됩니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
reverse()는 배열 순서를 뒤집습니다.
let a=[1,2,3];
console.log(a.reverse());원본 배열을 변경합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
flat(depth)은 중첩 배열을 지정 깊이만큼 평탄화합니다.
console.log([1,[2,[3]]].flat(2));데이터 전처리에서 중첩 구조를 단순화할 때 사용합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Array.from()은 iterable 또는 유사 배열을 실제 배열로 바꿉니다.
console.log(Array.from("ABC"));문자열, NodeList 등을 배열 메서드로 처리하려 할 때 유용합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
filter()와 map()을 연결하면 선택과 변환을 단계적으로 표현할 수 있습니다.
const data = [1, 2, 3, 4, 5];
const result = data
.filter(x => x % 2 === 1)
.map(x => x * 3);
console.log(result);메서드 체이닝은 각 단계의 목적이 분명할 때 읽기 좋습니다. 중간 결과가 복잡하면 별도 변수로 나누어 디버깅하세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
filter()와 map()을 연결하면 선택과 변환을 단계적으로 표현할 수 있습니다.
const data = [2, 3, 4, 5, 6];
const result = data
.filter(x => x % 2 === 0)
.map(x => x * 4);
console.log(result);메서드 체이닝은 각 단계의 목적이 분명할 때 읽기 좋습니다. 중간 결과가 복잡하면 별도 변수로 나누어 디버깅하세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
filter()와 map()을 연결하면 선택과 변환을 단계적으로 표현할 수 있습니다.
const data = [3, 4, 5, 6, 7];
const result = data
.filter(x => x % 2 === 1)
.map(x => x * 2);
console.log(result);메서드 체이닝은 각 단계의 목적이 분명할 때 읽기 좋습니다. 중간 결과가 복잡하면 별도 변수로 나누어 디버깅하세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
filter()와 map()을 연결하면 선택과 변환을 단계적으로 표현할 수 있습니다.
const data = [4, 5, 6, 7, 8];
const result = data
.filter(x => x % 2 === 0)
.map(x => x * 3);
console.log(result);메서드 체이닝은 각 단계의 목적이 분명할 때 읽기 좋습니다. 중간 결과가 복잡하면 별도 변수로 나누어 디버깅하세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
filter()와 map()을 연결하면 선택과 변환을 단계적으로 표현할 수 있습니다.
const data = [5, 6, 7, 8, 9];
const result = data
.filter(x => x % 2 === 1)
.map(x => x * 4);
console.log(result);메서드 체이닝은 각 단계의 목적이 분명할 때 읽기 좋습니다. 중간 결과가 복잡하면 별도 변수로 나누어 디버깅하세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
filter()와 map()을 연결하면 선택과 변환을 단계적으로 표현할 수 있습니다.
const data = [6, 7, 8, 9, 10];
const result = data
.filter(x => x % 2 === 0)
.map(x => x * 2);
console.log(result);메서드 체이닝은 각 단계의 목적이 분명할 때 읽기 좋습니다. 중간 결과가 복잡하면 별도 변수로 나누어 디버깅하세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
filter()와 map()을 연결하면 선택과 변환을 단계적으로 표현할 수 있습니다.
const data = [7, 8, 9, 10, 11];
const result = data
.filter(x => x % 2 === 1)
.map(x => x * 3);
console.log(result);메서드 체이닝은 각 단계의 목적이 분명할 때 읽기 좋습니다. 중간 결과가 복잡하면 별도 변수로 나누어 디버깅하세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
filter()와 map()을 연결하면 선택과 변환을 단계적으로 표현할 수 있습니다.
const data = [8, 9, 10, 11, 12];
const result = data
.filter(x => x % 2 === 0)
.map(x => x * 4);
console.log(result);메서드 체이닝은 각 단계의 목적이 분명할 때 읽기 좋습니다. 중간 결과가 복잡하면 별도 변수로 나누어 디버깅하세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
filter()와 map()을 연결하면 선택과 변환을 단계적으로 표현할 수 있습니다.
const data = [9, 10, 11, 12, 13];
const result = data
.filter(x => x % 2 === 1)
.map(x => x * 2);
console.log(result);메서드 체이닝은 각 단계의 목적이 분명할 때 읽기 좋습니다. 중간 결과가 복잡하면 별도 변수로 나누어 디버깅하세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
filter()와 map()을 연결하면 선택과 변환을 단계적으로 표현할 수 있습니다.
const data = [10, 11, 12, 13, 14];
const result = data
.filter(x => x % 2 === 0)
.map(x => x * 3);
console.log(result);메서드 체이닝은 각 단계의 목적이 분명할 때 읽기 좋습니다. 중간 결과가 복잡하면 별도 변수로 나누어 디버깅하세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
filter()와 map()을 연결하면 선택과 변환을 단계적으로 표현할 수 있습니다.
const data = [11, 12, 13, 14, 15];
const result = data
.filter(x => x % 2 === 1)
.map(x => x * 4);
console.log(result);메서드 체이닝은 각 단계의 목적이 분명할 때 읽기 좋습니다. 중간 결과가 복잡하면 별도 변수로 나누어 디버깅하세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
filter()와 map()을 연결하면 선택과 변환을 단계적으로 표현할 수 있습니다.
const data = [12, 13, 14, 15, 16];
const result = data
.filter(x => x % 2 === 0)
.map(x => x * 2);
console.log(result);메서드 체이닝은 각 단계의 목적이 분명할 때 읽기 좋습니다. 중간 결과가 복잡하면 별도 변수로 나누어 디버깅하세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
filter()와 map()을 연결하면 선택과 변환을 단계적으로 표현할 수 있습니다.
const data = [13, 14, 15, 16, 17];
const result = data
.filter(x => x % 2 === 1)
.map(x => x * 3);
console.log(result);메서드 체이닝은 각 단계의 목적이 분명할 때 읽기 좋습니다. 중간 결과가 복잡하면 별도 변수로 나누어 디버깅하세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
filter()와 map()을 연결하면 선택과 변환을 단계적으로 표현할 수 있습니다.
const data = [14, 15, 16, 17, 18];
const result = data
.filter(x => x % 2 === 0)
.map(x => x * 4);
console.log(result);메서드 체이닝은 각 단계의 목적이 분명할 때 읽기 좋습니다. 중간 결과가 복잡하면 별도 변수로 나누어 디버깅하세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
filter()와 map()을 연결하면 선택과 변환을 단계적으로 표현할 수 있습니다.
const data = [15, 16, 17, 18, 19];
const result = data
.filter(x => x % 2 === 1)
.map(x => x * 2);
console.log(result);메서드 체이닝은 각 단계의 목적이 분명할 때 읽기 좋습니다. 중간 결과가 복잡하면 별도 변수로 나누어 디버깅하세요.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
객체는 키와 값의 쌍으로 데이터를 묶습니다.
const user = {name:"민지", age:17};
console.log(user.name);관련된 여러 속성을 하나의 의미 있는 단위로 표현할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
특수문자가 있는 키나 동적 키는 대괄호로 접근합니다.
const user={"favorite-color":"blue"};
console.log(user["favorite-color"]);변수에 속성명이 들어 있을 때도 대괄호 표기법을 사용합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
const 객체도 내부 속성은 변경할 수 있습니다.
const user={name:"수현"};
user.age=18;
console.log(user);const는 변수 자체의 재대입을 막는 것이지 객체를 불변으로 만드는 것은 아닙니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
객체 속성의 값으로 함수를 저장하면 메서드라고 부릅니다.
const calc={
add(a,b){ return a+b; }
};
console.log(calc.add(2,3));데이터와 관련 동작을 같은 객체에 묶을 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
일반 메서드의 this는 호출 방식에 따라 결정됩니다.
const user={
name:"하린",
greet(){ console.log(this.name); }
};
user.greet();user.greet()처럼 호출하면 일반적으로 this는 user를 가리킵니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Object.keys()는 열거 가능한 자기 속성의 키 배열을 반환합니다.
const o={a:1,b:2};
console.log(Object.keys(o));객체 순회와 검증에 자주 사용합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Object.values()는 값 배열을 반환합니다.
const o={a:1,b:2};
console.log(Object.values(o));키가 필요 없고 값만 집계할 때 편리합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Object.entries()는 [키, 값] 쌍 배열을 만듭니다.
for (const [k,v] of Object.entries({a:1,b:2})) {
console.log(k,v);
}구조 분해와 for...of를 조합하면 객체를 깔끔하게 순회할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
객체 전개 문법으로 얕은 복사와 속성 덮어쓰기를 할 수 있습니다.
const a={x:1,y:2};
const b={...a,y:9};
console.log(b);중첩 객체까지 완전히 복제되는 것은 아닙니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Object.freeze()는 객체의 직접 속성 변경을 막습니다.
const config=Object.freeze({mode:"dark"});
console.log(config.mode);얕은 동결이므로 중첩 객체에는 별도 처리가 필요합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Set은 중복 없는 값의 집합입니다.
const s=new Set([1,1,2,3]);
console.log([...s]);배열 중복 제거에 간단히 활용할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
has()는 Set에 값이 존재하는지 빠르게 확인합니다.
const s=new Set(["A","B"]);
console.log(s.has("B"));집합의 membership 검사에 적합합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Map은 다양한 자료형을 키로 사용할 수 있는 키-값 자료구조입니다.
const m=new Map();
m.set("math",95);
console.log(m.get("math"));삽입 순서가 보존되며 크기는 size로 확인합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Map 자체가 iterable이므로 바로 for...of로 순회할 수 있습니다.
const m=new Map([["a",1],["b",2]]);
for(const [k,v] of m) console.log(k,v);키와 값을 구조 분해해 받으면 간결합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Math.round()는 가장 가까운 정수로 반올림합니다.
console.log(Math.round(3.6));floor, ceil, trunc와 차이를 구분해야 합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Math.floor()는 작거나 같은 정수 방향으로 내림합니다.
console.log(Math.floor(3.9));음수에서는 단순 소수점 삭제와 결과가 다를 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Math.max는 여러 숫자 중 최댓값을 구합니다.
console.log(Math.max(...[4,8,2,9]));배열은 전개 연산자로 펼쳐 전달할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Math.random()은 [0,1) 범위의 의사난수를 반환합니다.
console.log(Math.random());정수 범위로 바꾸려면 곱셈과 Math.floor를 조합합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
난수 범위를 정수 구간으로 변환하는 기본 패턴입니다.
const dice=Math.floor(Math.random()*6)+1;
console.log(dice);Math.random()*6은 0 이상 6 미만이고 floor 뒤 +1하면 1~6이 됩니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Date 객체는 날짜와 시각을 다룹니다.
const now=new Date();
console.log(now.getFullYear());표시 형식과 시간대 처리는 실제 서비스에서 특히 주의해야 합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
toISOString()은 UTC 기준 ISO 8601 문자열을 만듭니다.
const d=new Date("2026-09-02T12:00:00Z");
console.log(d.toISOString());데이터 교환과 저장에서 일관된 형식을 제공하는 데 유용합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
객체 안에 배열을 넣어 실제 데이터 구조에 가까운 형태를 다룹니다.
const student = {
id: 1001,
name: "학생1",
scores: [71, 76, 81]
};
const avg = student.scores.reduce((a,b)=>a+b,0) / student.scores.length;
console.log(student.name, avg.toFixed(1));객체로 학생의 속성을 묶고 배열 메서드 reduce()로 점수를 집계합니다. toFixed(1)은 소수 첫째 자리 문자열을 만듭니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
객체 안에 배열을 넣어 실제 데이터 구조에 가까운 형태를 다룹니다.
const student = {
id: 1002,
name: "학생2",
scores: [72, 77, 82]
};
const avg = student.scores.reduce((a,b)=>a+b,0) / student.scores.length;
console.log(student.name, avg.toFixed(1));객체로 학생의 속성을 묶고 배열 메서드 reduce()로 점수를 집계합니다. toFixed(1)은 소수 첫째 자리 문자열을 만듭니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
객체 안에 배열을 넣어 실제 데이터 구조에 가까운 형태를 다룹니다.
const student = {
id: 1003,
name: "학생3",
scores: [73, 78, 83]
};
const avg = student.scores.reduce((a,b)=>a+b,0) / student.scores.length;
console.log(student.name, avg.toFixed(1));객체로 학생의 속성을 묶고 배열 메서드 reduce()로 점수를 집계합니다. toFixed(1)은 소수 첫째 자리 문자열을 만듭니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
객체 안에 배열을 넣어 실제 데이터 구조에 가까운 형태를 다룹니다.
const student = {
id: 1004,
name: "학생4",
scores: [74, 79, 84]
};
const avg = student.scores.reduce((a,b)=>a+b,0) / student.scores.length;
console.log(student.name, avg.toFixed(1));객체로 학생의 속성을 묶고 배열 메서드 reduce()로 점수를 집계합니다. toFixed(1)은 소수 첫째 자리 문자열을 만듭니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
객체 안에 배열을 넣어 실제 데이터 구조에 가까운 형태를 다룹니다.
const student = {
id: 1005,
name: "학생5",
scores: [75, 80, 85]
};
const avg = student.scores.reduce((a,b)=>a+b,0) / student.scores.length;
console.log(student.name, avg.toFixed(1));객체로 학생의 속성을 묶고 배열 메서드 reduce()로 점수를 집계합니다. toFixed(1)은 소수 첫째 자리 문자열을 만듭니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
객체 안에 배열을 넣어 실제 데이터 구조에 가까운 형태를 다룹니다.
const student = {
id: 1006,
name: "학생6",
scores: [76, 81, 86]
};
const avg = student.scores.reduce((a,b)=>a+b,0) / student.scores.length;
console.log(student.name, avg.toFixed(1));객체로 학생의 속성을 묶고 배열 메서드 reduce()로 점수를 집계합니다. toFixed(1)은 소수 첫째 자리 문자열을 만듭니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
객체 안에 배열을 넣어 실제 데이터 구조에 가까운 형태를 다룹니다.
const student = {
id: 1007,
name: "학생7",
scores: [77, 82, 87]
};
const avg = student.scores.reduce((a,b)=>a+b,0) / student.scores.length;
console.log(student.name, avg.toFixed(1));객체로 학생의 속성을 묶고 배열 메서드 reduce()로 점수를 집계합니다. toFixed(1)은 소수 첫째 자리 문자열을 만듭니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
객체 안에 배열을 넣어 실제 데이터 구조에 가까운 형태를 다룹니다.
const student = {
id: 1008,
name: "학생8",
scores: [78, 83, 88]
};
const avg = student.scores.reduce((a,b)=>a+b,0) / student.scores.length;
console.log(student.name, avg.toFixed(1));객체로 학생의 속성을 묶고 배열 메서드 reduce()로 점수를 집계합니다. toFixed(1)은 소수 첫째 자리 문자열을 만듭니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
객체 안에 배열을 넣어 실제 데이터 구조에 가까운 형태를 다룹니다.
const student = {
id: 1009,
name: "학생9",
scores: [79, 84, 89]
};
const avg = student.scores.reduce((a,b)=>a+b,0) / student.scores.length;
console.log(student.name, avg.toFixed(1));객체로 학생의 속성을 묶고 배열 메서드 reduce()로 점수를 집계합니다. toFixed(1)은 소수 첫째 자리 문자열을 만듭니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
객체 안에 배열을 넣어 실제 데이터 구조에 가까운 형태를 다룹니다.
const student = {
id: 1010,
name: "학생10",
scores: [80, 85, 80]
};
const avg = student.scores.reduce((a,b)=>a+b,0) / student.scores.length;
console.log(student.name, avg.toFixed(1));객체로 학생의 속성을 묶고 배열 메서드 reduce()로 점수를 집계합니다. toFixed(1)은 소수 첫째 자리 문자열을 만듭니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
객체 안에 배열을 넣어 실제 데이터 구조에 가까운 형태를 다룹니다.
const student = {
id: 1011,
name: "학생11",
scores: [81, 86, 81]
};
const avg = student.scores.reduce((a,b)=>a+b,0) / student.scores.length;
console.log(student.name, avg.toFixed(1));객체로 학생의 속성을 묶고 배열 메서드 reduce()로 점수를 집계합니다. toFixed(1)은 소수 첫째 자리 문자열을 만듭니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
객체 안에 배열을 넣어 실제 데이터 구조에 가까운 형태를 다룹니다.
const student = {
id: 1012,
name: "학생12",
scores: [82, 87, 82]
};
const avg = student.scores.reduce((a,b)=>a+b,0) / student.scores.length;
console.log(student.name, avg.toFixed(1));객체로 학생의 속성을 묶고 배열 메서드 reduce()로 점수를 집계합니다. toFixed(1)은 소수 첫째 자리 문자열을 만듭니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
객체 안에 배열을 넣어 실제 데이터 구조에 가까운 형태를 다룹니다.
const student = {
id: 1013,
name: "학생13",
scores: [83, 88, 83]
};
const avg = student.scores.reduce((a,b)=>a+b,0) / student.scores.length;
console.log(student.name, avg.toFixed(1));객체로 학생의 속성을 묶고 배열 메서드 reduce()로 점수를 집계합니다. toFixed(1)은 소수 첫째 자리 문자열을 만듭니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
객체 안에 배열을 넣어 실제 데이터 구조에 가까운 형태를 다룹니다.
const student = {
id: 1014,
name: "학생14",
scores: [84, 89, 84]
};
const avg = student.scores.reduce((a,b)=>a+b,0) / student.scores.length;
console.log(student.name, avg.toFixed(1));객체로 학생의 속성을 묶고 배열 메서드 reduce()로 점수를 집계합니다. toFixed(1)은 소수 첫째 자리 문자열을 만듭니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
getElementById()는 특정 id를 가진 요소 하나를 찾습니다.
const title = document.getElementById("title");
console.log(title.textContent);DOM 조작은 먼저 요소를 선택하고 그 다음 속성·내용·스타일을 바꾸는 흐름으로 이해하면 쉽습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
querySelector()는 CSS 선택자로 첫 요소를 찾습니다.
const first = document.querySelector(".item");
console.log(first);id, class, 속성, 복합 선택자 등을 동일한 방식으로 사용할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
querySelectorAll()은 일치하는 모든 요소의 NodeList를 반환합니다.
const items=document.querySelectorAll(".item");
console.log(items.length);forEach()로 순회할 수 있으며 정적 목록이라는 점을 기억합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
textContent는 요소 안의 텍스트를 읽거나 바꿉니다.
document.querySelector("h1").textContent="새 제목";단순 텍스트를 넣을 때 innerHTML보다 안전하고 의도가 명확합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
innerHTML은 문자열을 HTML로 해석합니다.
document.querySelector("#box").innerHTML="<b>굵은 글자</b>";사용자 입력을 그대로 넣으면 XSS 위험이 있으므로 신뢰되지 않는 데이터에 주의합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
style 속성으로 인라인 CSS를 바꿀 수 있습니다.
const box=document.querySelector("#box");
box.style.fontSize="24px";여러 스타일 변경에는 classList로 클래스를 토글하는 방법이 더 유지보수에 유리할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
classList는 CSS 클래스 조작을 위한 편리한 API입니다.
document.body.classList.add("dark");add, remove, toggle, contains 등을 제공합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
toggle()은 클래스의 존재 상태를 반대로 바꿉니다.
document.querySelector("button").addEventListener("click",()=>{
document.body.classList.toggle("dark");
});다크 모드 같은 UI 상태 전환에 자주 사용합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
createElement()로 DOM 요소를 새로 만들 수 있습니다.
const p=document.createElement("p");
p.textContent="새 문단";
document.body.appendChild(p);생성 → 내용/속성 설정 → 부모에 삽입의 순서로 이해하면 됩니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
append()는 노드나 문자열을 요소 끝에 추가할 수 있습니다.
const ul=document.querySelector("ul");
const li=document.createElement("li");
li.textContent="항목";
ul.append(li);appendChild보다 유연한 최신 API입니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
remove()는 해당 요소를 DOM에서 제거합니다.
document.querySelector(".ad")?.remove();옵셔널 체이닝을 함께 쓰면 요소가 없을 때 오류를 피할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
getAttribute()는 HTML 속성값을 문자열로 읽습니다.
const img=document.querySelector("img");
console.log(img.getAttribute("src"));DOM 프로퍼티 접근과 미묘하게 다른 경우가 있어 목적에 따라 선택합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
setAttribute()는 요소의 HTML 속성을 설정합니다.
document.querySelector("a").setAttribute("target","_blank");동적 UI에서 aria-* 같은 접근성 속성을 관리할 때도 사용됩니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
dataset은 data-* 사용자 정의 속성에 접근합니다.
const el=document.querySelector("[data-id]");
console.log(el.dataset.id);DOM 요소와 관련된 작은 메타데이터를 저장하는 데 편리합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
addEventListener()로 이벤트 발생 시 실행할 함수를 등록합니다.
document.querySelector("button").addEventListener("click",()=>{
console.log("클릭!");
});HTML onclick 속성보다 로직을 분리하기 쉽습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
이벤트 핸들러는 이벤트 정보가 담긴 객체를 받을 수 있습니다.
document.addEventListener("click", e => {
console.log(e.target.tagName);
});target은 실제 이벤트가 시작된 요소를 가리킵니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
input 이벤트는 입력값이 바뀔 때마다 발생합니다.
document.querySelector("input").addEventListener("input", e => {
console.log(e.target.value);
});실시간 검색·글자 수 표시 등에 활용할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
change는 값 변경이 확정될 때 자주 사용됩니다.
document.querySelector("select").addEventListener("change", e => {
console.log(e.target.value);
});select, checkbox 등 폼 컨트롤 처리에 유용합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
submit 이벤트에서 preventDefault()로 기본 제출 동작을 막을 수 있습니다.
document.querySelector("form").addEventListener("submit", e => {
e.preventDefault();
console.log("제출 처리");
});그 뒤 검증이나 fetch 요청 같은 사용자 정의 로직을 수행합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
keydown은 키가 눌릴 때 발생합니다.
document.addEventListener("keydown", e => {
if(e.key === "Escape") console.log("닫기");
});e.key를 사용하면 의미 있는 키 이름으로 분기할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
이벤트 버블링을 이용해 부모 하나에서 자식 이벤트를 처리할 수 있습니다.
document.querySelector("ul").addEventListener("click", e => {
if(e.target.matches("li")) console.log(e.target.textContent);
});동적으로 추가되는 많은 항목을 효율적으로 다루는 핵심 패턴입니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
DOM 선택, 이벤트 등록, data 속성, 텍스트 갱신을 한 번에 연습합니다.
const button = document.querySelector("#btn1");
const output = document.querySelector("#out1");
button?.addEventListener("click", () => {
const value = Number(output?.dataset.count ?? 0) + 1;
if (output) {
output.dataset.count = value;
output.textContent = `클릭 횟수: ${value}`;
}
});요소가 존재하는지 ?.와 if로 방어하고, dataset 문자열을 Number()로 바꾼 뒤 다시 화면과 상태에 반영합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
DOM 선택, 이벤트 등록, data 속성, 텍스트 갱신을 한 번에 연습합니다.
const button = document.querySelector("#btn2");
const output = document.querySelector("#out2");
button?.addEventListener("click", () => {
const value = Number(output?.dataset.count ?? 0) + 1;
if (output) {
output.dataset.count = value;
output.textContent = `클릭 횟수: ${value}`;
}
});요소가 존재하는지 ?.와 if로 방어하고, dataset 문자열을 Number()로 바꾼 뒤 다시 화면과 상태에 반영합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
DOM 선택, 이벤트 등록, data 속성, 텍스트 갱신을 한 번에 연습합니다.
const button = document.querySelector("#btn3");
const output = document.querySelector("#out3");
button?.addEventListener("click", () => {
const value = Number(output?.dataset.count ?? 0) + 1;
if (output) {
output.dataset.count = value;
output.textContent = `클릭 횟수: ${value}`;
}
});요소가 존재하는지 ?.와 if로 방어하고, dataset 문자열을 Number()로 바꾼 뒤 다시 화면과 상태에 반영합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
DOM 선택, 이벤트 등록, data 속성, 텍스트 갱신을 한 번에 연습합니다.
const button = document.querySelector("#btn4");
const output = document.querySelector("#out4");
button?.addEventListener("click", () => {
const value = Number(output?.dataset.count ?? 0) + 1;
if (output) {
output.dataset.count = value;
output.textContent = `클릭 횟수: ${value}`;
}
});요소가 존재하는지 ?.와 if로 방어하고, dataset 문자열을 Number()로 바꾼 뒤 다시 화면과 상태에 반영합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
DOM 선택, 이벤트 등록, data 속성, 텍스트 갱신을 한 번에 연습합니다.
const button = document.querySelector("#btn5");
const output = document.querySelector("#out5");
button?.addEventListener("click", () => {
const value = Number(output?.dataset.count ?? 0) + 1;
if (output) {
output.dataset.count = value;
output.textContent = `클릭 횟수: ${value}`;
}
});요소가 존재하는지 ?.와 if로 방어하고, dataset 문자열을 Number()로 바꾼 뒤 다시 화면과 상태에 반영합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
DOM 선택, 이벤트 등록, data 속성, 텍스트 갱신을 한 번에 연습합니다.
const button = document.querySelector("#btn6");
const output = document.querySelector("#out6");
button?.addEventListener("click", () => {
const value = Number(output?.dataset.count ?? 0) + 1;
if (output) {
output.dataset.count = value;
output.textContent = `클릭 횟수: ${value}`;
}
});요소가 존재하는지 ?.와 if로 방어하고, dataset 문자열을 Number()로 바꾼 뒤 다시 화면과 상태에 반영합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
DOM 선택, 이벤트 등록, data 속성, 텍스트 갱신을 한 번에 연습합니다.
const button = document.querySelector("#btn7");
const output = document.querySelector("#out7");
button?.addEventListener("click", () => {
const value = Number(output?.dataset.count ?? 0) + 1;
if (output) {
output.dataset.count = value;
output.textContent = `클릭 횟수: ${value}`;
}
});요소가 존재하는지 ?.와 if로 방어하고, dataset 문자열을 Number()로 바꾼 뒤 다시 화면과 상태에 반영합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
DOM 선택, 이벤트 등록, data 속성, 텍스트 갱신을 한 번에 연습합니다.
const button = document.querySelector("#btn8");
const output = document.querySelector("#out8");
button?.addEventListener("click", () => {
const value = Number(output?.dataset.count ?? 0) + 1;
if (output) {
output.dataset.count = value;
output.textContent = `클릭 횟수: ${value}`;
}
});요소가 존재하는지 ?.와 if로 방어하고, dataset 문자열을 Number()로 바꾼 뒤 다시 화면과 상태에 반영합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
DOM 선택, 이벤트 등록, data 속성, 텍스트 갱신을 한 번에 연습합니다.
const button = document.querySelector("#btn9");
const output = document.querySelector("#out9");
button?.addEventListener("click", () => {
const value = Number(output?.dataset.count ?? 0) + 1;
if (output) {
output.dataset.count = value;
output.textContent = `클릭 횟수: ${value}`;
}
});요소가 존재하는지 ?.와 if로 방어하고, dataset 문자열을 Number()로 바꾼 뒤 다시 화면과 상태에 반영합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
DOM 선택, 이벤트 등록, data 속성, 텍스트 갱신을 한 번에 연습합니다.
const button = document.querySelector("#btn10");
const output = document.querySelector("#out10");
button?.addEventListener("click", () => {
const value = Number(output?.dataset.count ?? 0) + 1;
if (output) {
output.dataset.count = value;
output.textContent = `클릭 횟수: ${value}`;
}
});요소가 존재하는지 ?.와 if로 방어하고, dataset 문자열을 Number()로 바꾼 뒤 다시 화면과 상태에 반영합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
DOM 선택, 이벤트 등록, data 속성, 텍스트 갱신을 한 번에 연습합니다.
const button = document.querySelector("#btn11");
const output = document.querySelector("#out11");
button?.addEventListener("click", () => {
const value = Number(output?.dataset.count ?? 0) + 1;
if (output) {
output.dataset.count = value;
output.textContent = `클릭 횟수: ${value}`;
}
});요소가 존재하는지 ?.와 if로 방어하고, dataset 문자열을 Number()로 바꾼 뒤 다시 화면과 상태에 반영합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
DOM 선택, 이벤트 등록, data 속성, 텍스트 갱신을 한 번에 연습합니다.
const button = document.querySelector("#btn12");
const output = document.querySelector("#out12");
button?.addEventListener("click", () => {
const value = Number(output?.dataset.count ?? 0) + 1;
if (output) {
output.dataset.count = value;
output.textContent = `클릭 횟수: ${value}`;
}
});요소가 존재하는지 ?.와 if로 방어하고, dataset 문자열을 Number()로 바꾼 뒤 다시 화면과 상태에 반영합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
DOM 선택, 이벤트 등록, data 속성, 텍스트 갱신을 한 번에 연습합니다.
const button = document.querySelector("#btn13");
const output = document.querySelector("#out13");
button?.addEventListener("click", () => {
const value = Number(output?.dataset.count ?? 0) + 1;
if (output) {
output.dataset.count = value;
output.textContent = `클릭 횟수: ${value}`;
}
});요소가 존재하는지 ?.와 if로 방어하고, dataset 문자열을 Number()로 바꾼 뒤 다시 화면과 상태에 반영합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
DOM 선택, 이벤트 등록, data 속성, 텍스트 갱신을 한 번에 연습합니다.
const button = document.querySelector("#btn14");
const output = document.querySelector("#out14");
button?.addEventListener("click", () => {
const value = Number(output?.dataset.count ?? 0) + 1;
if (output) {
output.dataset.count = value;
output.textContent = `클릭 횟수: ${value}`;
}
});요소가 존재하는지 ?.와 if로 방어하고, dataset 문자열을 Number()로 바꾼 뒤 다시 화면과 상태에 반영합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
try 블록의 예외를 catch에서 처리할 수 있습니다.
try {
JSON.parse("잘못된 JSON");
} catch (err) {
console.log("오류 처리");
}예상 가능한 실패를 사용자에게 친절하게 처리하되 모든 오류를 무조건 숨기지는 않아야 합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
throw로 직접 예외를 발생시킬 수 있습니다.
function divide(a,b){
if(b===0) throw new Error("0으로 나눌 수 없습니다.");
return a/b;
}함수가 처리할 수 없는 잘못된 입력을 호출자에게 명확히 알릴 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
finally는 예외 여부와 관계없이 마지막에 실행됩니다.
try {
console.log("작업");
} finally {
console.log("정리");
}리소스 정리나 공통 마무리 작업에 적합합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
객체를 JSON 문자열로 직렬화합니다.
const user={name:"민수",age:17};
console.log(JSON.stringify(user));네트워크 전송이나 문자열 저장 전에 구조화 데이터를 변환할 때 사용합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
JSON.parse()는 JSON 문자열을 JavaScript 값으로 바꿉니다.
const text='{"x":10,"y":20}';
const obj=JSON.parse(text);
console.log(obj.x+obj.y);잘못된 JSON이면 예외가 발생하므로 외부 데이터에는 오류 처리를 고려합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
localStorage는 브라우저에 문자열 데이터를 지속 저장합니다.
localStorage.setItem("theme","dark");
console.log(localStorage.getItem("theme"));객체를 저장하려면 JSON.stringify/parse를 함께 사용합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
removeItem()은 특정 키를 삭제합니다.
localStorage.removeItem("theme");clear()는 모든 항목을 지우므로 범위를 주의합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
setTimeout은 지정 시간 이후 콜백 실행을 예약합니다.
setTimeout(()=>console.log("1초 뒤"),1000);정확히 그 시각에 실행된다는 뜻은 아니며 이벤트 루프 상황에 따라 더 늦어질 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
setInterval은 일정 간격으로 반복 실행을 예약합니다.
let count=0;
const id=setInterval(()=>{
console.log(++count);
if(count===3) clearInterval(id);
},1000);clearInterval로 필요 시 반드시 종료할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Promise는 미래의 성공 값 또는 실패 이유를 나타냅니다.
const p=new Promise(resolve=>{
resolve(42);
});
p.then(v=>console.log(v));비동기 작업의 상태를 pending/fulfilled/rejected로 모델링합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Promise 실패는 catch()로 처리할 수 있습니다.
Promise.reject(new Error("실패"))
.catch(err=>console.log(err.message));실패를 처리하지 않으면 미처리 rejection 경고가 발생할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
then()은 값을 다음 단계로 전달하며 연쇄 처리할 수 있습니다.
Promise.resolve(2)
.then(x=>x*3)
.then(x=>x+1)
.then(console.log);각 단계가 새 Promise를 반환하므로 비동기 파이프라인을 구성할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
async 함수는 항상 Promise를 반환합니다.
async function answer(){
return 42;
}
answer().then(console.log);일반 값을 return해도 fulfilled Promise로 감싸집니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
await는 Promise가 처리될 때까지 async 함수 내부 흐름을 일시 중단합니다.
async function run(){
const value=await Promise.resolve(10);
console.log(value);
}
run();콜백 중첩보다 동기 코드처럼 읽히는 비동기 로직을 작성할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
await로 기다린 Promise의 reject는 try-catch로 처리할 수 있습니다.
async function run(){
try {
await Promise.reject(new Error("네트워크 오류"));
} catch(e){
console.log(e.message);
}
}
run();비동기 함수에서도 일반 예외 처리 구조와 비슷하게 읽을 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
fetch()는 HTTP 요청을 보내고 Response Promise를 반환합니다.
async function load(){
const res=await fetch("https://example.com/data.json");
if(!res.ok) throw new Error(`HTTP ${res.status}`);
const data=await res.json();
console.log(data);
}HTTP 404/500은 자동 reject가 아니므로 res.ok를 직접 검사하는 습관이 중요합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
fetch 옵션으로 메서드·헤더·본문을 지정합니다.
async function save(data){
const res=await fetch("/api/items",{
method:"POST",
headers:{"Content-Type":"application/json"},
body:JSON.stringify(data)
});
return res.json();
}JSON API로 데이터를 전송하는 대표 패턴입니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Promise.all은 여러 비동기 작업을 함께 기다립니다.
const results=await Promise.all([
Promise.resolve(1),
Promise.resolve(2),
Promise.resolve(3)
]);
console.log(results);하나라도 reject되면 전체가 reject되며 서로 독립적인 병렬 작업에 적합합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
allSettled는 성공과 실패를 모두 모아 결과를 돌려줍니다.
const r=await Promise.allSettled([
Promise.resolve("성공"),
Promise.reject("실패")
]);
console.log(r.map(x=>x.status));일부 실패가 있어도 전체 작업 결과를 보고 싶을 때 사용합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
AbortController는 fetch 같은 취소 가능한 작업에 취소 신호를 전달합니다.
const controller=new AbortController();
fetch("/slow", {signal: controller.signal});
controller.abort();검색어가 빠르게 바뀌는 UI에서 이전 요청을 취소하는 데 유용합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Promise를 반환하는 wait() 함수와 async/await를 조합해 비동기 순서를 제어합니다.
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
async function task1() {
console.log("시작");
await wait(50);
console.log("완료");
}
task1();await는 전체 프로그램을 멈추는 것이 아니라 해당 async 함수의 나머지 실행을 나중으로 미룹니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Promise를 반환하는 wait() 함수와 async/await를 조합해 비동기 순서를 제어합니다.
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
async function task2() {
console.log("시작");
await wait(100);
console.log("완료");
}
task2();await는 전체 프로그램을 멈추는 것이 아니라 해당 async 함수의 나머지 실행을 나중으로 미룹니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Promise를 반환하는 wait() 함수와 async/await를 조합해 비동기 순서를 제어합니다.
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
async function task3() {
console.log("시작");
await wait(150);
console.log("완료");
}
task3();await는 전체 프로그램을 멈추는 것이 아니라 해당 async 함수의 나머지 실행을 나중으로 미룹니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Promise를 반환하는 wait() 함수와 async/await를 조합해 비동기 순서를 제어합니다.
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
async function task4() {
console.log("시작");
await wait(200);
console.log("완료");
}
task4();await는 전체 프로그램을 멈추는 것이 아니라 해당 async 함수의 나머지 실행을 나중으로 미룹니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Promise를 반환하는 wait() 함수와 async/await를 조합해 비동기 순서를 제어합니다.
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
async function task5() {
console.log("시작");
await wait(250);
console.log("완료");
}
task5();await는 전체 프로그램을 멈추는 것이 아니라 해당 async 함수의 나머지 실행을 나중으로 미룹니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Promise를 반환하는 wait() 함수와 async/await를 조합해 비동기 순서를 제어합니다.
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
async function task6() {
console.log("시작");
await wait(300);
console.log("완료");
}
task6();await는 전체 프로그램을 멈추는 것이 아니라 해당 async 함수의 나머지 실행을 나중으로 미룹니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Promise를 반환하는 wait() 함수와 async/await를 조합해 비동기 순서를 제어합니다.
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
async function task7() {
console.log("시작");
await wait(350);
console.log("완료");
}
task7();await는 전체 프로그램을 멈추는 것이 아니라 해당 async 함수의 나머지 실행을 나중으로 미룹니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Promise를 반환하는 wait() 함수와 async/await를 조합해 비동기 순서를 제어합니다.
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
async function task8() {
console.log("시작");
await wait(400);
console.log("완료");
}
task8();await는 전체 프로그램을 멈추는 것이 아니라 해당 async 함수의 나머지 실행을 나중으로 미룹니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Promise를 반환하는 wait() 함수와 async/await를 조합해 비동기 순서를 제어합니다.
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
async function task9() {
console.log("시작");
await wait(450);
console.log("완료");
}
task9();await는 전체 프로그램을 멈추는 것이 아니라 해당 async 함수의 나머지 실행을 나중으로 미룹니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Promise를 반환하는 wait() 함수와 async/await를 조합해 비동기 순서를 제어합니다.
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
async function task10() {
console.log("시작");
await wait(500);
console.log("완료");
}
task10();await는 전체 프로그램을 멈추는 것이 아니라 해당 async 함수의 나머지 실행을 나중으로 미룹니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
class는 객체 생성 패턴을 읽기 좋은 문법으로 표현합니다.
class Person {
constructor(name){ this.name=name; }
greet(){ return `안녕, ${this.name}`; }
}
const p=new Person("민지");
console.log(p.greet());constructor는 new로 인스턴스를 만들 때 초기화에 사용됩니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
extends로 부모 클래스의 기능을 상속받을 수 있습니다.
class Animal { speak(){ return "소리"; } }
class Dog extends Animal { speak(){ return "멍멍"; } }
console.log(new Dog().speak());자식 클래스는 같은 이름 메서드를 재정의하여 다형성을 표현할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
자식 생성자에서 super()로 부모 생성자를 호출합니다.
class A { constructor(x){this.x=x;} }
class B extends A {
constructor(x,y){ super(x); this.y=y; }
}
console.log(new B(1,2));파생 클래스에서 this를 사용하기 전에 super()를 호출해야 합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
getter는 메서드 계산을 속성처럼 읽게 해 줍니다.
class Circle {
constructor(r){this.r=r;}
get area(){return Math.PI*this.r**2;}
}
console.log(new Circle(2).area);계산된 값이나 내부 표현을 숨기는 인터페이스에 활용합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
static 메서드는 인스턴스가 아니라 클래스 자체에 속합니다.
class MathUtil {
static double(x){ return x*2; }
}
console.log(MathUtil.double(5));개별 객체 상태가 필요 없는 도우미 동작에 적합합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
#으로 시작하는 필드는 클래스 외부에서 직접 접근할 수 없습니다.
class Counter {
#count=0;
inc(){ return ++this.#count; }
}
console.log(new Counter().inc());실제 언어 수준의 캡슐화를 제공합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Symbol.iterator를 구현하면 객체를 iterable로 만들 수 있습니다.
const range={
*[Symbol.iterator](){
yield 1; yield 2; yield 3;
}
};
console.log([...range]);for...of, 전개 문법 등과 연결됩니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
function*과 yield는 실행을 중간에 멈췄다가 이어갈 수 있는 제너레이터를 만듭니다.
function* gen(){
yield "A";
yield "B";
}
console.log([...gen()]);지연 시퀀스나 사용자 정의 반복자를 구현할 때 유용합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
정규표현식은 문자열 패턴을 표현합니다.
const re=/^[0-9]+$/;
console.log(re.test("12345"));test()는 패턴 일치 여부를 boolean으로 반환합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
g 플래그는 모든 일치 항목을 대상으로 합니다.
console.log("a1b2c3".replace(/\d/g,"#"));정규표현식 치환은 데이터 정제에 강력하지만 복잡해지면 가독성에 주의합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
export는 다른 모듈이 사용할 값을 공개합니다.
// math.js
export function add(a,b){ return a+b; }모듈은 파일 단위 의존성을 명확히 하고 전역 오염을 줄입니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
import는 다른 모듈이 export한 값을 가져옵니다.
// app.js
import { add } from "./math.js";
console.log(add(2,3));브라우저에서는 <script type="module">로 모듈을 사용할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
default export는 모듈당 하나를 둘 수 있습니다.
// user.js
export default class User {}
// app.js
import User from "./user.js";가져올 때 중괄호 없이 원하는 지역 이름으로 받을 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
import()는 Promise를 반환하며 런타임에 모듈을 불러옵니다.
const module = await import("./feature.js");
module.run();코드 분할이나 조건부 기능 로딩에 활용할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Proxy는 객체 기본 동작을 가로채 사용자 정의할 수 있습니다.
const target={x:1};
const p=new Proxy(target,{
get(obj,key){ return key in obj ? obj[key] : 0; }
});
console.log(p.y);검증, 관찰, 가상 속성 등에 쓰이지만 남용하면 추적이 어려워질 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
WeakMap의 키는 객체이며 키 객체를 강하게 유지하지 않습니다.
const wm=new WeakMap();
const obj={};
wm.set(obj,"private");
console.log(wm.get(obj));객체에 연결된 부가 메타데이터 저장 등에 활용됩니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
structuredClone()은 지원되는 값들을 깊게 복제합니다.
const a={x:{y:1}};
const b=structuredClone(a);
b.x.y=9;
console.log(a.x.y);JSON 직렬화 복사보다 더 많은 내장 자료형을 다룰 수 있지만 함수 등 복제 불가 값도 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
Intl은 국제화된 숫자·날짜 형식을 제공합니다.
const f=new Intl.NumberFormat("ko-KR");
console.log(f.format(1234567));지역별 표시 규칙을 직접 문자열 조작으로 구현하는 것보다 안전합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
DateTimeFormat은 지역 규칙에 맞게 날짜를 포맷합니다.
const f=new Intl.DateTimeFormat("ko-KR",{dateStyle:"full"});
console.log(f.format(new Date("2026-09-02")));시간대 옵션까지 명시하면 국제 서비스의 날짜 표시 오류를 줄일 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
메모이제이션은 같은 입력의 계산 결과를 캐시에 저장해 재사용합니다.
function memoize(fn){
const cache=new Map();
return x => {
if(cache.has(x)) return cache.get(x);
const v=fn(x); cache.set(x,v); return v;
};
}
const square=memoize(x=>x*x);
console.log(square(8));비싼 순수 함수 계산에서 효과적이며 캐시 크기와 입력 키 전략을 고려해야 합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
디바운스는 짧은 시간에 연속 호출되는 함수의 실행 횟수를 줄입니다.
function debounce(fn, delay){
let timer;
return (...args)=>{
clearTimeout(timer);
timer=setTimeout(()=>fn(...args),delay);
};
}
const search=debounce(q=>console.log(q),300);검색창 자동완성, resize 이벤트처럼 빈번한 이벤트 처리에 유용합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
스로틀은 반복 호출을 일정 빈도로 제한합니다.
function throttle(fn, interval){
let ready=true;
return (...args)=>{
if(!ready) return;
ready=false;
fn(...args);
setTimeout(()=>ready=true, interval);
};
}스크롤 위치 추적처럼 지속적으로 발생하는 이벤트 부하를 줄일 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
배열을 감싸 스택 ADT를 구현할 수 있습니다.
class Stack {
#data=[];
push(x){this.#data.push(x);}
pop(){return this.#data.pop();}
get size(){return this.#data.length;}
}
const s=new Stack(); s.push(10); s.push(20);
console.log(s.pop(), s.size);내부 저장소를 private field로 숨겨 사용자가 허용된 연산만 사용하도록 인터페이스를 설계합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
shift() 대신 head 인덱스를 이동하는 간단한 큐 전략입니다.
class Queue {
#data=[]; #head=0;
enqueue(x){this.#data.push(x);}
dequeue(){return this.#data[this.#head++];}
}
const q=new Queue(); q.enqueue("A"); q.enqueue("B");
console.log(q.dequeue());큰 배열에서 매번 앞 요소를 실제 삭제하는 비용을 피할 수 있으며 장기 사용 시 압축 전략도 고려할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
스택으로 여는 괄호와 닫는 괄호의 순서를 검사합니다.
function validBrackets(text){
const stack=[];
const pair={")":"(", "]":"[", "}":"{"};
for(const ch of text){
if("([{ ".includes(ch) && ch!==" ") stack.push(ch);
else if(ch in pair && stack.pop()!==pair[ch]) return false;
}
return stack.length===0;
}
console.log(validBrackets("{[()]}") );닫는 괄호를 만날 때 가장 최근 여는 괄호와 짝이 맞아야 하므로 LIFO 구조가 자연스럽게 대응됩니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
BFS는 큐를 사용해 가까운 정점부터 탐색합니다.
function bfs(graph,start){
const q=[start], seen=new Set([start]);
while(q.length){
const v=q.shift(); console.log(v);
for(const next of graph[v] ?? []){
if(!seen.has(next)){seen.add(next); q.push(next);}
}
}
}
bfs({A:["B","C"],B:["D"],C:[],D:[]},"A");방문 집합을 사용해야 사이클이 있는 그래프에서 무한 반복을 피할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
DFS는 한 경로를 깊게 따라간 뒤 되돌아옵니다.
function dfs(graph,v,seen=new Set()){
if(seen.has(v)) return;
seen.add(v); console.log(v);
for(const next of graph[v] ?? []) dfs(graph,next,seen);
}
dfs({A:["B","C"],B:["D"],C:[],D:[]},"A");재귀 호출 스택이 탐색 경로를 자연스럽게 보존합니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
배열과 객체 전개를 사용해 기존 데이터를 직접 수정하지 않는 상태 갱신을 연습합니다.
let todos=[];
function addTodo(text){
todos=[...todos,{id:Date.now(),text,done:false}];
}
function toggleTodo(id){
todos=todos.map(t=>t.id===id?{...t,done:!t.done}:t);
}이 방식은 변경 이력을 추적하거나 UI 프레임워크에서 상태 변화를 감지하기 쉽습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
동일한 비동기 요청을 캐시하면 중복 네트워크 호출을 줄일 수 있습니다.
const cache=new Map();
async function getJSON(url){
if(cache.has(url)) return cache.get(url);
const promise=fetch(url).then(r=>{
if(!r.ok) throw new Error(`HTTP ${r.status}`);
return r.json();
});
cache.set(url,promise);
return promise;
}Promise 자체를 캐시하면 동시에 들어온 같은 요청도 하나의 진행 중 작업을 공유할 수 있습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.
상태, 이벤트, 배열 처리, DOM 렌더링을 결합한 작은 애플리케이션 구조입니다.
const state={items:[], query:""};
const input=document.querySelector("#search");
const list=document.querySelector("#list");
function render(){
const q=state.query.toLowerCase();
const filtered=state.items.filter(x=>x.name.toLowerCase().includes(q));
list.replaceChildren(...filtered.map(x=>{
const li=document.createElement("li");
li.textContent=x.name;
return li;
}));
}
input.addEventListener("input",e=>{
state.query=e.target.value;
render();
});데이터(state)를 바꾸고 render()가 화면을 다시 그리도록 역할을 분리하면 규모가 커져도 흐름을 추적하기 쉽습니다.
① 입력·초기값 확인 → ② 핵심 연산 또는 메서드 확인 → ③ 반환값·변경된 상태 확인 → ④ 출력 결과와 연결해 해석합니다.