[javascript] for of 문이란 ?

2023. 2. 27. 23:20· HTML-CSS-JavaScript/JavaScript

오늘 배열에 대해 공부하면서 for of 문을 처음 접해보았다. 

for문은 다들 많이 들어보셨겠지만 for of문은 생소하신 분들이 많을 것이다. 

그럼 바로 for of 문에 대해 알아보자 ! 

 

for...of 문은 반복 가능한 객체에서 가져온 일련의 값에 대해 작동하는 루프를 실행합니다. 이 오브젝트는 Array, String, TypedArray, Map, Set, NodeList(및 기타 DOM 컬렉션)와 같은 내장된 인스턴스뿐만 아니라 인수 오브젝트, 생성자 함수에 의해 생성된 생성자 및 사용자 정의 반복 가능한 객체를 포함한다.

 

즉 for of 문은 배열 안의 요소를 다룰 때 사용된다! 

예시를 들어보면 

수로 이루어진 배열에서 짝수로만 이루어진 배열을 다시 생성해야 한다면 ?

function getEvenNumbers(arr) {
  let result = [];
  for (let el of arr) {
    if (el % 2 === 0) {
      result.push(el);
    }
  }
  return result;
  
  getEvenNumbers([1,2,3,4,5,6,7,8]);
  //[2,4,6,8]

 위의 코드를 살펴보면 el 이라는 변수를 사용하고 of 를 쓰고 변수 이름을 사용한다. 그 후 구문을 작성해주면 된다.

for of문과 관련한 문서를 살펴보면 작성방법은 아래와 같이 작성하면 된다. 

for (variable of iterable)
   statement

 

한마디로 for of 를 요약하자면 반복가능한 객체의 요소를 순차적으로 반복실행한다고 생각하면 된다. 

배열에서는 각각의 요소를 첫 번째 요소부터 마지막 요소까지 순차적으로 실행한다고 생각하면 쉽다. 

콘솔로그에서 간단하게 확인해보겠다.

arr 배열을 생성
배열의 요소들이 순차적으로 출력

 

오늘은 이렇게 for of 문을 배열에 적용해보았다. 

 

오늘도 열공 !! 

'HTML-CSS-JavaScript > JavaScript' 카테고리의 다른 글

[javascript] Scope에 대해  (2) 2023.03.02
[javascript] 원시 자료형과 참조 자료형 , 얕은 복사와 깊은 복사  (0) 2023.03.02
[javascript] 배열 join() 사용하기  (0) 2023.02.28
[javascript] 배열 slice() 사용하기  (0) 2023.02.27
[javascript] 자바스크립트 타입 찾기  (0) 2023.02.27
'HTML-CSS-JavaScript/JavaScript' 카테고리의 다른 글
  • [javascript] 원시 자료형과 참조 자료형 , 얕은 복사와 깊은 복사
  • [javascript] 배열 join() 사용하기
  • [javascript] 배열 slice() 사용하기
  • [javascript] 자바스크립트 타입 찾기
배트리버
배트리버
🐾 사람 좋아, 개발 좋아 🐾 궁금한 건 끝까지 파고들고, 배운 건 즐겁게 나누는 개발자의 놀이터
배트리버
리트리버의 개발 놀이터
배트리버
전체
오늘
어제
  • 분류 전체보기
    • 네트워크
    • 기초 셋팅
    • 오늘의 일기
    • 리액트
    • 코테 준비
      • 프로그래머스
      • 백준
    • 코드스테이츠44기 프론트엔드
    • HTML-CSS-JavaScript
      • HTML
      • CSS
      • JavaScript
    • 자료구조&알고리즘
    • TypeScript
    • Git
    • Tip
    • 프로젝트
    • Next.js
    • 트러블슈팅

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 탄스택쿼리
  • BFS
  • 코드스테이츠 블로깅
  • 티스토리챌린지
  • 프로그래머스
  • 코드스테이츠 프론트엔드
  • 자바스크립트 비동기
  • 리액트쿼리
  • 코드스테이츠 회고록
  • 코드스테이츠
  • 네트워크
  • 오블완
  • 리액트
  • 타입스크립트문법
  • 자바스크립트
  • KPT 회고
  • 프로젝트 회고
  • 리액트 상태관리
  • 코드스테이츠 44기
  • 코드스테이츠 44기 프론트엔드

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
배트리버
[javascript] for of 문이란 ?
상단으로

티스토리툴바

단축키

내 블로그

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

블로그 게시글

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

모든 영역

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

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