자바스크립트(JavaScript) 문법을 공부하기 위해서는 기본적인 개념부터 시작해서 점차적으로 고급 기능까지 이해하는 것이 중요합니다. 아래에 JavaScript 문법을 단계별로 정리해 두었으니, 차근차근 학습하면서 이해를 넓혀 나가면 좋습니다.
1. 기본 문법
1.1. 변수 선언
- JavaScript에서 변수를 선언할 때는
var, let, const 키워드를 사용할 수 있습니다.javascript var name = "John"; // 전역 변수 또는 함수 범위 let age = 30; // 블록 범위 변수 (추천) const PI = 3.14; // 상수, 재할당 불가
1.2. 데이터 타입
- JavaScript는 기본적인 데이터 타입을 제공합니다.
javascript let number = 123; // 숫자 let string = "hello"; // 문자열 let boolean = true; // 불리언 let obj = { name: "John", age: 30 }; // 객체 let arr = [1, 2, 3]; // 배열 let undef = undefined; // 정의되지 않은 값 let nul = null; // 값이 없음을 의미하는 값
1.3. 조건문
if, else if, else를 사용하여 조건에 따라 실행할 코드를 결정합니다.javascript if (age > 18) { console.log("Adult"); } else if (age > 12) { console.log("Teenager"); } else { console.log("Child"); }
1.4. 반복문
-
JavaScript에서는 for, while, do-while 같은 반복문을 사용해 반복 작업을 처리할 수 있습니다.
for (let i = 0; i < 5; i++) {
console.log(i); // 0, 1, 2, 3, 4
}
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
2. 함수
2.1. 함수 선언
-
JavaScript에서 함수를 선언하는 방법은 여러 가지가 있습니다.
// 함수 선언식
function greet(name) {
return `Hello, ${name}!`;
}
// 함수 표현식
const add = function (a, b) {
return a + b;
};
// 화살표 함수 (Arrow function)
const multiply = (a, b) => a * b;
2.2. 매개변수와 반환값
- 함수는 매개변수를 받을 수 있고, 값을 반환할 수 있습니다.
javascript function sum(a, b) { return a + b; // 반환값 }
2.3. 기본 매개변수
- 함수 매개변수에 기본값을 설정할 수 있습니다.
javascript function greet(name = "Guest") { console.log(`Hello, ${name}`); } greet(); // "Hello, Guest"
3. 객체와 배열
3.1. 객체(Object)
- 객체는 여러 속성(key-value)을 가질 수 있는 데이터 구조입니다.
javascript const person = { name: "John", age: 30, greet: function () { console.log("Hello!"); } }; console.log(person.name); // "John" person.greet(); // "Hello!"
3.2. 배열(Array)
- 배열은 여러 값을 순서대로 저장하는 데이터 구조입니다.
javascript const fruits = ["apple", "banana", "orange"]; console.log(fruits[0]); // "apple" fruits.push("grape"); // 배열에 값 추가
4. 연산자
4.1. 산술 연산자
- 기본적인 산술 연산자:
+, -, *, /, `%`javascript let a = 10; let b = 3; console.log(a + b); // 13 console.log(a % b); // 1 (나머지)
4.2. 비교 연산자
- 값의 비교를 위한 연산자:
==, ===, !=, !==, <, >, <=, `>=`javascript console.log(5 == '5'); // true (값만 비교) console.log(5 === '5'); // false (타입까지 비교)
4.3. 논리 연산자
- 논리적 연산:
&&, ||, `!`javascript let isAdult = age >= 18; let hasPermission = true; console.log(isAdult && hasPermission); // true
5. ES6(ES2015) 최신 문법
5.1. 템플릿 리터럴
- 백틱(
`)을 사용하여 문자열 내에 변수나 표현식을 쉽게 포함할 수 있습니다.```javascript let name = "John"; console.log(Hello, ${name}!`); // "Hello, John!" ```
5.2. 구조 분해 할당 (Destructuring)
-
배열이나 객체의 값을 쉽게 추출할 수 있습니다.
const [a, b] = [1, 2];
console.log(a); // 1
const { name, age } = { name: "John", age: 30 };
console.log(name); // "John"
5.3. 화살표 함수 (Arrow Function)
- 함수 선언을 더 간결하게 할 수 있으며,
this 키워드가 기존 함수와 다르게 동작합니다.javascript const add = (a, b) => a + b;
5.4. 기본 매개변수
- 함수 매개변수에 기본값을 설정할 수 있습니다.
javascript function greet(name = "Guest") { console.log(`Hello, ${name}`); } greet(); // "Hello, Guest"
5.5. 비구조화 할당 (Destructuring Assignment)
-
배열이나 객체의 값을 쉽게 추출할 수 있습니다.
const [first, second] = [1, 2];
console.log(first); // 1
const { name, age } = { name: "John", age: 30 };
console.log(name); // "John"
6. 비동기 처리
6.1. 콜백 함수
- 비동기 처리에서 자주 사용하는 함수로, 다른 함수의 인자로 전달되어 작업이 완료된 후 호출됩니다.
javascript function fetchData(callback) { setTimeout(() => { callback("data loaded"); }, 1000); } fetchData(data => { console.log(data); // "data loaded" });
6.2. Promise
- 비동기 작업을 처리하기 위한 객체로, 작업이 성공 또는 실패했을 때 실행되는 로직을 명시할 수 있습니다.
javascript let promise = new Promise((resolve, reject) => { setTimeout(() => resolve("Success!"), 1000); }); promise.then(result => console.log(result)); // "Success!"
6.3. async/await
Promise를 보다 쉽게 사용할 수 있는 문법으로, 비동기 코드를 동기 코드처럼 작성할 수 있습니다.javascript async function fetchData() { let data = await promise; console.log(data); // "Success!" }
7. 예외 처리
7.1. try-catch
- 코드에서 발생하는 예외를 처리하기 위한 구문입니다.
javascript try { let result = riskyFunction(); } catch (error) { console.log("Error occurred:", error); }
8. DOM 조작
8.1. DOM 요소 선택
- JavaScript를 통해 HTML 요소를 선택하고 조작할 수 있습니다.
javascript let element = document.getElementById("myElement");
8.2. 이벤트 처리
- 사용자의 이벤트(클릭, 입력 등)에 반응하는 코드를 작성할 수 있습니다.
javascript element.addEventListener("click", () => { console.log("Element clicked!"); });
JavaScript는 매우 유연하고 강력한 언어입니다. 기본 문법을 확실하게 다지면서 최신 ES6+ 기능을 익히고, 비동기 프로그래밍 및 객체지향 개념까지 학습하면, 더 복잡한 웹 애플리케이션을 구축할 수 있습니다.
