for...in과 for...of가 헷갈린다면 for...in의 in으로 구분해서 기억하자.
in은 '내부의' 라는 뜻으로 객체의 속성을 열거하는 데 사용한다고 기억하고
of는 '각각의'라는 뜻으로 기억하고 요소나 값을 순회한다고 생각하면 쉽다.
for...in
자바스크립트에서 객체의 속성을 반복하는데 사용되는 루프로
객체의 모든 열거 가능한 속성에 대해 반복하며 각 속성의 키를 변수에 할당한다.
for(const key in object){
}
여기서 key는 객체의 속성인 키를 나타내는 변수이고 object는 객체
const person = {
name: 'John',
age: 30,
city: 'New York'
};
for(const key in person){
console.log(key+":"+person[key]);
}
// name:John age:30 city:New York이 순서대로 출력된다.
for...of
자바스크립트에서 배열 또는 iterable 객체의 각 요소를 반복적으로 순회하기 위해 사용되는 반복문.
for(variable of iterable){
}
variable은 현재 반복요소에서 값을 할당받는 변수,
iiterable은 반복가능한 객체로 array, string, set, map, nodelist 가 될 수 있다.
for of 루프는 반복 가능한 객체의 각 요소에 대해 반복 실행되며
반복순서는 해당 객체의 순서에 따라 결정된다.
배열의 경우 인덱스 순서대로 반복이 수행된다.
const arr=[1,2,3,4,5];
for (const element of arr){
console.log(element);
}
//1 2 3 4 5 순서대로 출력된다.
'01_PROJECT > OBJECT _2023' 카테고리의 다른 글
[ JavaScript ] 요소의 크기나 위치를 알 수 있는 getBoundingClientRect() (0) | 2023.08.03 |
---|---|
[ JavaScript ] substr() is deprecated -> substring() 문자열 일부 추출하기 (0) | 2023.08.02 |
[ JavaScript ] 이벤트 핸들러를 등록할 때 ()빼고 함수명만 적기 (0) | 2023.08.02 |
[ JavaScript ] replace와 정규식을 사용해서 해당 문자 대체하기(제거하기) (0) | 2023.08.02 |
[ CSS ] font-size (폰트 사이즈) rem 과 em이 뭐죠? (0) | 2023.08.02 |