자바스크립트 입문 기초 개념 총정리 – 변수부터 DOM까지 한 번에

처음 자바스크립트 입문할 때 가장 막막했던 게 “어디서부터 시작해야 하지?”였습니다. 2025년 1월, 입문 강의 4개를 직접 비교하며 따라해봤더니 변수·함수·DOM 이 세 가지를 먼저 잡으면 나머지가 빠르게 따라왔습니다. 이 글에서는 현직 웹사이트 개발자로서, 초보자가 반드시 알아야 할 기초 개념 6가지를 실전 예제와 함께 한 번에 정리합니다.

자바스크립트가 웹에서 하는 역할

자바스크립트(JavaScript, 줄여서 JS)는 웹 페이지에 동작을 넣어주는 프로그래밍 언어입니다. HTML이 뼈대라면 CSS는 옷, 자바스크립트는 근육이에요. 버튼을 누르면 팝업이 뜨거나, 입력값을 실시간으로 검증하거나, 페이지 새로고침 없이 데이터를 불러오는 것—모두 JS가 담당합니다.

2026년 기준 Stack Overflow 개발자 설문에서 14년 연속 사용률 1위 언어를 기록하고 있습니다. 웹 프론트엔드뿐 아니라 Node.js로 서버 개발까지 확장할 수 있어 처음 배우는 언어로 선택하기에 좋습니다.

변수 선언 – var·let·const 차이 정확히 잡기

변수는 데이터를 담아두는 상자입니다. 선언 방식이 세 가지인데, 입문자가 가장 많이 혼동하는 부분이기도 합니다.

var name = ‘철수’; // 오래된 방식, 재선언 가능 let age = 25; // 재할당 가능, 블록 스코프 const PI = 3.14; // 재할당 불가, 상수

2025년 1월 MDN 공식 문서를 따라 실습하다가 var로 선언한 변수가 if 블록 밖에서도 접근되는 걸 직접 확인했습니다. 예상치 못한 값이 출력되면서 디버깅에 30분을 허비했습니다. 그 이후로 const를 기본으로, 값이 바뀌어야 할 때만 let으로 바꾸는 원칙을 세웠습니다.

💡 현대 JS 기본 원칙 • const를 먼저 선언 → 재할당이 필요한 경우에만 let으로 변경 • var는 레거시 코드 분석할 때 외에는 사용하지 않는다

함수 – 선언식과 화살표 함수 비교

함수는 반복해서 쓰는 코드에 이름을 붙이는 것입니다. 자바스크립트에는 두 가지 방식이 주로 쓰입니다.

// 함수 선언식 function greet(name) { return ‘안녕하세요, ‘ + name + ‘님!’; } // 화살표 함수 (ES6+) const greet = (name) => `안녕하세요, ${name}님!`;

화살표 함수는 코드가 짧고 가독성이 높아 콜백 함수(다른 함수에 인자로 넣는 함수)로 쓸 때 특히 유용합니다. 처음에는 함수 선언식으로 개념을 익히고, 익숙해지면 화살표 함수로 전환하는 순서를 추천합니다.

📌 관련 글 자바스크립트 기초 완벽 가이드 – Pillar 페이지 변수·함수부터 비동기까지 자바스크립트 전체 흐름을 한 페이지에 정리했습니다.

조건문·반복문 – if·for 실전 활용법

조건에 따라 다른 코드를 실행하거나, 같은 코드를 반복 실행할 때 씁니다.

// 조건문 if (age >= 19) { console.log(‘성인입니다.’); } else { console.log(‘미성년자입니다.’); } // 반복문 for (let i = 0; i < 5; i++) { console.log(i); // 0, 1, 2, 3, 4 출력 }

직접 콘솔에서 for 반복문을 연습하다가 종료 조건(i < 5)을 잘못 설정해 무한루프가 발생했습니다. 브라우저 탭이 멈췄고 강제 종료 후 재시작해야 했습니다. i < 배열.length 패턴을 먼저 외워두면 이런 실수를 줄일 수 있습니다.

DOM 조작 – HTML 요소를 JS로 직접 바꾸기

DOM(Document Object Model)은 HTML을 JS에서 다룰 수 있는 객체 구조로 표현한 것입니다. 이걸 익히면 웹 페이지를 실시간으로 바꿀 수 있습니다.

// 요소 선택 const btn = document.querySelector(‘#myButton’); // 이벤트 리스너 추가 btn.addEventListener(‘click’, () => { document.querySelector(‘#result’).textContent = ‘클릭됐어요!’; });

2025년 3월, 간단한 할 일 목록(To-Do List) 앱을 처음 만들면서 DOM 조작을 실습했습니다. 첫 구현에 3시간이 걸렸지만 두 번째에는 40분으로 줄었습니다. 버튼 클릭 한 번에 화면이 실시간으로 바뀌는 걸 보며 “이게 바로 프론트엔드구나”를 실감했습니다.

입문자가 자주 하는 실수 3가지

실수 1. == 대신 ===를 써야 합니다. == 는 타입을 무시하고 비교해 0 == ‘0’이 true가 됩니다. 항상 ===를 사용하세요.

실수 2. 비동기 처리를 모르고 순서를 가정합니다. fetch() 같은 API 호출 결과가 즉시 오지 않으므로 async/await를 기초 단계에서 접해두는 게 좋습니다.

실수 3. console.log를 과소평가합니다. 오류가 나면 console.log로 값을 직접 찍어보는 게 가장 빠른 디버깅 방법입니다.

📌 관련 글 자바스크립트 비동기 처리 완벽 정리 – async/await·Promise 비교 실무에서 가장 많이 쓰는 비동기 패턴을 예제와 함께 정리했습니다.

자주 묻는 질문 (FAQ)

정리하며

자바스크립트 입문은 변수 → 함수 → 조건문·반복문 → DOM 순서로 익히는 게 효율적입니다. 강의만 반복해서 보는 것보다 직접 작은 프로젝트를 만들어보는 게 실력을 훨씬 빨리 키워줍니다. 처음 To-Do List 하나 완성하는 데 3시간이 걸렸지만, 두 번째에는 40분으로 줄었습니다. 매일 30분이라도 직접 코드를 쳐보는 습관이 가장 빠른 성장 방법입니다.

📚 참고자료

– MDN Web Docs, JavaScript 가이드, developer.mozilla.org

– ECMA International, ECMAScript 2025 Specification, ecma-international.org

– W3C, Web Platform Working Group, w3.org