JAVASCRIPT

자바스크립트 for문을 알아보자!!

김도현2 2023. 2. 23. 18:48
반응형

 

 

자바스크립트(JavaScript) for을 알아봅시다. 

그 외로 [짝수 홀수 구별하는 코드] 도 알아볼겁니다!

 

 

 

1. for문

 

for문은 가장 일반적으로 사용되는 반복문 중 하나입니다.

주어진 횟수만큼 반복하여 코드를 실행합니다.

 

 

for (초기식; 조건식; 증감식) {
  // 코드
}

 

  • 초기식: 반복문이 시작될 때 한 번만 실행되는 초기화 코드입니다.
  • 조건식: 반복문이 실행될 때마다 평가되는 조건식입니다. 조건식이 true이면 코드 블록이 실행되고, false이면 반복문이 종료됩니다.
  • 증감식: 코드 블록이 실행된 후에 실행되는 코드입니다. 주로 반복 변수의 값을 증가시키거나 감소시키는데 사용됩니다.

 

예시)

for (var i = 0; i < 10; i++) {
  console.log(i);
}
// 출력결과: 0 1 2 3 4 5 6 7 8 9

 

위 코드에서 초기식으로 변수 i를 0으로 초기화하고, 조건식으로 i가 5보다 작을 때까지 반복하도록 설정합니다.

그리고 증감식으로 i를 1씩 증가시키면서 반복문을 실행합니다.for문은 반복 횟수가 정해져 있을 때 유용하게 사용됩니다.

또한, 배열이나 객체와 같은 자료구조를 다룰 때에도 자주 사용됩니다.

이때 for문을 이용하여 배열이나 객체의 모든 요소를 순회하면서 작업을 수행할 수 있습니다.

초기값이 0이기 때문에 출력결과는 0부터 시작하는걸 알수있습니다.

 
 

 

 

 

 

 

2. forEach문

 

forEach() 메서드는 배열의 각 요소마다 지정된 함수를 실행하는 반복문입니다. 배열의 요소를 순회하며 요소 하나씩을 함수의 인자로 전달합니다.

 

배열.forEach(function (요소, 인덱스, 배열) {
  // 코드
});
  • 요소: 배열의 현재 요소 값
  • 인덱스: 배열의 현재 요소 인덱스
  • 배열: forEach() 메서드가 호출된 배열

 

예시)

var arr = [1, 2, 3, 4, 5];

arr.forEach(function (element) {
  console.log(element);
});
// 출력결과: 1 2 3 4 5

 

위 코드에서 forEach() 메서드를 호출하면 배열 arr의 모든 요소를 순회하면서 인자로 전달한 콜백 함수를 실행합니다.

각 요소는 콜백 함수의 첫 번째 인자인 element로 전달되며, 콜백 함수에서는 이를 이용하여 요소를 출력합니다.

 

forEach() 메서드는 반복문을 작성할 때 일반적으로 사용되며, for문과 달리 초기식, 조건식, 증감식 등을 작성할 필요가 없습니다. 또한, 배열 요소를 수정하거나 삭제하는 작업을 할 때는 map() 메서드를 사용하는 것이 좋습니다.

 

 

 

 

3. for...in문

for...in 문은 객체의 속성을 순회하며 해당 속성에 대한 작업을 반복적으로 수행하는 데 사용됩니다.

객체의 프로퍼티를 순회하면서 해당 프로퍼티의 이름을 변수로 가져와서 작업을 수행할 수 있습니다.

 

 

for (변수 in 객체) {
  // 코드
}
  • 변수: 객체의 프로퍼티 이름이 변수에 할당됩니다.
  • 객체: for...in 문이 순회할 객체입니다.

 

 

예시) 

var obj = {
  name: 'John',
  age: 30,
  gender: 'male'
};

for (var prop in obj) {
  console.log(prop + ': ' + obj[prop]);
}
//결과값:
name: John
age: 30
gender: male

 

위 코드에서는 for...in 문을 사용하여 obj 객체의 모든 속성을 순회하면서 prop 변수에 해당 속성의 이름을 할당하고, obj[prop]으로 해당 속성의 값을 가져와서 출력합니다.

for...in 문은 객체의 모든 속성을 순회하기 때문에, 상속된 속성도 포함하여 순회할 수 있습니다.

이러한 특성 때문에 for...in 문은 객체를 순회할 때 매우 유용합니다.

그러나, for...in 문은 객체의 속성이나 메서드를 순회할 때 순서를 보장하지 않습니다.

따라서, 순서가 중요한 경우에는 for...in 문 대신 다른 방법을 사용해야 합니다.

 

 

 

 

4. for...of문

for...of 문은 JavaScript에서 새로 추가된 반복문 중 하나로, 배열이나 iterable 객체의 요소들을 순회(iterate)할 수 있도록 도와줍니다.

일반적인 for문과는 달리, for...of문은 인덱스를 사용하지 않고 객체의 값을 직접 사용합니다.

이러한 특성 때문에 코드를 더욱 간결하고 가독성이 좋게 만들어 줍니다.

 

for (variable of iterable) {
  // code block to be executed
}

 

여기서 variable은 현재 요소의 값을 할당할 변수이며, iterable은 배열 또는 iterable 객체입니다.

for...of문은 iterable 객체의 Symbol.iterator 메서드를 사용하여 요소를 가져옵니다.

 

 

 

const arr = [1, 2, 3];

for (const num of arr) {
  console.log(num);
}

// 결과:
// 1
// 2
// 3

 

위의 코드에서 arr은 배열이며, num은 for...of문에서 현재 요소의 값을 할당할 변수입니다.

따라서 for...of문을 실행하면 배열의 모든 요소를 순회하면서 각 요소의 값을 출력합니다.

 

 

 

 

 

 

5. 짝수 홀수 구별하는 프로그램 만들기

사용자가 숫자를 입력하면 그 숫자가 짝수인지 홀수인지 구별하는 프로그램을 만들어보겠습니다.

 

 

let userNumber = prompt("숫자 입력하세요.");

if(userNumber !== null) {		//취소 버튼을 누를시 null저장
    userNumber = parseInt(userNumber);	//null이 아닐시 정수로 변환
    (userNumber % 2 === 0) ? alert (`${userNumber} : 짝수`) : alert(`${userNumber} : 홀수`); 
}					//숫자를 2로 나눴을때 몫이0일경우 짝수

 

3번째 줄은 사용자가 입력창에서 [취소] 버튼을 클릭했는지 확인합니다.

만약 취소버튼을 누르면 변수에는 null이 저장되어 입력창이 꺼집니다.

반대로 null이 아닐경우 입력값을 숫자로 변환합니다.

 

밑에선 조건문을 사용해 입력값을 2로 나누어 몫이 0인경우 짝수, 그 외는 홀수로 출력이 됩니다.

 

 

 

 

 

이렇게 해서 for문이 어떤 종류가 있고 무엇인지를 살펴봤습니다!!

봐도봐도 어렵지만 쓰다보면 익숙해지겠죠...