자바스크립트의 기초 내용을 한번 간략하게 정리를 해보겠습니다.
1. 변수와 상수 (Variables and Constants):
var, let, const 키워드로 변수를 선언하고 값을 할당하는 방법입니다.
let x = 10;
const y = 20;
var z = 30;
2. 데이터 타입 (Data Types):
기본 데이터 타입: String, Number, Boolean, Null, Undefined, Symbol, BigInt
복합 데이터 타입: Object, Array, Function
let name = "John"; // String
let age = 25; // Number
let isStudent = true; // Boolean
let address = null; // Null
let city; // Undefined
let id = Symbol("id"); // Symbol
let largeNumber = 12345678901234567890n; // BigInt
3. 연산자 (Operators):
산술 연산자: +, -, , /, %, *
비교 연산자: ==, ===, !=, !==, >, <, >=, <=
논리 연산자: &&, ||, !
할당 연산자: =, +=, -=, *=, /=
let a = 10;
let b = 20;
let sum = a + b; // 30
let isEqual = (a == b); // false
let isGreater = (a > b); // false
4. 조건문 (Conditional Statements):
if, else if, else를 사용하여 조건에 따라 코드 실행을 분기하는 방법입니다.
switch 문을 사용하여 여러 경우를 처리합니다.
let score = 85;
if (score >= 90) {
console.log("A");
} else if (score >= 80) {
console.log("B");
} else {
console.log("C");
}
let fruit = "apple";
switch (fruit) {
case "apple":
console.log("Apple is red");
break;
case "banana":
console.log("Banana is yellow");
break;
default:
console.log("Unknown fruit");
}
5. 반복문 (Loops):
for 루프, while 루프, do...while 루프를 사용하여 반복 작업을 수행하는 방법이지요,
for...of와 for...in을 사용하여 배열과 객체를 순회합니다.
for (let i = 0; i < 5; i++) {
console.log(i);
}
let colors = ["red", "green", "blue"];
for (let color of colors) {
console.log(color);
}
let person = { name: "John", age: 30 };
for (let key in person) {
console.log(key + ": " + person[key]);
}
6. 함수 (Functions):
함수를 정의하고 호출하는 방법입니다. 또한매개변수와 반환값을 다루는 방법입니다.
function add(a, b) {
return a + b;
}
let result = add(5, 10); // 15
const multiply = (x, y) => x * y;
let product = multiply(4, 3); // 12
7. 객체와 배열 (Objects and Arrays):
객체를 생성하고 속성을 추가하거나 수정하는 방법이며,
배열을 생성하고 요소를 추가하거나 삭제할 수 있습니다.
let person = {
name: "Alice",
age: 28,
greet: function () {
console.log("Hello, " + this.name);
},
};
person.greet(); // Hello, Alice
let fruits = ["apple", "banana", "cherry"];
fruits.push("date");
console.log(fruits); // ["apple", "banana", "cherry", "date"]
8. 이벤트 처리 (Event Handling):
HTML 요소에 이벤트 리스너를 추가하고, 이벤트를 처리할 있습니다.
document.getElementById("myButton").addEventListener("click", function () {
alert("Button clicked!");
});
9. 템플릿 리터럴 (Template Literals):
백틱( ` )을 사용하여 문자열을 정의하고, ${}를 사용하여 변수나 표현식을 사용할수 있습니다.
let name = "John";
let greeting = `Hello, ${name}!`;
console.log(greeting); // Hello, John!
10. 스프레드 연산자와 나머지 파라미터 (Spread and Rest Parameters):
스프레드 연산자(...)를 사용하여 배열이나 객체를 확장하거나 복사할 수 있습니다.
나머지 파라미터를 사용하여 함수에 전달된 인수를 배열로 받을 수 있습니다.
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10
11. 디스트럭처링 할당 (Destructuring Assignment):
배열이나 객체의 값을 분해하여 변수에 할당하는 방법입니다.
let [a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20
let person = {name: "Alice", age: 28};
let {name, age} = person;
console.log(name); // Alice
console.log(age); // 28
12. 비동기 프로그래밍 (Asynchronous Programming):
Promise, async/await를 사용하여 비동기 작업을 처리하는 방법입니다.
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => resolve("Data fetched"), 2000);
});
}
async function getData() {
let data = await fetchData();
console.log(data); // Data fetched
}
getData();
13. 모듈 (Modules):
export와 import를 사용하여 코드 모듈을 정의하고 불러오는 방법입니다.
// module.js
export const pi = 3.14;
export function add(a, b) {
return a + b;
}
// main.js
import { pi, add } from "./module.js";
console.log(pi); // 3.14
console.log(add(2, 3)); // 5
14. DOM 조작 (DOM Manipulation):
document 객체를 사용하여 HTML 요소를 선택하고 조작할 수 있습니다.
let element = document.getElementById("myElement");
element.textContent = "Hello, World!";
element.style.color = "blue";
15. 이벤트 위임 (Event Delegation):
이벤트 위임을 사용하여 많은 하위 요소에 대한 이벤트 처리를 효율적으로 관리할 수 있습니다.
document.getElementById("parent").addEventListener("click", function (event) {
if (event.target && event.target.matches("li.item")) {
console.log("Item clicked:", event.target.textContent);
}
});
16. 에러 처리 (Error Handling):
try, catch, finally 구문을 사용하여 예외를 처리할 수 있습니다.
try {
let result = riskyOperation();
console.log(result);
} catch (error) {
console.error("An error occurred:", error.message);
} finally {
console.log("This will always run");
}