2022. 5. 25. 17:10ㆍProgram/JavaScript
046_자바스크립트 배열(Array) 요소 다루기
[적용 1]
- 배열 요소의 데이터를 처리하고 싶을 때
[문법]
| 구문 | 의미 |
| 배열.forEach(콜백함수) | 배열의 요소 데이터 콜백 함수로 실행 |
| ([요소*], [인덱스*], [기존배열*]) => { } | 요소, 인덱스, 기존 배열을 사용해 처리 |
* 생략 가능
[내용]
여러 데이터를 다루는 배열은 루프 처리, 반복 처리 등 각 요소를 일괄적으로 처리하는 경우가 많다.
forEach()는 주어진 콜백(Callback) 함수를 사용해 배열의 요소를 순서대로 처리한다.
콜백 함수는 해당 요소 데이터, 인덱스, 기존 배열 정보를 가져온다.
콜백 함수에서 인덱스와 기존 배열 정보는 생략할 수 있다.
const array = ['딸기', '귤', '사과'];
array.forEach((value, index) => {
// 인덱스와 값을 순서대로 출력
console.log(index, value); // 0 '딸기', 1 '귤', 2 '사과' 순서로 출력
});
forEach()는 for, for...of의 루프와 달리 map(), filter() 등의 반환값을 그대로 루프 처리 할 수 있는 것이 특징이다.
[1, 2, 3, 4, 5, 6, 7, 8]
// 짝수의 배열을 생성
.filter((value) => value % 2 === 0)
// 배열의 짝수 값을 처리
.forEach((value) => {
console.log(value);
});
// 결과: 2, 4, 6, 8 이 출력
[예시 1]
API 등을 통해 가져오는 유저 데이터 배열을 루프 처리하여 HTML에 출력하는 샘플을 확인해 보자.
유저 데이터는 객체 타입이며, id, name, address의 속성을 가지고 있다.
HTML index.html
<body>
<h2>유저 리스트</h2>
<div class="container"></div>
</body>JavaScript main.js
// API 등을 통해 가져오는 출력용 데이터 배열
const userList = [
{ id: 1, name: '곰', address: '서울' },
{ id: 2, name: '여우', address: '대전' },
{ id: 3, name: '사자', address: '부산' }
];
// 컨테이너
const container = document.querySelector('.container');
// userList 배열의 각 요소별 루프 처리
userList.forEach((userData) => {
// 각 요소 데이터를 쓰기
container.innerHTML += `
<div class="card">
<h3>${userData.name}</h3>
<p>지역: ${userData.address}</p>
</div>
`;
});
실행결과
[적용 2]
- 배열의 각 요소 데이터를 처리하고 싶을 때
- 배열의 루프 처리 중 요소의 인덱스가 불필요할 때
[문법]
| 구문 | 의미 |
| for (const 요소 of 배열) {} | for...of 루프 처리 |
* 생략 가능
[내용]
배열은 Iterable 객체이므로, for...of문의 처리가 가능하다.
const array = ['딸기', '귤', '사과'];
// 배열의 각 요소별 루프 처리
for (const value of array) {
console.log(value);
}
// 결과: '딸기', '귤', '사과'가 순소대로 출력됨
[적용 3]
- 배열의 각 요소 데이터를 처리하고 싶을 떄
- 배열의 루프 처리 중 요소의 인덱스가 필요할 때
[문법]
| 구문 | 의미 |
| for (let i = 0; i < 배열길이; i++) {} | for...of 루프 처리 |
* 생략 가능
[내용]
for문을 사용한 배열의 루프 처리를 확인해 보자
const array = ['딸기', '귤', '사과'];
// 배열의 길이 가져오기
const arrayLength = array.length;
// 배열의 요소 데이터 처리
for (let i = 9; i < arrayLength; i++) {
// 인덱스 i의 요소 출력
console.log(array[i]); // '딸기', '귤', '사과' 순서로 출력됨
}
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 배열(Array) 요소 삭제하기 (0) | 2022.05.26 |
|---|---|
| [JavaScript] 자바스크립트 배열(Array) 요소 추가하기 (0) | 2022.05.26 |
| [JavaScript] 자바스크립트 배열(Array) 길이(갯수) 확인하기 (0) | 2022.05.25 |
| [JavaScript] 자바스크립트 배열(Array) 정의하기 (0) | 2022.05.25 |
| [JavaScript] 자바스크립트 문자열 디코드(Decode) 하기 (0) | 2022.05.24 |