반응형
1. 변수와 자료형
JavaScript에서는 var, let, const를 사용하여 변수를 선언할 수 있습니다. 기본적으로 자료형을 지정하지 않으며, 값을 통해 자료형이 결정됩니다.
// var: 전역 또는 함수 스코프
var x = 10;
// let: 블록 스코프
let y = 20;
// const: 블록 스코프, 상수 선언
const z = 30;
console.log(x, y, z); // 10, 20, 30
2. 자료형
JavaScript에는 다양한 자료형이 있습니다. number, string, boolean, null, undefined, object 등이 있습니다.
let num = 100; // 숫자형
let str = "Hello, World!"; // 문자열
let isStudent = true; // 불리언
let value = null; // null
let unknown; // undefined
console.log(typeof num); // "number"
console.log(typeof str); // "string"
console.log(typeof isStudent); // "boolean"
console.log(typeof value); // "object"
console.log(typeof unknown); // "undefined"
3. 조건문
if, else if, else 구문을 사용하여 조건에 따라 코드를 실행할 수 있습니다.
let age = 18;
if (age >= 20) {
console.log("성인입니다.");
} else if (age >= 13) {
console.log("청소년입니다.");
} else {
console.log("어린이입니다.");
}
4. 반복문
JavaScript에서는 for, while, do...while과 같은 반복문을 사용할 수 있습니다.
for 반복문
for (let i = 0; i < 5; i++) {
console.log(i); // 0, 1, 2, 3, 4
}
while 반복문
let count = 0;
while (count < 5) {
console.log(count); // 0, 1, 2, 3, 4
count++;
}
5. 함수
JavaScript에서는 함수 선언식과 함수 표현식을 사용하여 함수를 정의할 수 있습니다.
함수 선언식
function greet(name) {
console.log("안녕하세요, " + name + "님!");
}
greet("철수"); // 안녕하세요, 철수님!
함수 표현식
const sayGoodbye = function(name) {
console.log("안녕히 가세요, " + name + "님.");
};
sayGoodbye("영희"); // 안녕히 가세요, 영희님.
화살표 함수
const add = (a, b) => a + b;
console.log(add(5, 3)); // 8
6. 객체 (Object)
JavaScript의 객체는 키-값 쌍으로 이루어진 데이터 구조입니다.
const person = {
name: "철수",
age: 25,
greet: function() {
console.log("안녕하세요, 저는 " + this.name + "입니다.");
}
};
console.log(person.name); // 철수
person.greet(); // 안녕하세요, 저는 철수입니다.
7. 배열 (Array)
배열은 여러 값을 하나의 변수에 저장할 수 있는 구조입니다.
let fruits = ["사과", "바나나", "포도"];
console.log(fruits[0]); // 사과
fruits.push("오렌지"); // 배열에 요소 추가
console.log(fruits); // ["사과", "바나나", "포도", "오렌지"]
fruits.pop(); // 마지막 요소 제거
console.log(fruits); // ["사과", "바나나", "포도"]
8. 연산자
JavaScript에서 사용할 수 있는 다양한 연산자들이 있습니다.
- 산술 연산자:
+,-,*,/,% - 비교 연산자:
==,===,!=,!==,>,< - 논리 연산자:
&&,||,!
let a = 10, b = 20;
console.log(a + b); // 30
console.log(a > b); // false
console.log(a == "10"); // true (자료형을 비교하지 않음)
console.log(a === "10"); // false (자료형까지 비교)
console.log(a !== b); // true
9. 비구조화 할당 (Destructuring)
비구조화 할당은 배열이나 객체에서 값을 추출하여 변수에 쉽게 할당하는 방법입니다.
배열 비구조화
let [first, second] = [1, 2, 3];
console.log(first); // 1
console.log(second); // 2
객체 비구조화
let person = { name: "영희", age: 30 };
let { name, age } = person;
console.log(name); // 영희
console.log(age); // 30
10. 클래스 (Class)
JavaScript는 ES6부터 클래스를 지원합니다. 클래스를 사용하여 객체 지향 프로그래밍을 구현할 수 있습니다.
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}
speak() {
console.log(`${this.name}가 소리를 냅니다.`);
}
}
let dog = new Animal("멍멍이", 5);
dog.speak(); // 멍멍이가 소리를 냅니다.
11. 프로미스 (Promise)
JavaScript에서 비동기 작업을 처리할 때 Promise를 사용하여 결과를 처리할 수 있습니다.
let promise = new Promise((resolve, reject) => {
let success = true;
if (success) {
resolve("작업 성공!");
} else {
reject("작업 실패...");
}
});
promise
.then(result => console.log(result)) // 작업 성공!
.catch(error => console.log(error)); // 실패 시 에러 출력
12. 비동기 함수 (async/await)
async와 await는 비동기 작업을 동기 작업처럼 처리할 수 있게 해줍니다.
async function fetchData() {
let response = await fetch("https://api.example.com/data");
let data = await response.json();
console.log(data);
}
fetchData();
13. 이벤트 처리
JavaScript는 웹 페이지에서 이벤트를 처리하는 기능을 제공합니다.
document.getElementById("myButton").addEventListener("click", function() {
alert("버튼이 클릭되었습니다!");
});
반응형