반복문) while문과 for문, forEach메서드

안녕하세요 찐망고입니다.

자바스크립트에서 가장 중요한 두가지는 조건문과 반복문이라고 생각하는데요

반복문(loop)은  "어떤 내용이 true인 동안은 계속 이걸 실행해" 라고 말하는 겁니다.

 

while반복문

가장 간단한 반복문은 while반복문인데요.

while반복문은 주어진 조건이 true로 있는 동안은 실행 코드를 반복해서 실행합니다.

그 조건이 false가 되면 하던 일을 중단해가 포함되고 있죠

while(조건식) {
	console.log("코드실행") // 실행문
    i++; // 증가감식
}

 

for문

for반복문을 사용하면 반복문에 사용할 변수를 만들고 조건이 false가 될 때까지 계속 반복합니다.

for(초기값; 조건식; 증가감식;) {
	실행문;
}

반복문은 초기 값을 기준으로 조건식을 실행합니다

그 조건식이 true일때 실행문이 실행되고 초기값에서 증가감식을 만나서 또 조건식을 실행합니다.

역시 true일때 실행문이 실행되고 그걸 반복하고 false가 나올때까지 반복되는 거죠

 

반복문 하면 구구단 이런거 많이 만들어보고..

//구구단 2단, 3단 table로 출력
let table = '<table>';

for (let i = 2; i <= 9; i++) {
    table += '<tr>';
    for (let j = 1; j <= 9; j++) {
        // table += '<td>' + i + '*' + j + '=' + i * j + '</td>';
        table += `<td>${i}*${j}=${i*j}</td>`
    }
    table += '</tr>';
}

table += '</table>'
document.write(table)

 

반복문안에 조건문을 같이 넣어서 사용할 수 있어요

//4의 배수이면서 8의 배수찾기
let nums = '4와 8의 공배수는 ';
for (let i = 1; i <= 100; i++) {
    if (i % 4 === 0 && i % 8 === 0) {
        nums += i + ' ';
    }
}
console.log(nums)

 

그리고 반복문에 break구문을 넣고 중간에 멈출 수도 있죠

let nums = '4와 8의 공배수는 ';
let limitNum = 40;

for (let i = 1; i <= 100; i++) {

    if (i % 4 === 0 && i % 8 === 0) {
        nums += i + ' ';

        if (i === limitNum) {
            break;
        }
    }
}
console.log(nums)

 

continue구문을 넣어서 건너뛸 수도 있어요

특정조건을 만족했을 때 그 해당하는 값만 건너뛰거든요.

let nums = '4의 배수는 ';
let num = 0;

for (let i = 1; i <= 10; i++) {

    if (i % 4 === 0) {
        nums += i + ' ';
        continue; // 4와 8은 건너뛰겠다
    }
    num += i; // 0,1,2,3,5,6,7,9,10
}
console.log(num, nums)

 

HTML에서 우리가 네비게이션도 만들구

탭도 만들고 하잖아요 그때 이 반복문이 중요한 역할을 하는데요

그건 바로 배열을 순회할 수 있어요

for문

const animals = ["사자", "고양이", "삵", "칡"];

for (let i = 0; i < animals.length; i++) {
  console.log(`고양이과 동물들 ${animals[i]} 함정이 있는 것 같아요`);
}

const animal = "사자인가고양이인가" 

for (let i = 0; i < animal.length; i++) {
  console.log(`저는어떤글자가포함되어있나요${animal[i]}`);
}

 

forEach메서드

forEach는 es5에서 추가된 배열의 각 요소에 대한 콜백함수를 실행하는 메서드인데요

배열의 각 요소에 대해 지정된 함수를 실행한다는 뜻이에요.

배열의 크기만큼 반복하며, 반복 과정에서 현재 요소의 값을 매개변수로 받아 지정된 함수를 실행합니다.

배열의 모든 요소에 대해 순차적으로 작업을 하는데 주로 사용 됩니다.

배열.forEach(function(요소, 인덱스, 배열) {
	// 요소에 대한 작업 수행
})

요소는 현재 반복되고 있는 배열의 요소이고, 인덱스는 현재요소의 인덱스, 배열은 forEach가 호출된 배열 자체를 말해요

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
    console.log(number);
});

// 1, 2, 3, 4, 5

네비게이션 메뉴를 만들거나 탭을 만들 때 많이 사용하는 메서드에요.

break문을 사용하여 반복을 중지할 수는 없고, 모든 요소를 반복하고 완료합니다.

 

for...of문

for...of문은 ES6에서 추가된 문법으로 더 간결한 코드를 작성할 수 있는데요

각 반복마다 이터러블 객체의 요소 값을 반복 변수에 할당하고 반복문의 코드를 실행하죠

이렇게 할당된 반복 변수를 통해 각 요소에 접근할 수 있어요.

for문과 같이 break문을 사용하여 반복을 중지할 수 있고 배열요소에 직접 접근할 수 있고

인덱스나 조건을 따로 다룰 필요도 없죠~

for (변수 선언 of 이터러블객체) {
	// 반복 실행될 코드블록
}

변수선언은 반복마다 현재 요소의 값을 저장할 변수를 선언하고

이터러블객체는 반복할 대상인 배열 또는 이터러블 객체를 지정합니다.

const numbers = [1, 2, 3, 4, 5];

for(const element of numbers) {
    console.log(element);
}
// 1, 2, 3, 4, 5

 

 

 

*이터러블(iterable)객체

 - 반복 가능한 객체로, 일련의 값을 순회할 수 있는 자료 구조 인데요.
내부적으로 'symbol.iterator'라는 특별한 메서드를 가지며, 이 메서드는 이터레이터를 반환합니다.
간단히 말해, 이터러블 객체는 배열과 같이 여러 개의 값을 가지고 순회할 수 있는 객체입니다.

몇가지 예시를 볼까요

1. 배열(Array)

const arr = [1, 2, 3];

배열은 여러개의 값을 가지고 있고, 'arr[0]', 'arr[1]', 'arr[2]' 와 같은 인덱스를 통해 각 요소에 접근 할 수 있죠
배열은 이터러블 객체 입니다.

2. 문자열(String)

const str = 'Hello';

문자열은 여러 개의 문자로 구성되어 있고, 'str[0]', 'str[1]', 'str[2]'와 같은 인덱스를 통해 각 문자에 접근할 수 있습니다.

문자열도 이터러블 객체입니다.

 

3. Set

const set = new Set([1, 2, 3]);

Set은 중복되지 않는 값의 집합이며, Set 객체도 이터러블 객체입니다. 

Set은 순서가 유지되는 값을 가지고 있으며, for...of 반복문을 사용하여 순회할 수 있습니다.

 

이 외에도 많은 자료구조와 객체가 이터러블 객체입니다. 

이터러블 객체의 중요한 특징은 for...of반복문을 사용하여 순회할 수 있다는 점이죠~~