들어가며
자바스크립트(JavaScript)는 오늘날 웹 개발을 논할 때 절대 빠질 수 없는 핵심 언어입니다. 웹 브라우저에서 동적인 인터랙션을 제공하는 기본 도구로 시작했지만, 이제는 백엔드(서버), 모바일 앱, 데스크톱 애플리케이션, 심지어 사물인터넷(IoT) 분야까지 진출한 만능 언어로 성장했습니다.
이 글에서는 자바스크립트를 처음 접하는 분들을 위해 언어의 기본기를 다질 수 있는 로드맵을 제공합니다. 먼저 자바스크립트란 무엇인지, 어떻게 개발 환경을 구축하는지 알아보며, 이어서 변수, 자료형, 연산자, 조건문, 반복문, 함수, 스코프, 그리고 배열과 객체 같은 핵심 개념을 자세히 살펴봅니다. 이 기초 개념들을 탄탄히 익히면, 이후 자바스크립트 심화 주제나 프레임워크 학습에서도 흔들리지 않는 튼튼한 기반을 마련할 수 있습니다.
1. 자바스크립트란 무엇인가?
1-1. 탄생 배경과 발전 과정
자바스크립트는 1995년 넷스케이프(Netscape) 브라우저를 위해 탄생한 언어로, 웹 페이지에 동적인 기능을 부여하고 사용자와 상호작용하는 데 특화되어 있습니다. 초기에는 “브라우저 전용 스크립트 언어” 정도로 취급되었지만, 2009년 Node.js의 등장과 함께 서버 사이드 프로그래밍 영역까지 확장되며 제2의 전성기를 맞이했습니다. 이제 자바스크립트는 단순히 애니메이션이나 양식 검증만을 위한 언어가 아니라, 웹 프론트엔드·백엔드, 모바일 앱(React Native), 데스크톱 앱(Electron), 게임 개발, 머신러닝 등 광범위한 분야에서 사용되는 범용 프로그래밍 언어입니다.
1-2. 자바스크립트의 특징
- 동적 타이핑(Dynamic Typing) : 변수에 지정되는 자료형이 고정되지 않고 상황에 따라 달라질 수 있습니다. 이는 빠른 개발을 가능케 하지만, 자료형 불일치로 인한 오류가 발생할 수 있으므로 주의가 필요합니다.
- 인터프리터 언어 : 별도의 컴파일 과정 없이 브라우저나 Node.js 엔진이 코드를 즉시 해석하고 실행합니다.
- 이벤트 기반, 비동기 처리 능력 : 사용자 이벤트(클릭, 키입력)나 서버 응답 등에 반응하는 코드를 쉽게 작성할 수 있습니다.
- 거대한 생태계 : npm(Node Package Manager)을 통한 수많은 라이브러리와 프레임워크 지원, 풍부한 커뮤니티 자료는 개발 생산성을 극대화합니다.
1-3. 개발 환경 구축
- 브라우저 : 크롬(Chrome), 파이어폭스(Firefox) 등 최신 브라우저를 사용하면 별다른 설치 없이 자바스크립트 코드를 실행할 수 있습니다. 콘솔(개발자 도구)에서 바로 코드를 테스트해볼 수도 있습니다.
- 에디터/IDE : VS Code, WebStorm, Sublime Text 등 코드 편집기를 설치합니다. VS Code는 풍부한 플러그인 생태계와 직관적인 UI로 많은 개발자에게 사랑받고 있습니다.
- Node.js 설치(선택사항) : 백엔드나 빌드 도구를 활용하기 위해 Node.js를 설치할 수 있습니다. Node.js는 자바스크립트 실행 환경으로, 터미널에서 node 명령어로 JS 파일을 실행할 수 있게 합니다.
예제 : hello.html 파일을 만들어 다음 코드로 브라우저에서 실행해보세요.
[html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Hello JS</title>
</head>
<body>
<h1 id="greeting">Loading...</h1>
<script>
document.getElementById('greeting').textContent = 'Hello, JavaScript!';
</script>
</body>
</html>
브라우저에서 파일을 열면, “Hello, JavaScript!”가 화면에 표시됩니다. 이렇게 간단한 예제로 DOM을 조작하며, 자바스크립트가 HTML과 상호작용하는 흐름을 맛볼 수 있습니다.
2. 변수, 자료형, 연산자 : 코드의 기본 빌딩 블록
2-1. 변수 선언
변수는 데이터를 저장하는 상자입니다. ES6 이후에는 let과 const를 주로 사용합니다.
- let : 재할당 가능한 변수 선언
- const : 재할당 불가능한 상수 선언
- var : 기존 방식이지만 스코프 문제로 잘 사용하지 않습니다.
예제
[js]
let name = 'Alice';
const PI = 3.14159;
console.log(name); // Alice
// PI = 3.14; // 오류! const는 재할당 불가
2-2. 자료형
자바스크립트의 자료형은 크게 원시 타입(primitive type)과 참조 타입(reference type)으로 나눕니다.
- 원시 타입 : number, string, boolean, null, undefined, symbol, bigint
- 참조 타입 : object(배열, 함수, 일반 객체 등)
예제
[js]
let age = 30; // number
let greeting = "Hello"; // string
let isStudent = false; // boolean
let nothing = null; // 명시적 비어있음
let notDefined; // undefined: 초기화 안 됨
2-3. 연산자
- 산술 연산자 : +, -, *, /, %
- 비교 연산자 : ===, !==, >, <
- 논리 연산자 : &&, ||, !
예제
[js]
console.log(5 + 3); // 8
console.log(10 > 3); // true
console.log(true && false); // false
형 변환에 유의하세요. '5' + 3은 "53"(문자열)이지만, Number('5') + 3은 8입니다.
3. 조건문과 반복문 : 프로그램의 흐름 제어
3-1. 조건문 if / else
조건문을 사용하면 상황에 따라 다른 코드를 실행할 수 있습니다.
[js]
let score = 85;
if (score >= 90) {
console.log('A학점');
} else if (score >= 80) {
console.log('B학점');
} else {
console.log('C학점 이하');
}
3-2. switch 문
여러 경우를 간결히 처리할 때 유용합니다.
[js]
let fruit = 'apple';
switch (fruit) {
case 'apple':
console.log('사과입니다.');
break;
case 'banana':
console.log('바나나입니다.');
break;
default:
console.log('해당하는 과일이 없습니다.');
}
3-3. 반복문 for / while
반복문은 코드 블록을 여러 번 실행합니다.
- for 문 : 반복 횟수가 명확할 때
- while 문 : 조건이 참인 동안 계속 반복
[js]
for (let i = 0; i < 3; i++) {
console.log(`i의 값: ${i}`);
}
let count = 0;
while (count < 3) {
console.log(`count: ${count}`);
count++;
}
4. 함수와 스코프 : 재사용 가능한 코드 블록 만들기
4-1. 함수 선언 및 호출
함수는 특정 작업을 수행하는 코드 묶음입니다.
[js]
function greet(userName) {
return `Hello, ${userName}!`;
}
console.log(greet('Bob')); // Hello, Bob!
4-2. 함수 표현식과 화살표 함수
ES6부터 화살표 함수로 더 간결하게 함수 정의가 가능합니다.
[js]
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5
4-3. 스코프(Scope) 이해
스코프는 변수가 유효한 범위를 의미합니다.
- let, const는 블록 스코프를 가짐
- var는 함수 스코프를 가짐 (권장 X)
[js]
if (true) {
let x = 10;
}
// console.log(x); // 에러! x는 if 블록 바깥에서 유효하지 않음
이러한 스코프 개념을 잘 활용하면 변수가 엉키지 않고 체계적인 코드 관리가 가능합니다.
5. 배열과 객체 : 데이터를 구조화하는 핵심 도구
5-1. 배열(Array)
배열은 순서가 있는 리스트입니다.
[js]
const fruits = ['apple', 'banana', 'cherry'];
console.log(fruits[1]); // banana
// 배열 메서드 활용
fruits.push('orange');
console.log(fruits); // ['apple', 'banana', 'cherry', 'orange']
배열 메서드 map, filter, reduce를 통해 데이터 처리 로직을 간결하게 만들 수 있습니다.
5-2. 객체(Object)
객체는 키-값 쌍을 통해 다양한 형태의 데이터를 표현합니다.
[js]
const person = {
name: 'Charlie',
age: 28,
greet() {
console.log(`Hi, I'm ${this.name}.`);
}
};
person.greet(); // Hi, I'm Charlie.
점 표기법(person.name) 또는 대괄호 표기법(person['age'])으로 속성에 접근 가능합니다. 객체를 사용하면 실세계 사물을 모델링하고, 구조화된 데이터를 다룰 수 있습니다.
마무리 : 기초를 탄탄히 다지는 것이 핵심
여기까지 자바스크립트 기초를 체계적으로 살펴보았습니다. 이 단계에서 여러분은 다음을 할 수 있어야 합니다.
- 자바스크립트의 기본 개념과 역사, 개발 환경에 대한 이해
- 변수, 자료형, 연산자, 조건문, 반복문, 함수, 스코프, 배열, 객체와 같은 핵심 문법 요소 활용
- 간단한 예제 코드를 직접 작성하고 실행해보기
기초를 튼튼히 다지는 것은 앞으로 다룰 다양한 심화 주제(비동기 프로그래밍, 모듈 시스템, 클래스 문법, 프레임워크 활용)로 나아가는 데 든든한 밑거름이 됩니다.
'프로그래밍 > Javascript' 카테고리의 다른 글
| [Javascript] 프레임워크 & 라이브러리 기초 : 생산성과 확장성으로 가는 길 (2) | 2024.12.08 |
|---|---|
| [Javascript] 실전 프로젝트 : 작지만 탄탄한 예제로 자바스크립트 역량 강화하기 (1) | 2024.12.08 |
| [Javascript] 문제 해결 & 디버깅 : 안정적인 코드를 위한 핵심 역량 (2) | 2024.12.07 |
| [Javascript] 브라우저 환경 이해 : 웹 페이지와 상호작용하는 자바스크립트의 힘 (0) | 2024.12.07 |
| [Javascript] 자바스크립트 핵심 문법 심화 : 현대적 언어 기능으로 성장하기 (0) | 2024.12.07 |
