javascript each()란?

javascript each()란?

 

자바스크립트의 `each()` 함수는 배열 또는 객체의 각 요소나 속성을 반복적으로 처리하는 함수입니다. 하지만, 기본 자바스크립트에는 `each()` 함수가 내장되어 있지 않습니다. 대신, 주로 라이브러리인 jQuery에서 제공하는 `$.each()` 함수를 사용합니다. 이 함수는 배열이나 객체를 반복하면서 각 요소나 속성에 대해 지정된 콜백 함수를 실행합니다.

여기서는 jQuery의 `$.each()` 함수에 대해 자세히 설명하고, 간단한 예제를 통해 사용 방법을 살펴보겠습니다.

 

먼저, jQuery 라이브러리를 HTML 문서에 추가해야 합니다. 일반적으로 CDN을 통해 jQuery를 가져옵니다. 아래는 jQuery를 사용하기 위한 `<script>` 태그입니다.

 

```html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
```

이제 jQuery를 사용하여 `$.each()` 함수를 사용할 수 있습니다. `$.each()` 함수는 다음과 같은 구문을 가집니다.

 

```javascript
$.each(collection, callback);
```

 

여기서 `collection`은 반복할 배열 또는 객체이고, `callback`은 각 요소나 속성에 대해 실행될 함수입니다. 콜백 함수는 인덱스(배열의 경우) 또는 속성명(객체의 경우)과 해당 요소나 속성의 값을 인자로 받습니다.

이제 간단한 예제를 살펴보겠습니다. 다음은 배열의 각 요소를 출력하는 예제입니다.

 

```javascript
const fruits = ['사과', '바나나', '딸기'];

$.each(fruits, function(index, fruit) {
  console.log(`인덱스 ${index}: ${fruit}`);
});
```

위 코드에서는 `fruits` 배열의 각 요소를 순회하면서 각 요소와 인덱스를 출력하는 콜백 함수를 정의하여 `$.each()` 함수에 전달합니다. 출력 결과는 다음과 같습니다.

```
인덱스 0: 사과
인덱스 1: 바나나
인덱스 2: 딸기
```

배열 대신 객체를 순회하는 경우도 동일한 방식으로 할 수 있습니다. 다음은 객체의 각 속성을 출력하는 예제입니다.

 

```javascript
const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

$.each(person, function(key, value) {
  console.log(`${key}: ${value}`);
});
```

반응형

위 코드에서는 `person` 객체의 각 속성과 값을 출력하는 콜백 함수를 정의하여 `$.each()` 함수에 전달합니다. 출력 결과는 다음과 같습니다.

```
name: John
age: 30
city: New York
```

`$.each()` 함수를 사용하면 배열이나 객체를 반복하면서 각 요소나 속성에 대해 원하는 작업을 수행할 수 있습니다. 이것은 특히 배열이나 객체를 처리해야 하는 경우 유용합니다. 그러나 최신 자바스크립트에는 `forEach()`와 `for...of`와 같은 내장된 반복 메서드가 있으므로 jQuery를 사용하지 않고도 반복 작업을 수행할 수 있습니다.