자바스크립트(JavaScript) 기초 문법 완벽 정리: 웹 개발 첫걸음, 핵심만 쏙쏙!
📜 자바스크립트(JavaScript) 기초 문법 완벽 정리: 웹 개발 첫걸음, 핵심만 쏙쏙!
1. 🚀 자바스크립트(JavaScript)란 무엇인가? 왜 배워야 할까?
자바스크립트(JavaScript, 종종 JS로 줄여 부름)는 웹 페이지를 동적이고 인터랙티브하게 만들기 위해 탄생한 프로그래밍 언어입니다. 처음에는 웹 브라우저에서 실행되는 간단한 스크립트 언어로 시작했지만, 오늘날에는 Node.js와 같은 런타임 환경 덕분에 서버 사이드 개발(백엔드), 모바일 앱 개발(React Native, Ionic 등), 데스크톱 앱 개발(Electron), 게임 개발 등 거의 모든 영역에서 활용되는 만능 언어로 성장했습니다. 웹 개발을 목표로 한다면 자바스크립트는 HTML, CSS와 함께 반드시 익혀야 할 필수 기술입니다.
자바스크립트를 배우면 사용자의 클릭, 마우스 움직임, 키보드 입력 등에 반응하여 웹 페이지의 내용을 변경하거나, 서버와 데이터를 주고받아 실시간으로 정보를 업데이트하고, 애니메이션 효과를 주는 등 웹 페이지에 생동감을 불어넣을 수 있습니다. 또한, React, Angular, Vue.js와 같은 강력한 프론트엔드 프레임워크/라이브러리들은 모두 자바스크립트를 기반으로 하고 있어, 현대적인 웹 애플리케이션 개발을 위해서는 자바스크립트에 대한 깊이 있는 이해가 필수적입니다.
이 글에서는 자바스크립트의 가장 기본적인 문법 요소들을 체계적으로 정리하여, 웹 개발 여정을 막 시작한 초보자분들이 탄탄한 기초를 다질 수 있도록 돕고자 합니다. 복잡한 내용은 최대한 배제하고, 핵심 개념 위주로 쉽게 설명하겠습니다.
2. 🛠️ 자바스크립트 시작하기: HTML에 코드 작성하는 방법
자바스크립트 코드는 HTML 문서 내에 직접 작성하거나, 별도의 .js 파일로 만들어 연결할 수 있습니다.
1. HTML 내부
3. 🧱 자바스크립트 기본 문법 요소
이제 본격적으로 자바스크립트의 핵심 문법들을 살펴보겠습니다.
3.1. 변수 (Variables) 와 상수 (Constants)
데이터를 저장하기 위한 메모리 공간에 이름을 붙인 것입니다.
var(과거 방식, 현재는 잘 사용 안 함): 함수 레벨 스코프, 재선언 및 재할당 가능. 호이스팅 시 문제 발생 가능성.let(권장): 블록 레벨 스코프, 재할당 가능, 재선언 불가능.const(권장): 블록 레벨 스코프, 재할당 불가능, 재선언 불가능. (선언과 동시에 초기화 필수)
let name = "홍길동"; // 문자열 변수
let age = 30; // 숫자형 변수
const PI = 3.14; // 상수 (변경 불가)
console.log(name); // 출력: 홍길동
age = 31; // 재할당 가능
console.log(age); // 출력: 31
// PI = 3.14159; // 오류 발생: 상수에 값 할당 시도3.2. 데이터 타입 (Data Types)
자바스크립트는 동적 타입 언어로, 변수 선언 시 타입을 명시하지 않아도 값이 할당될 때 자동으로 타입이 결정됩니다.
- 원시 타입 (Primitive Types):
string: 문자열 (예:"안녕하세요",'Hello')number: 숫자 (정수, 실수 모두 포함, 예:100,3.14,NaN,Infinity)boolean: 논리값 (true또는false)undefined: 값이 할당되지 않은 변수의 기본값null: 의도적으로 '값이 없음'을 나타내는 값 (객체가 아님)symbol(ES6 추가): 유일하고 변경 불가능한 기본 값bigint(ES2020 추가):number가 표현할 수 있는 최대치보다 큰 정수를 다룰 때 사용
- 참조 타입 (Reference Types) / 객체 타입 (Object Types):
object: 여러 값이나 복잡한 개체를 나타내는 데 사용 (배열, 함수, 일반 객체 등)
let message = "Hello"; // string
let count = 10; // number
let isValid = true; // boolean
let x; // undefined
let y = null; // null
let person = { name: "Alice", age: 25 }; // objecttypeof 연산자로 데이터 타입을 확인할 수 있습니다: console.log(typeof message); // "string"
3.3. 연산자 (Operators)
값을 계산하거나 비교하는 데 사용되는 기호입니다.
- 산술 연산자:
+,-,*,/,%(나머지),**(거듭제곱, ES7) - 할당 연산자:
=,+=,-=,*=,/=,%= - 비교 연산자:
==(값만 비교),===(값과 타입 모두 비교 - 권장),!=,!==,>,<,>=,<= - 논리 연산자:
&&(AND),||(OR),!(NOT) - 증감 연산자:
++(1 증가),--(1 감소) - 삼항 연산자:
조건 ? 값1 : 값2(조건이 참이면 값1, 거짓이면 값2) - typeof 연산자: 피연산자의 데이터 타입을 문자열로 반환
let a = 10;
let b = 3;
console.log(a + b); // 13
console.log(a % b); // 1
let num = 5;
num++;
console.log(num); // 6
console.log(a > b); // true
console.log("5" == 5); // true (값만 비교)
console.log("5" === 5); // false (값과 타입 비교)
let isLoggedIn = true;
let isAdmin = false;
console.log(isLoggedIn && isAdmin); // false
console.log(isLoggedIn || isAdmin); // true
let age = 20;
let type = age >= 19 ? "성인" : "미성년자";
console.log(type); // "성인"3.4. 조건문 (Conditional Statements)
특정 조건에 따라 다른 코드를 실행하고 싶을 때 사용합니다.
if문:if (조건) { // 조건이 참일 때 실행될 코드 } else if (다른 조건) { // 다른 조건이 참일 때 실행될 코드 } else { // 모든 조건이 거짓일 때 실행될 코드 }switch문: 특정 변수의 값에 따라 다른 코드를 실행할 때 유용합니다.switch (표현식) { case 값1: // 표현식의 결과가 값1일 때 실행될 코드 break; // switch 문을 빠져나감 case 값2: // 표현식의 결과가 값2일 때 실행될 코드 break; default: // 어떤 case에도 해당하지 않을 때 실행될 코드 }
let score = 85;
if (score >= 90) {
console.log("A학점");
} else if (score >= 80) {
console.log("B학점"); // 실행됨
} else {
console.log("C학점 이하");
}
let fruit = "사과";
switch (fruit) {
case "바나나":
console.log("바나나는 1000원입니다.");
break;
case "사과":
console.log("사과는 2000원입니다."); // 실행됨
break;
default:
console.log("해당 과일은 없습니다.");
}3.5. 반복문 (Loops)
특정 코드를 여러 번 반복해서 실행하고 싶을 때 사용합니다.
for문: 정해진 횟수만큼 반복합니다.for (초기화; 조건식; 증감식) { // 반복 실행될 코드 }while문: 조건이 참인 동안 계속 반복합니다.while (조건식) { // 반복 실행될 코드 // 조건식을 거짓으로 만들 수 있는 코드가 내부에 있어야 함 (무한 루프 방지) }do...while문: 코드를 먼저 한 번 실행한 후, 조건이 참인 동안 반복합니다.do { // 반복 실행될 코드 } while (조건식);for...in문: 객체의 속성(키)들을 순회합니다.for (let key in object) { // object의 각 속성(key)에 대해 실행될 코드 }for...of문 (ES6 추가): 반복 가능한(iterable) 객체(배열, 문자열, Map, Set 등)의 값들을 순회합니다.for (let value of iterable) { // iterable의 각 값(value)에 대해 실행될 코드 }
// for 문
for (let i = 0; i < 5; i++) {
console.log(i); // 0, 1, 2, 3, 4 출력
}
// while 문
let j = 0;
while (j < 3) {
console.log("현재 j: " + j);
j++;
}
// for...of 문 (배열 순회)
const fruits = ["사과", "바나나", "딸기"];
for (let fruit of fruits) {
console.log(fruit); // "사과", "바나나", "딸기" 순서대로 출력
}3.6. 함수 (Functions)
특정 작업을 수행하는 코드 블록을 의미하며, 재사용이 가능합니다.
- 함수 선언식:
function 함수이름(매개변수1, 매개변수2) { // 실행될 코드 return 반환값; // 반환값이 없으면 생략 가능 } - 함수 표현식:
const 함수이름 = function(매개변수1, 매개변수2) { // 실행될 코드 return 반환값; }; - 화살표 함수 (Arrow Functions, ES6 추가): 간결한 함수 표현 방식입니다.
const 함수이름 = (매개변수1, 매개변수2) => { // 실행될 코드 return 반환값; }; // 코드가 한 줄이고 바로 반환한다면 중괄호와 return 생략 가능 const add = (a, b) => a + b;
// 함수 선언식
function greet(name) {
return "안녕하세요, " + name + "님!";
}
console.log(greet("철수")); // "안녕하세요, 철수님!"
// 화살표 함수
const multiply = (x, y) => x * y;
console.log(multiply(3, 4)); // 123.7. 객체 (Objects)
이름(키)과 값으로 구성된 속성들의 집합입니다. 중괄호 {}를 사용하여 만듭니다.
const student = {
name: "영희",
age: 22,
major: "컴퓨터공학",
greet: function() { // 객체 내의 함수 (메서드)
console.log("안녕하세요, 제 이름은 " + this.name + "입니다.");
}
};
console.log(student.name); // "영희" (점 표기법)
console.log(student["age"]); // 22 (대괄호 표기법)
student.greet(); // "안녕하세요, 제 이름은 영희입니다."3.8. 배열 (Arrays)
여러 개의 값을 순서대로 저장하는 자료구조입니다. 대괄호 []를 사용하여 만듭니다.
const colors = ["빨강", "초록", "파랑"];
console.log(colors[0]); // "빨강" (인덱스는 0부터 시작)
console.log(colors.length); // 3 (배열의 길이)
colors.push("노랑"); // 배열 끝에 요소 추가
console.log(colors); // ["빨강", "초록", "파랑", "노랑"]
colors.pop(); // 배열 끝 요소 제거
console.log(colors); // ["빨강", "초록", "파랑"]
// 배열 순회 (for...of 사용)
for (let color of colors) {
console.log(color);
}배열에는 forEach, map, filter, reduce 등 유용한 메서드들이 많습니다.
4. 🌐 DOM (Document Object Model) 조작 기초
자바스크립트가 웹 브라우저에서 강력한 이유 중 하나는 DOM을 조작하여 HTML 요소를 동적으로 변경할 수 있기 때문입니다. DOM은 HTML 문서를 객체 기반으로 표현한 모델입니다.
- HTML 요소 선택하기:
document.getElementById("아이디"): 특정 ID를 가진 요소 선택document.getElementsByClassName("클래스명"): 특정 클래스 이름을 가진 요소들의 목록(HTMLCollection) 반환document.getElementsByTagName("태그명"): 특정 태그 이름을 가진 요소들의 목록(HTMLCollection) 반환document.querySelector("CSS 선택자"): CSS 선택자와 일치하는 첫 번째 요소 선택document.querySelectorAll("CSS 선택자"): CSS 선택자와 일치하는 모든 요소들의 목록(NodeList) 반환
- HTML 내용 및 속성 변경하기:
요소.innerHTML = "새로운 내용": 요소 내부의 HTML 내용 변경요소.textContent = "새로운 텍스트": 요소 내부의 텍스트 내용 변경요소.style.속성명 = "값": 요소의 CSS 스타일 변경 (예:element.style.color = "red";)요소.setAttribute("속성명", "값"): 요소의 속성 값 설정요소.getAttribute("속성명"): 요소의 속성 값 가져오기
- 이벤트 처리하기: 사용자의 행동(클릭, 키 입력 등)에 반응하여 특정 함수를 실행합니다.
const myButton = document.getElementById("myBtn"); myButton.addEventListener("click", function() { alert("버튼이 클릭되었습니다!"); });
✨ DOM 조작은 자바스크립트의 핵심 기능 중 하나이지만, 방대하므로 여기서는 간단한 소개만 다룹니다. 더 깊이 있는 학습이 필요합니다.
5. 💡 자바스크립트 학습을 위한 추가 조언
- 꾸준한 연습이 왕도입니다.
문법을 익히는 것도 중요하지만, 직접 코드를 작성하고 작은 프로젝트를 만들어보는 것이 실력 향상에 가장 큰 도움이 됩니다. 간단한 계산기, 투두리스트, 웹 페이지의 동적인 요소 추가 등을 시도해보세요.
- 브라우저 개발자 도구를 적극 활용하세요.
크롬, 파이어폭스 등의 브라우저에는 강력한 개발자 도구(F12키)가 내장되어 있습니다. 콘솔(Console) 창에서 코드를 테스트하고 오류를 확인하며, 요소(Elements) 탭에서 DOM 구조를 살펴보는 습관을 들이세요.
- 온라인 자료와 커뮤니티를 활용하세요.
MDN Web Docs (Mozilla Developer Network)는 자바스크립트에 대한 가장 신뢰할 수 있는 레퍼런스입니다. Stack Overflow 같은 커뮤니티에서 궁금한 점을 질문하고 다른 개발자들의 코드를 참고하는 것도 좋은 학습 방법입니다.
- 오류 메시지를 두려워하지 마세요.
프로그래밍을 하다 보면 수많은 오류를 만나게 됩니다. 오류 메시지는 문제 해결의 실마리이므로, 꼼꼼히 읽고 원인을 파악하려는 노력이 중요합니다.
- 최신 ECMAScript(ES) 버전에 관심을 가지세요.
자바스크립트는 ECMAScript라는 표준 명세에 따라 발전합니다. ES6(ES2015) 이후 많은 유용한 기능들이 추가되었으므로, 최신 문법과 기능들을 꾸준히 학습하는 것이 좋습니다. (예: 화살표 함수, 템플릿 리터럴, let/const, 클래스, 모듈 등)
6. 🏁 마무리하며: 자바스크립트, 가능성의 언어
지금까지 자바스크립트의 가장 기본적인 문법 요소들을 살펴보았습니다. 이 기초 지식은 여러분이 웹 개발의 세계로 나아가는 튼튼한 발판이 될 것입니다. 자바스크립트는 배우기 쉽고 직관적이면서도, 그 가능성은 무궁무진한 언어입니다. 꾸준히 학습하고 연습한다면, 여러분도 멋진 웹 애플리케이션을 만들고 아이디어를 현실로 구현하는 즐거움을 누릴 수 있을 것입니다.
이 글이 자바스크립트 학습 여정을 시작하는 모든 분들께 작은 도움이 되었기를 바랍니다. 앞으로 더 많은 것을 배우고 경험하며 훌륭한 개발자로 성장하시기를 응원합니다! Happy Coding! 🚀
댓글
댓글 쓰기