일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- 실행컨텍스트 동작과정
- npm 에러
- 실행컨텍스트콜스택
- 노마드코더
- 전역상태
- 그래머인유즈
- 실행컨텍스트 면접
- 고차함수
- CORS
- CLI
- 영어공부
- Mini Node Server
- 객체
- Block
- state hook
- 실행컨텍스트 실행과정
- .current
- 실행컨텍스트스택
- useRef역할
- 개발공부
- 실행컨텍스트자바스크립트
- 영어
- 알고리즘
- styled-component
- 로컬상태
- css
- 실행컨텍스트란
- html
- 개발일기
- .env
- Today
- Total
오늘도 삽질중
객체,배열 반복(for...of, for...in) 본문
<목차>
- 객체와 배열의 반복 공통점
- 객체의 반복(for ...in)
- 배열의 반복(for ...of)
객체와 배열의 반복 공통점
- 순회 할 객체의 길이만큼 반복을 한다.
객체 반복문(for ...in)
---> 뽀잉뽀잉(for in for in)
- 객체의 속성들을 반복하여 작업을 수행한다.
- for ... in 구문은 객체의 key값에 접근이 가능하지만, value 값에는 접근 불가능하다. (따라서 value 값에 접근하려면 key값을 이용해야함)
const obj = {
a: 1,
b: 2,
c: 3,
};
for (let key in obj){ // 여기서 선언된 key는 임의의 변수로 이름 아무거나 지어도 된다.
console.log(key, obj[key]);
}
< for..in 좀 더 들여다 보기 >
- for...in 은 특정 순서에 따라 인덱스를 반환하는것을 보장할 수 없다. for...in 반복문은 정수가 아닌 이름을 가진 속성, 상속된 모든 열거 가능한 속성들을 반환한다.
- 반복되는 순서는 구현에 따라 다르기 때문에 배열의 반복이 일관된 순서로 요소를 방문하지 못할 수도 있다. 따라서 방문의 순서가 중요한 배열의 반복시에는 숫자 인덱스를 사용할 수 있는 for 반복문을 사용하는것이 좋다. (혹은Array.prototype.forEach(), for...of를 권장한다.)
-for..in은 객체의 반복을 위해 만들어 졌지만, 배열의 반복을 위해서는 추천되지 않는다. Array.prototype.forEach(), for...of 도 있는데 왜 굳이 for...in을 사용할까?
보통 쉽게 객체의 속성을 확인(콘솔이나 다른 방법으로 출력)할 수 있기 때문에 실질적으로 디버깅을 위해 사용될 수 있다. 배열이 데이터의 저장에 있어서는 더 실용적이지만, 키-값 쌍이 선호되는 데이터의 경우 (속성이 'key'의 역할을 함) 특정 값을 가진 키가 있는지 확인하려는 경우에 for ...in을 사용할 수 있다.
(출처:mdn)
배열의 반복(for ...of)
- 배열의 길이만큼 반복을 한다.
-반복가능한 객체(Array,Map,String,Set...)등에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성한다. (출처:mdn)
- 각 반복에 서로 다른 속성값이 el(아래 코드예시로)에 할당된다.
<array>
const array = ['a','b','c'];
for (const el of array) {
console.log(el);
}
// 'a'
// 'b'
// 'c'
<string>
let tata = 'boo';
for (let el of tata) {
console.log(el);
}
//'b'
//'o'
//'o'
<map>
let tata = new Map([['a',1], ['b',2], ['c',3]]);
for (let el of tata) {
console.log(el);
}
// [a,1]
// [b,2]
// [c,3]
for (let [key, value] of tata) {
console.log(value);
}
// 1
// 2
// 3
'[Js Node] > 배열, 객체' 카테고리의 다른 글
객체 (object) (0) | 2021.09.06 |
---|