# 자바스크립트 기본 개념

자바스크립트는 웹 개발에서 필수적인 프로그래밍 언어로, 동적인 웹 페이지를 만들기 위해 사용됩니다. 이번 글에서는 자바스크립트의 기본 개념을 살펴보겠습니다.

---

## 1. 자바스크립트란?

자바스크립트는 웹 브라우저에서 실행되는 인터프리터 방식의 프로그래밍 언어입니다. HTML, CSS와 함께 웹을 구성하는 핵심 기술 중 하나로, 웹 페이지의 동적인 요소를 제어하는 데 사용됩니다.

### 자바스크립트의 특징
- **동적 타입**: 변수의 타입이 동적으로 결정됩니다.
- **객체 기반**: 객체를 활용한 프로그래밍이 가능합니다.
- **이벤트 기반**: 사용자의 동작(클릭, 입력 등)에 따라 코드가 실행됩니다.
- **비동기 처리*: 비동기 작업을 지원하여 빠르고 효율적인 실행이 가능합니다.

---

## 2. 변수와 데이터 타입

자바스크립트에서는 `var`, `let`, `const`를 사용하여 변수를 선언할 수 있습니다.

```js
var name = "John";
let age = 30; // 같은 변수명으로 재선언 불가
const pi = 3.14; // 선언하며 값을 대입
```

### 주요 데이터 타입
```js
let number = 10; // 숫자(Number)
let text = "Hello"; // 문자열(String)
let isTrue = true; // 불리언(Boolean)
let value = null; // 널(Null)
let notDefined; // 정의되지 않음(Undefined)
let person = { name: "Alice", age: 25 }; // 객체(Object)
let numbers = [1, 2, 3, 4, 5]; // 배열(Array)
```

---

## 3. 연산자와 조건문

### 연산자
```js
let sum = 10 + 5; // 산술 연산자 (+, -, *, /, %)
let isEqual = (10 === "10"); // 비교 연산자 (===, !==, <, >, <=, >=)
let andCheck = (true && false); // 논리 연산자 (&&, ||, !)
```

### 조건문
```js
let score = 85;
if (score >= 90) {
  console.log("A 학점");
} else if (score >= 80) {
  console.log("B 학점");
} else {
  console.log("C 학점");
}
```

---

## 4. 함수

### 함수 선언 방식
```js
function greet(name) {
  return "Hello, " + name;
}
console.log(greet("Alice"));
```

### 화살표 함수 (ES6+)
```js
const greet = (name) => `Hello, ${name}`;
console.log(greet("Alice"));
```

---

## 5. 객체와 배열

### 객체
```js
let person = {
  name: "John",
  age: 30,
  greet: function() {
    console.log("Hello!");
  }
};
console.log(person.name); // John
person.greet(); // Hello!
```

### 배열
```js
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[1]); // Banana
fruits.push("Mango");
console.log(fruits); // ["Apple", "Banana", "Cherry", "Mango"]
```

---

## 6. 반복문

### for 문
```js
for (let i = 0; i < 5; i++) {
  console.log(i);
}
```

### while 문
```js
let count = 0;
while (count < 5) {
  console.log(count);
  count++;
}
```

---

## 7. 비동기 처리

### 콜백 함수
```js
function fetchData(callback) {
  setTimeout(() => {
    callback("데이터 로드 완료");
  }, 2000);
}
fetchData(console.log);
```

### 프로미스 (Promise)
```js
let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("성공"), 2000);
});
promise.then(console.log);
```

### async/await
```js
async function fetchData() {
  let data = await new Promise(resolve => setTimeout(() => resolve("완료"), 2000));
  console.log(data);
}
fetchData();
```

---

## 8. 이벤트 핸들링

```js
document.getElementById("myButton").addEventListener("click", function() {
  alert("버튼 클릭됨!");
});
```



자바스크립트란?

자바스크립트란 무엇인가

FrontEnd

TypeScript

자바스크립트란?

김동환