[🌳javascript] for in/ for of, enumerable, iterable

const arr=[1,2,3,4,5,6]
for (let i=0; i<arr.length;i++){
  어쩌구저쩌구코드}

반복문의 대표적인 for문. 이외에도 자바스크립트에서 우리가 사용할 수 있는 다른 반복문들도 있는데, 바로 for in / for of 다.

아래의 반복문들은 위에서 본 for문처럼 코드를 여러번 실행할 때 사용하기도 하지만, array나 object에서 자료를 꺼낼 때 사용하기도 한다.

for in (Object 전용)

오브젝트 자료형에 저장된 자료들을 하나씩 꺼내고 싶을 때 사용하면 된다.

let obj = {
  name: 'Lee',
  age: 27,
}
for (let key이름적는곳인데아무렇게나작명하쇼 in obj){
  console.log(obj[key이름적는곳인데아무렇게나작명하쇼])}

반복문은 오브젝트 자료 내부 데이터 개수만큼 반복하게 되며, 반복할 때마다 key~~변수는 name,age라는 key값이 된다. 즉, 반복시마다 변경되는 key값을 이용하면 오브젝트 내의 자료를 모두 출력할 수 있게 된다.
주의할 점은 오브젝트명[key값작명] 이렇게 쓴다는 것!

enumerable(셀 수 있는)

for in 반복문은 셀 수 있는 데이터만 출력해준다.

Object.getOwnPropertyDescriptor(obj, "age"); 을 쓰면 다음과 같은 속성이 출력된다.
// {value: 27, writable: true, enumerable: true, configurable: true}

enumerable은 셀 수 있는지의 여부를 뜻하며, true여야 for in 반복문에서 출력이 가능하다.

부모의 prototype도 반복해준다

class Parent{
}
Parent.prototype.name='Kim'
const 오브젝트 = new Parent()
오브젝트.age=29
for (let key in obj){
  console.log(obj[key])} // Kim

근데 부모 prototype을 반복문 돌려서 출력해낼일은 별로 없긴하다. 어쨌든 부모님꺼 말고 내껏만 출력하고 싶으면 hasOwnProperty()라는 객체기본으로 내장되어 있는 내장함수 이용하면 내꺼만 출력할 수도 있다.

for (let key in obj){
  if(오브젝트.hasOwnProperty(key)) {
    console.log(obj[key]); //29
  }
}

for of (iterable 전용)

for of 반복문은
Array, string, arguments, NodeList, Map, Set
iterable한 자료형에만 사용가능.

[Symbeol.iterator]()이라는 일종의 메소드를 가지고 있는 자료형들을 뜻한다.

그럼 심볼이 뭡니까?

Symbol

심볼은 오브젝트 자료형에 비밀스런 key 값을 부여하고 싶을 때 사용한다. 원래 object 자료형에는 문자만 넣을 수 있었는데 ES6부터는 Symbol도 key 값으로 입력할 수 있게 되었다.
심볼 만드는 법: const 심볼 = Symbol('어쩌구저쩌구설명')
key 값으로 넣는 법: person[심볼]=100

const person = {
  name:'Lee'
}
person.weight=45

const weight=Symbol('나의 비밀스런 몸무게')
person[weight]=200 // 혹은 const person = {name:'Lee', [weight]:200} 이것도 가능

 console.log(person.weight)// 45

또한, Symbol은 반복문에서 감지하지 못하기 때문에 for in 문을 써서 반복문 돌려도 나타나지 않는다.

Symbol.for()을 쓰면 전역심볼로 만들 수도 있다.

const a = Symbol.for('어쩌구설명')
const b = Symbol.for('어쩌구설명')
console.log(a===b)  //true

.for()을 써서 새로운 Symbol을 만들고 같은 설명이 쓰게되면
이미 그 설명을 쓰고 있는 Symbol을 그 자리에 집어넣는다. 아래 코드참고.

const a = Symbol.for('어쩌구설명')
const b = a
console.log(a===b)  //true

---

• 오늘 새롭게 알게 된 것
  Symbol이라는 걸 통해 비밀스런 Key 값을 쓰는 법을 배웠다.

• 오늘 배운 것들 중 더 알고 싶거나 궁금한 것
  근데 어따 써먹는걸까?

• 오늘의 소감

LA 하면 떠오르는 라라랜드.
요즘 나의 최애사진.