220703 TIL

Parker.Park·2022년 7월 3일

TIL

목록 보기

27/39

220703 TIL

벌써 메인 프로젝트가 끝난지도 1달이 다 되었다. 프로젝트를 다시 공부하리라 마음을 먹었던거 같은데 알고리즘 복습과 블로깅 만으로도 이렇게 훌쩍 지나버렸다. 조급해지는 상황이다. 그럴수록 지나왔던 것을 더욱 단단하게 만들고자 한다.
for...of, for...in 은 for문과 비슷하다고 생각하고 사용 하였다. 조금은 사용법이 달라 이번에 정리해보자.

for...of

for...of 명령문은 반복가능한 객체 에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이라고 한다. 여기서 반복가능한 객체는 iteration protocols를 따른다

Iteration protocols 에 관한 velog

구문
for (variable of iterable) {
  statement
}
variable
각 반복문에서 서로다른 속성 값이 variable에 할당 된다고한다.

iterable
반복되는 열거가능(enumberable)한 속성이 있는 객체이다.

Array 반복

let abc = [1,3,5,7]

for(let i of abc){
  console.log(i)
}
//1
//3
//5
//7

for ()괄호 안에 let 대신 const를 사용할 수도 있다고 한다.
사용시 가장 많이 실수 했더 것이 let이나 const를 설정 하지 않았던 점이었다.

let abc = [1,3,5,7]
for(key of abc){}
console.log(key) //7


for(let i of abc){}
console.log(i) //ReferenceError: i is not defined

let이나 const를 사용하지 않은 경우 전역변수 처리되기 때문에, 혹시나 생길 오류를 위해 let이나 const를 사용하도록 하자.

for...in

for...in문은 상속된 열거 가능한 속성들(enumerable properties)를 포함한 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복한다고 한다.(symbol로 키가 지정된 속성은 무시한다고 한다.)

enumerable properties?

자바스크립트에서 객체 속성들은 내부적으로 숨겨진 속성 3가지가 저장된다고 한다. 그중 하나가 enumerable이고 이 값이 true 것을 for...in에서 출력하는 것이다.

symbol?

Symbol에 관한 velog

구문

for (variable in object) { ... }

variable
매번 반복되는 속석이름이 변수로 지정된다고 한다.
object
반복 작업을 수행할 객체이다. 열거형 속성을 가지고 있는 객체.

예시

const obj ={
  a : 'a',
  b : 'b',
  c : 'c'
}
for(let key in obj){
  console.log(`${key} : ${obj[key]}`)
}
/*
'a : a'
'b : b'
'c : c'
*/

특징

임의의 순서로 객체의 속성들에 대해 반복 한다고 한다. 특정 순서에 따라 인덱스를 반환하는 것을 보장할 수 없다고 한다.

for...of 와 for...in의 차이

앞에서 for...in은 enumerable properties 라고 하여 열거가능한 속성들만 작동한다면, for..of는[Symbol.iterator]속성에 있는 모든 컬렉션 요소에 대해서 반복한다.

let abc = [1,2,3]

abc.foo = "hi"

for (let i in abc) {
  console.log(i)
}
//'0'
//'1'
//'2'
//'foo'


for(let i of abc){
  console.log(i)
}
//1
//2
//3