# 자바스크립트에서 자주 사용하는 배열 및 객체 관련 메서드 정리

자바스크립트에서 배열과 객체는 가장 많이 사용되는 데이터 구조입니다. 이번 글에서는 배열과 객체를 다룰 때 유용한 메서드들을 정리해보겠습니다.

---

## 1. 배열(Array) 관련 메서드

### 1) `push()` & `pop()`
- 배열의 끝에 요소를 추가(`push`)하거나 제거(`pop`)

```js
let fruits = ["Apple", "Banana"];
fruits.push("Cherry"); // ["Apple", "Banana", "Cherry"]
fruits.pop(); // ["Apple", "Banana"]
```

### 2) `shift()` & `unshift()`
- 배열의 앞에서 요소를 제거(`shift`)하거나 추가(`unshift`)

```js
let numbers = [2, 3, 4];
numbers.unshift(1); // [1, 2, 3, 4]
numbers.shift(); // [2, 3, 4]
```

### 3) `map()`
- 배열의 각 요소를 변환하여 새로운 배열 반환

```js
let numbers = [1, 2, 3];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]
```

### 4) `filter()`
- 특정 조건을 만족하는 요소만 필터링하여 새로운 배열 반환

```js
let numbers = [10, 20, 30, 40];
let greaterThan20 = numbers.filter(num => num > 20);
console.log(greaterThan20); // [30, 40]
```

### 5) `reduce()`
- 배열을 순회하며 누적 연산 수행

```js
let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 10
```

### 6) `find()` & `findIndex()`
- 특정 조건을 만족하는 첫 번째 요소 찾기(`find`) 또는 인덱스 반환(`findIndex`)

```js
let users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" }
];
let user = users.find(user => user.id === 2);
console.log(user); // { id: 2, name: "Bob" }
```

### 7) `some()` & `every()`
- 배열 요소 중 일부(`some`) 또는 전체(`every`)가 조건을 만족하는지 확인

```js
let numbers = [2, 4, 6, 8];
console.log(numbers.some(num => num > 5)); // true
console.log(numbers.every(num => num > 5)); // false
```

### 8) `sort()` & `reverse()`
- 배열 정렬(`sort`) 및 순서 뒤집기(`reverse`)

```js
let numbers = [4, 2, 8, 1];
numbers.sort((a, b) => a - b); // [1, 2, 4, 8]
numbers.reverse(); // [8, 4, 2, 1]
```

---

## 2. 객체(Object) 관련 메서드

### 1) `Object.keys()` & `Object.values()` & `Object.entries()`
- 객체의 키, 값, 키-값 쌍을 배열로 반환

```js
let person = { name: "Alice", age: 25 };
console.log(Object.keys(person)); // ["name", "age"]
console.log(Object.values(person)); // ["Alice", 25]
console.log(Object.entries(person)); // [["name", "Alice"], ["age", 25]]
```

### 2) `Object.assign()`
- 객체 복사 및 속성 병합

```js
let obj1 = { a: 1, b: 2 };
let obj2 = { b: 3, c: 4 };
let merged = Object.assign({}, obj1, obj2);
console.log(merged); // { a: 1, b: 3, c: 4 }
```

### 3) 객체를 배열화하여 순회하기
객체의 키-값 쌍을 배열로 변환하여 순회하는 방법입니다.

```js
let person = { name: "Alice", age: 25, city: "New York" };

Object.entries(person).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});
```

출력 결과:
```plaintext
name: Alice
age: 25
city: New York
```

### 4) `JSON.stringify()` & `JSON.parse()`
- 객체를 JSON 문자열로 변환(`stringify`), JSON 문자열을 객체로 변환(`parse`)

```js
let person = { name: "Alice", age: 25 };
let jsonString = JSON.stringify(person);
console.log(jsonString); // '{"name":"Alice","age":25}'

let parsedObject = JSON.parse(jsonString);
console.log(parsedObject); // { name: "Alice", age: 25 }
```



배열, 객체관련 메서드

배열, 객체관련 자주사용하는 메서드 정리

# 자바스크립트 기본 개념

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

---

## 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("버튼 클릭됨!");
});
```



게시글 리스트

배열, 객체관련 메서드

자바스크립트란?