forEach함수의 구문
배열의 반복이며, 배열에서만 사용할 수 있는 메서드이다. forEach()는 배열의 처음부터 마지막 요소까지 반복하여 실행하고 인자로 콜백함수를 받아온다. 주어진 콜백함수를 배열 요소 각각에 실행하는 순회방법이 있다. 하지만 forEach()함수는 보통 map()함수와 함께 가장 널리 사용되는 순회방법 중 하나이다.
var arr = ["1", "2", "3"];
// ES6의 화살표 함수를 이용하면 코드를 아주 간결하게 만들 수 있습니다.(가장 자주 쓰는 형태)
arr.forEach(item => {
// item 변수는 배열 각각의 요소들을 순환합니다.
console.log(item);
});
// forEach 함수의 원형 그대로 사용하기
arr.forEach(function(item, index, arr2) {
// item : 배열 각각의 요소
// index : 배열 인덱스
// arr2 : 배열 자체(반복문 돌리는 배열을 통째로 참조해야할 경우 사용)
});
forEach예제)
HTML / CSS
<style>
* {padding: 0; margin: 0; box-sizing: border-box;}
a {text-decoration: none; color: inherit;}
li {list-style: none;}
.gnb > ul {display: flex;}
.gnb > ul > li {padding: 0 10px;}
.gnb > ul > li a {display: inline-block; background: #ccc; border: 1px solid #333; padding: 10px 30px; margin-bottom: 10px;}
.sub{display: none; transition: 0.3s;}
.sub.on {display: block;}
</style>
<div class="wrap">
<nav class="gnb">
<ul>
<li class="open"><a href="#">메뉴1</a>
<ul class="sub">
<li class="slideMenu">메뉴1내용</li>
<div class="close">X</div>
</ul>
</li>
<li class="open"><a href="#">메뉴2</a>
<ul class="sub">
<li class="slideMenu" >메뉴2내용</li>
<div class="close">X</div>
</ul>
</li>
<li class="open"><a href="#">메뉴3</a>
<ul class="sub">
<li class="slideMenu">메뉴3내용</li>
<div class="close">X</div>
</ul>
</li>
</ul>
</nav>
</div>
window.onload = function() {
const Gnb = document.querySelectorAll(".gnb>ul>li");
console.log(Gnb);
Gnb.forEach((item)=>{
console.log(item);
const open = item.querySelector('.open>a');
const sub = item.querySelector('.sub');
const close = item.querySelector('.close');
open.addEventListener('click', () => {
sub.classList.toggle('on'); //open이라는 클래스를 눌러서 안에 콘텐츠sub를 없앨 수 있음
});
close.addEventListener('click', () => {
sub.classList.toggle('on'); // //열린 콘텐츠sub클래스를 눌러서 안에 콘텐츠sub를 사라지게 할 수 있음
});
});
};
for..in함수의 구문
for..in문은 객체의 속성을 반복하기 위해 열거형과 함께 사용되며 ES6에 도입되었다.
var arr = ["1", "2", "3"];
for (var item in arr) {
// item : 배열 각각의 요소
}
for함수의 구문
var arr = ["1", "2", "3"];
for (var i = 0; i < arr.length; ++i) {
// index를 지정하는 전통적인 for문
}
for..of함수의 구문
for..of문 또한 ES6에 도입되었으며, 반복 가능한 객체만 사용할 수 있다.
반복 가능한 객체 목록 - 배열 / 문자열 / Set 객체 / map객체 / NodeList
반복적이지 않은 요소를 넣을 경우, TypeError가 발생함
let arr = [10, 20, 30];
for (let item of arr) {
// item: 배열 각각의 요소
}
forEach로 예제 풀어보기
1) 배열 요소 출력하기
const numbers = [1,2,3,4,5];
numbers.forEach(function(number){
console.log(number);
});
2) 배열 요소를 합산하기
const numbers = [1,2,3,4,5];
let sum = 0;
numbers.forEach(function(number){
sum += number;
});
console.log(sum)
3) 특정 조건을 만족하는 배열 요소
const numbers = [10, 25, 30, 45];
let foundNumber = null;
numbers.forEach(function(number) {
if (number > 30) {
foundNumber = number;
}
});
console.log(foundNumber); // 출력: 45
4) 배열 요소들을 문자열로 변환하여 새로운 배열 생성
const names = ['Alice', 'Bob', 'Charlie'];
const greetings = [];
names.forEach(function(name) {
greetings.push(`Hello, ${name}!`);
});
console.log(greetings); // 출력: ['Hello, Alice!', 'Hello, Bob!', 'Hello, Charlie!']
5) 배열 요소들의 특정 속성을 변경하기
const people = [
{name: 'Alice', age: 30},
{name: 'Bob', age: 25},
{name: 'Charlie', age: 35}
];
people.forEach(function(person) {
person.age += 5; // 모든 사람의 나이를 5살씩 증가시킴
});
console.log(people);
/* 출력:
[
{name: 'Alice', age: 35},
{name: 'Bob', age: 30},
{name: 'Charlie', age: 40}
]
*/
for, forEach의 차이점
-동기와 비동기 : for문은 동기방식이기 때문에 오류가 생기면 위치 이후의 작업이 동작하지 않고 멈춘다. 반면 forEach문은 비동기 방식이기 때문에 멈추지 않고 동작함
-성능차이 : forEach문은 향상된 for문이라고 칭하며, 가변적인 배열이나 리스트 크기를 구할 필요가 없어 복잡한 반복문에 적합하고, 인덱스를 생성하는 for문보다 속도가 빠르다.
-forEach의 단점 : 반복문 내에서 배열이나 리스트 값을 수정/추가가 불가능하며 읽기 전용으로 불러오기 때문에 데이터 수정이 불가능하다. 또한 배열을 역순으로 탐색할 수 없고 순서대로 정보를 가져오기 때문에 역순으로 가져올 방법이 없다는 단점이 있다.
'Javascript > Javascript' 카테고리의 다른 글
[Javascript] 슬라이드 배너 자바스크립트로 다뤄보기 (fadeIn, top, left..) (0) | 2023.12.09 |
---|---|
[Javascript] 자바스크립트로 드롭다운 메뉴 6종류 다뤄보기 (0) | 2023.12.09 |
[Javascript] 코딩 기본 용어 정리(property/array...framework..) (0) | 2023.12.04 |
[Javascript] addEventListener 사용법과 이벤트(Event) 종류 / onClick의 차이 (0) | 2023.12.04 |
[Javascript] 자료형 배열(Array type)과 for문 (0) | 2023.12.04 |