자바스크립트 공부 순서 — 가장 많이 막히는 8가지 지점부터 잡기

자바스크립트, 어디서부터 시작해야 할까

HTML과 CSS는 어느 정도 다뤄봤는데 자바스크립트 앞에서 막막해지는 경우가 많습니다. 서점에 가면 “자바스크립트 입문서”, “모던 자바스크립트 입문”, “제로초의 자바스크립트 입문” 같은 책이 줄줄이 꽂혀 있고, 인터넷 강의도 수십 개가 넘습니다. 문제는 대부분의 자료가 “무엇을 배워야 하는지” 순서만 나열할 뿐, “왜 여기서 막히는지”는 잘 설명하지 않는다는 점입니다.

이 글은 커리큘럼 나열이 아니라, 실제로 입문자들이 어느 지점에서 멈추고 왜 그런지를 먼저 짚은 다음, 그걸 뚫고 지나갈 학습 순서를 제시합니다.

JavaScript는 ECMAScript(ECMA-262)라는 표준을 기반으로 만들어진 언어이며, 이 표준은 Ecma International이 제정하고 유지합니다. 브라우저뿐 아니라 Node.js 같은 비브라우저 환경에서도 동작하며, 프로토타입 기반 객체지향과 동적 타이핑이라는 특징을 갖고 있습니다.

왜 대부분의 입문 로드맵은 절반만 도움이 될까

MDN 같은 공식 문서나 대부분의 입문 강의는 변수·타입 → 조건문·반복문 → 함수 → 객체/배열 → DOM 조작 → 이벤트 → 비동기 순서로 학습을 권장합니다. 이 순서 자체는 틀리지 않습니다.

다만 실제 학습자 커뮤니티(인프런 질문 게시판, 국내 개발 커뮤니티 등)를 보면, 이 순서를 그대로 따라가도 특정 구간에서 반복적으로 막히는 패턴이 있습니다. 아래 8가지가 그 지점입니다.

자바스크립트 입문자가 실제로 막히는 8가지 지점

1. 언어 문법과 웹 API를 구분하지 못함

HTML, CSS, jQuery는 다뤄봤지만 자바스크립트 기초를 어디서부터 잡아야 할지 모르겠다는 질문이 국내 커뮤니티에 자주 올라옵니다. 이때 가장 흔한 혼란은 변수·타입·연산자 같은 “언어 자체”와 document.querySelector 같은 “웹 API(브라우저가 제공하는 기능)”를 같은 것으로 착각하는 것입니다.

• 언어 core: 변수, 함수, 조건문, 반복문, 객체, 배열 — ECMAScript 표준이 정의
• 웹 API: DOM 조작, 이벤트, fetch — 브라우저가 별도로 제공

이 둘을 구분하고 시작하면 “이건 자바스크립트 문법인가, 브라우저 기능인가”라는 혼란이 크게 줄어듭니다.

2. var / let / const와 스코프·호이스팅

인프런 같은 강의 Q&A 게시판에서 반복적으로 나오는 질문 유형이 “함수 밖에서는 값이 다르게 찍힌다”, “분명히 선언했는데 undefined가 나온다”입니다. 대부분 블록 스코프와 호이스팅 개념이 정리되지 않아 생기는 문제입니다.

• var는 함수 스코프, let/const는 블록 스코프
• 호이스팅은 선언이 끌어올려지는 것이지 초기화까지 끌어올려지는 게 아님

콘솔에 직접 값을 찍어보면서 “왜 이 시점엔 undefined가 나오는지”를 눈으로 확인하는 방식이 텍스트로만 읽는 것보다 훨씬 효과적입니다.

3. this가 가리키는 대상이 계속 바뀌는 문제

“this가 뭘 가리키는지 모르겠다”, “화살표 함수에서는 this가 다르게 동작한다”는 질문은 JS 커뮤니티에서 꾸준히 나오는 단골 주제입니다. 규칙을 암기하기보다 “이 함수가 누구에 의해 어떻게 호출됐는가”라는 실행 컨텍스트 관점으로 접근하는 것이 핵심입니다.

호출 방식	this가 가리키는 대상
일반 함수 호출	전역 객체(또는 undefined, strict mode)
메서드 호출 (obj.method())	obj
화살표 함수	자신을 둘러싼 스코프의 this를 그대로 사용
이벤트 핸들러	이벤트가 바인딩된 요소 (화살표 함수 제외)

4. 비동기 처리(콜백, Promise, async/await)

“then과 await를 섞어 쓰다가 코드가 꼬인다”, “console.log 순서가 예상과 다르게 찍힌다”는 막힘이 비동기 파트에서 특히 많이 보고됩니다. 자바스크립트는 싱글 스레드로 동작하지만 비동기 작업은 나중에 실행된다는 점을 눈으로 확인하지 않으면 계속 헷갈리게 됩니다.

• 콜백 → Promise → async/await 순서로 “같은 문제를 다른 방식으로 푸는 과정”을 직접 비교
• fetch 예제를 다룰 때는 성공 케이스만이 아니라 에러 처리와 로딩 상태까지 함께 연습

5. DOM 조작과 순수 로직이 뒤섞임

버튼 클릭 이벤트 같은 예제를 따라 하다 보면 querySelector, 이벤트 리스너, 실제 계산 로직이 한 함수 안에 뒤엉켜 있는 경우가 많습니다. 입문 강의 후기에서도 “DOM 조작과 순수 문법이 섞여서 헷갈렸다”는 피드백이 자주 나옵니다.

• 화면 요소를 선택/연결하는 코드
• 실제 계산이나 판단을 하는 로직

이 둘을 함수 단위로라도 분리해보는 습관을 들이면, 나중에 프레임워크를 배울 때도 훨씬 수월합니다.

6. 어디서 실행해야 하는지 모르겠음

“자바스크립트를 어디서 실행하나요?”는 국내 질문 게시판이나 입문 강의 영상 댓글에서 꾸준히 등장하는 질문입니다. 최소 환경은 최신 브라우저(Chrome, Firefox, Edge, Safari 등)와 개발자 도구(콘솔)만 있으면 충분합니다.

• 브라우저 콘솔에서 바로 코드 실행 (가장 빠른 시작)
• HTML 파일에 <script> 태그로 연결
• Node.js 설치 후 터미널에서 .js 파일 실행

세 단계를 하나의 흐름으로 순서대로 경험해보는 것이 실용적입니다.

7. 연습 문제·프로젝트 난이도 선택

강의 예제 외에 어떤 문제를 풀어야 할지, 어느 수준의 토이 프로젝트를 만들어야 할지 몰라 막히는 경우도 많습니다. 처음부터 클론코딩 같은 어려운 프로젝트를 잡으면 좌절하고, 반대로 todo 리스트만 반복하면 동기부여를 잃기 쉽습니다.

• 1단계: 숫자 맞추기 게임, 간단한 계산기
• 2단계: 타이머, 메모장(로컬 저장 없이)
• 3단계: 간단한 API 연동(날씨 조회 등)

8. ECMAScript, ES6, DOM 같은 용어 장벽

“ES6가 뭔지, ECMAScript랑 뭐가 다른지 모르겠다”는 질문도 흔합니다. 개념을 한 번에 정리하면 이렇습니다.

• ECMAScript: 언어의 표준 사양 (ECMA International이 정의)
• JavaScript: 그 표준을 구현한 실제 언어
• DOM: HTML 문서를 조작하기 위한 별도의 인터페이스 (W3C/WHATWG 표준)
• Web API: 브라우저가 추가로 제공하는 기능들(fetch, localStorage 등)

ES6는 ECMAScript의 특정 버전(2015년 개정판)을 부르는 이름일 뿐, 별개의 언어가 아닙니다.

입문자가 실제로 거쳐야 할 학습 순서

위 마찰점을 반영해 단계를 정리하면 다음과 같습니다.

• 환경 선택: 브라우저 프론트엔드인지 Node.js 기반인지 먼저 정하기
• 기본 문법: 변수, 타입, 조건문, 반복문, 에러 처리(try…catch)
• 함수·스코프·this: 함수 선언/표현식, 화살표 함수, 클로저
• 객체와 배열: 객체 리터럴, 배열 메서드, 내장 객체(Array, Map, Math)
• DOM과 이벤트 (브라우저 기준): 요소 선택, 이벤트 연결, 로직 분리
• 비동기 처리: 콜백 → Promise → async/await, fetch로 데이터 가져오기
• 미니 프로젝트: 입력 검증, 상태 관리, 에러 처리까지 포함해 끝까지 완성
• 코드 품질 도구: ESLint, Prettier, 브라우저 개발자 도구 익히기

이 순서를 마친 뒤에는 React, Vue 같은 프레임워크나 Node.js 백엔드로 확장하는 것이 자연스럽습니다.

굳이 처음부터 파고들지 않아도 되는 것들

입문 단계에서 시간을 아낄 수 있는 부분도 있습니다.

• var 문법: 최신 자료는 let/const를 권장하며, var는 레거시 코드 해석용으로 나중에 다뤄도 무방합니다
• 클래스, 고급 OOP, 메타프로그래밍: 표준에는 정의되어 있지만 입문 필수는 아닙니다
• ECMA-262 사양 원문: 언어 설계자를 위한 문서이며, 일반 학습자는 MDN처럼 이를 해설한 자료를 활용하면 충분합니다
• 파이썬/자바 등 타 언어 경험자: 변수·조건문 기본은 빠르게 넘기고 동적 타이핑, this, 비동기 같은 JS 특유의 개념에 집중하는 압축 커리큘럼이 가능합니다

참고할 만한 공식 자료

• MDN Web Docs — JavaScript 가이드 (한국어)
• MDN Learn — Core: Scripting 학습 경로
• ECMA-262 — ECMAScript 언어 명세 (표준 원본)

브라우저 콘솔이나 개발자 도구 UI는 버전 업데이트에 따라 위치가 바뀔 수 있으므로, 스크린샷 기반 튜토리얼을 볼 때는 현재 버전과 다를 수 있다는 점을 감안하는 것이 좋습니다.

자주 묻는 질문

함께 보면 좋은 글

• 자바스크립트 입문 기초 개념 총정리 – 변수부터 DOM까지 한 번에
• HTML CSS 기초 웹페이지 만들기 — 30분 완성 입문 튜토리얼
• IT 취업 로드맵, 2026년 비전공자도 통하는 현실 전략