개발관련/자바스크립트 팁

자바스크립트의 반복문 종류 및 사용법: for, for...in, for...of, forEach

2023. 4. 26. 15:43
목차
  1. 자바스크립트의 반복문 종류 및 사용법
  2. 👉 for문
  3. 👉 for...in문
  4. 👉  for...of문
  5. 👉  forEach문
  6. 👉  추가 예제
  7. 👍 문자열 순회하기
  8. 👍  Map 객체 순회하기
  9. 👍 Set 객체 순회하기
  10. 👍 배열 필터링하기
  11. 👍 성능의 차이
  12. 👉  for
  13. 👉  forEach
  14. 👉  for...of
  15. 👉  for...in
반응형

자바스크립트의 반복문 종류 및 사용법

👉 for, for...in, for...of, forEach

안녕하세요! 오늘은 자바스크립트에서 사용할 수 있는 반복문의 종류와 각각의 사용법에 대해 알아보겠습니다. 자바스크립트에서는 주로 4가지 종류의 반복문을 사용합니다: `for`문, `for...in`문, `for...of`문, 그리고 `forEach`문입니다. 이 포스팅을 통해 각각의 반복문이 어떻게 사용되는지 이해할 수 있을 것입니다.

👉 for문

`for`문은 가장 기본적인 반복문입니다. 반복 횟수가 정해진 경우에 사용하며, 초기값, 조건식, 증감식을 통해 반복문을 제어합니다. 다음은 `for`문의 기본 구조입니다.

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

//예시:
for (let i = 0; i < 5; i++) {
  console.log(i);
}

👉 for...in문

`for...in`문은 객체의 속성들을 순회할 때 사용합니다. 객체의 키를 반환하며, 순서는 보장되지 않습니다. 

다음은 `for...in`문의 기본 구조입니다.

for (변수 in 객체) {
  // 실행할 코드
}

const person = {
  name: "Alice",
  age: 30,
};

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

👉  for...of문

`for...of`문은 배열, 문자열, Map, Set 등 반복 가능한(iterable) 객체를 순회할 때 사용합니다. 객체의 값을 반환합니다. 다음은 `for...of`문의 기본 구조입니다.

for (변수 of 객체) {
  // 실행할 코드
}

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

for (const number of numbers) {
  console.log(number);
}

 

👉  forEach문

`forEach`문은 배열 전용 메서드로, 배열의 각 요소에 대해 지정한 함수를 실행합니다. 다음은 `forEach`문의 기본 구조입니다.

배열.forEach(function(요소, 인덱스, 배열) {
  // 실행할 코드
});

const fruits = ["apple", "banana", "cherry"];

fruits.forEach(function(fruit, index) {
  console.log(`${index + 1}. ${fruit}`);
});


이상으로 자바스크립트의 반복문 종류와 사용법에 대해 설명했습니다. 각각의 반복문을 적절한 상황에 맞게 사용하면 코드의 가독성과 효율성을 높일 수 있습니다. 다음은 각 반복문을 활용한 추가 예제입니다.

 

👉  추가 예제

👍 문자열 순회하기

const text = "Hello, JavaScript!";

for (const char of text) {
  console.log(char);
}

 

👍  Map 객체 순회하기

const mapData = new Map([
  ["apple", 3],
  ["banana", 2],
  ["orange", 5],
]);

for (const [key, value] of mapData) {
  console.log(`${key}: ${value}`);
}

 

👍 Set 객체 순회하기

const setData = new Set(["apple", "banana", "orange"]);

for (const value of setData) {
  console.log(value);
}

 

👍 배열 필터링하기

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const evenNumbers = [];

numbers.forEach(function(number) {
  if (number % 2 === 0) {
    evenNumbers.push(number);
  }
});

console.log(evenNumbers); // [2, 4, 6, 8]
반응형

👍 성능의 차이

반복문의 성능 차이는 상황과 사용하는 데이터에 따라 다소 차이가 있을 수 있습니다. 일반적으로 for문은 가장 빠른 반복문으로 알려져 있지만, 이것이 모든 경우에 대해 항상 최적의 성능을 보장하지는 않습니다.

예를 들어, 배열에 대한 순회에서는 for문이 forEach, for...of보다 빠르지만, 이 차이는 대부분의 경우 실제 애플리케이션에서 미미한 성능 차이로 나타납니다. 따라서 코드의 가독성과 유지 관리 측면에서 더 나은 방법인 forEach나 for...of를 사용하는 것이 권장됩니다.

성능 차이가 중요한 상황에서는 다음과 같은 점을 고려하여 반복문을 선택하세요:

👉  for

for문은 일반적으로 가장 빠른 반복문이지만, 코드의 가독성이 떨어질 수 있습니다.

👉  forEach

forEach는 배열 전용 메서드로, 코드의 가독성이 좋지만, break나 continue를 사용할 수 없습니다.

👉  for...of

for...of는 반복 가능한 객체를 순회할 때 사용하며, 코드의 가독성이 좋고 break나 continue를 사용할 수 있습니다.

👉  for...in

for...in은 객체의 속성을 순회할 때 사용하며, 배열에 사용하는 것은 비효율적이므로 주의해야 합니다.


결론적으로, 성능 차이가 크게 중요하지 않은 경우에는 코드의 가독성과 유지 관리를 위해 forEach, for...of와 같은 방식을 사용하는 것이 좋습니다. 성능이 중요한 상황에서는 상황에 맞는 반복문을 선택하여 사용하세요. 그러나 대부분의 경우, 성능 차이보다는 가독성과 유지 관리 측면을 더욱 고려해야 할 것입니다.

 

이 글을 통해 자바스크립트의 다양한 반복문을 이해하고 사용할 수 있게 되었기를 바랍니다. 프로젝트를 진행하면서 상황에 따라 적절한 반복문을 사용하여 코드의 가독성과 효율성을 높여보세요. 이상으로 자바스크립트 반복문에 대한 포스팅을 마치겠습니다. 감사합니다!

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'개발관련 > 자바스크립트 팁' 카테고리의 다른 글

자바스크립트를 예로 들어서 의존성 역전 원칙(Dependency Inversion Principle, DIP)  (0) 2023.07.10
자바스크립트의 실행 컨텍스트, Lexical Environment 및 관련 컨셉 이해하기  (0) 2023.05.18
자바스크립트 배열 유니크 요소만 남기기 , 중복 제거 하기  (0) 2023.04.13
error TS2322: Type 'Timeout' is not assignable to type 'number' 해결 방법  (0) 2023.03.15
yarn pnp Zero-Installs란?  (0) 2022.09.15
  1. 자바스크립트의 반복문 종류 및 사용법
  2. 👉 for문
  3. 👉 for...in문
  4. 👉  for...of문
  5. 👉  forEach문
  6. 👉  추가 예제
  7. 👍 문자열 순회하기
  8. 👍  Map 객체 순회하기
  9. 👍 Set 객체 순회하기
  10. 👍 배열 필터링하기
  11. 👍 성능의 차이
  12. 👉  for
  13. 👉  forEach
  14. 👉  for...of
  15. 👉  for...in
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
개발자 Dane
개발자 Dane
IT / 테크 전문 크리에이터 데인 입니다.
개발자 Dane
개발자 Dane의 IT 전문 블로그
개발자 Dane
반응형
  • 분류 전체보기 (170)
    • 개발관련 (24)
      • 프론트엔드 지식 (11)
      • 매일 코딩 테스트 챌린지 (27)
      • 자바스크립트 팁 (32)
      • 리액트 (11)
    • 얼리어답터 (11)
    • 팁 (13)
    • 게임 (18)
      • 디아블로2레저렉션 (16)
    • 운동하는 후니 (2)
전체
오늘
어제

태그

  • vscode
  • 문자열정렬
  • s3
  • 리액트
  • 바바리안
  • 디아블로4
  • 자바스크립트
  • 문자열
  • 룬워드방패
  • 갤럭시성능뻥튀기
  • 갤럭시소비자기만
  • AWS
  • yarn
  • gos
  • javascript
  • 디아블로2
  • 애플페이
  • 레저렉션
  • 아이폰
  • docker
  • PNP
  • React
  • 갤럭시긱벤치
  • 코딩테스트
  • 프로그래머스
  • Gatsby
  • GOS해제
  • 도커
  • Next.js
  • 디아블로2레저렉션

최근 댓글

hELLO · Designed By 정상우.
개발자 Dane
자바스크립트의 반복문 종류 및 사용법: for, for...in, for...of, forEach
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.