728x90
728x90
헷갈리는 for들
한 번에 비교해서 보기 위해 정리한 글입니다. 🤔🤔🤔
출처 - https://jsdev.kr/t/for-in-vs-for-of/2938
| for...in | for..of | foreach |
| 객체의 열거 가능한 모든 속성 | [Symbol.iterator] 속성을 가지는 컬렉션의 요소 |
Array 객체 유사 Array |
<!DOCTYPE html>
<script>
"use strict";
let user = {
name: "냥냥이",
age: 32
};
let arr = [10, 20, 30];
//for (let value of user) {
// alert("for of : " + value); // 에러로 출력안됨. (에러로 아래 코드 진행 안함)
//}
for (let value of Object.values(user)) {
alert(value); // 냥냥이와 32가 연속적으로 출력됨
}
for (let value of arr) {
alert("for of : " + value); // 10, 20, 30이 연속적으로 출력됨
}
for (let value in user) {
alert("for in : " + value); // name과 age가 연속적으로 출력됨
}
for (let value in arr) {
alert("for in : " + value); // 0, 1, 2가 연속적으로 출력됨
}
</script>foreach 함수
foreach 함수(or 메서드)은 오직 Array 객체에서만 사용가능한 메서드입니다. (ES6부터는 Map, Set 등에서도 지원됩니다)
배열의 요소들을 반복하여 작업을 수행할 수 있습니다. foreach 구문의 인자로 callback 함수를 등록할 수 있고, 배열의 각 요소들이 반복될 때 이 callback 함수가 호출됩니다. callback 함수에서 배열 요소의 인덱스와 값에 접근할 수 있습니다.
for …in 반복문
for in 반복문은 객체의 속성들을 반복하여 작업을 수행할 수 있습니다. 모든 객체에서 사용이 가능합니다.
for in 구문은 객체의 key 값에 접근할 수 있지만, value 값에 접근하는 방법은 제공하지 않습니다. 자바스크립트에서 객체 속성들은 내부적으로 사용하는 숨겨진 속성들을 가지고 있습니다. 그 중 하나가 [[Enumerable]]이며, for in 구문은 이 값이 true로 셋팅되어 속성들만 반복할 수 있습니다. 이러한 속성들을 열거형 속성이라고 부르며, 객체의 모든 내장 메서드를 비롯해 각종 내장 프로퍼티 같은 비열거형 속성은 반복되지 않습니다.
for …of 반복문
for of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문입니다.
for of 구문을 사용하기 위해선 컬렉션 객체가 [Symbol.iterator] 속성(직접 명시 가능)을 가지고 있어야만 합니다.
| 객체 | 배열 |
| 키를 가진 데이터 여러 개를 하나의 엔티티에 저장 | 컬렉션에 데이터를 순서대로 저장 |
728x90
728x90
'디자인'do'하는 개발자 > JavaScript' 카테고리의 다른 글
| JavaScript와 Html (0) | 2022.09.20 |
|---|
