자바스크립트 6.1 배열, 객체의 반복문

반복문을 배열과 객체에는 어떻게 사용하는지 기록해보자!

먼저 배열에서 반복문을 어떻게 사용하는지 봅시다아~

let arr = ['apple', 'bee', 'cookie', 'doll'] ; 

//1번 반복문
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i])
};

//2번 반복문
for (let el of arr) {
  console.log(arr[el])
}

/*
apple
bee
cookie
doll
*/

두개의 반복문 다 밑에 있는 주석처럼 하나씩 해당하는 배열의 요소를 뱉어낸다. 1번 반복문 코드는 반복문에서 봐서 쉽게 이해가 되지만 두번째 반복문은 처음보는 형태이다. 두번째 반복문은 for...of을 사용하고 있다. 하지만 결국 두개의 반복문 다 배열의 요소를 순회하기 위해서 사용된다.

(솔직히 나는 1번 반복문이 좀 더 확실 하게 이해되서 좋은것 같다 ٩( ᐛ )و)

let arr = ['영덕', '일산', '이천', '삼천포', '사천']

for (let i = 0; i < arr.length; i++) {
  console.log(i + ': ' + arr[i])
}

/*
0: 영덕
1: 일산
2: 이천
3: 삼천포
4: 사천
*/

이렇게 위의 코드의 결과를 보면 인덱스의 번호와 해당하는 요소를 묶어서 나타나게 할수도 있다.

 

다음은 객체에서의 반복문을 기록해보자!

let HarryPotter = {
  birthday : "1980-07-31",
  pureBlood : false,
  job : 'Auror',
  graduatedSchool : 'Hogwarts',
  hogwartsHouse : 'Gryffindor'
};

fog (let i = 0; i < HarryPoter.length; i ++)  // ??? 길이를 어떻게 설정해야 하지?

객체에게 반복문을 쓰려면, 조건식에 길이만큼 돌아야 한다고 말해주어야하는데, 객체에는 배열 처럼 length를 쓸 수가 없다... 그렇다면 어떻게 해야하는가???!?!? 두가지 방법이 있다!

let HarryPotter = {
  birthday : "1980-07-31",
  pureBlood : false,
  job : 'Auror',
  graduatedSchool : 'Hogwarts',
  hogwartsHouse : 'Gryffindor'
};

for (let prop in HarryPotter) {
  console.log(prop)
}

/*
birthday
pureblood
job
graduatedSchool
hogwartsHouse
*/

첫번째 방법으로는 for..in 반복문을 사용해서 키값을 호출해 보았다. 두번째 방법도 기록해보자

let HarryPotter = {
  birthday : "1980-07-31",
  pureBlood : false,
  job : 'Auror',
  graduatedSchool : 'Hogwarts',
  hogwartsHouse : 'Gryffindor'
};

let keyArray = Object.keys(HarryPotter);
// keyArray = ["birthday", "pureBlood", "job", "graduatedSchool", "hogwartsHouse"]

for (let i = 0; i < keyArray.length; i++) {
 console.log(HarryPotter[i])
}

/*
1980-07-31
false
Auror
Hogwarts
Gryffindor
*/

Object.keys(obj)를 사용하게 되면 주석 처리되어있는 것처럼 키값을 배열로 표현해준다. (키 값이 true인 것들만 배열로 만든다.)

키로 이루어진 배열을 만들어서 length를 사용해서 조건식의 길이를 넣어줄 수 있다! 위의 코드는 반복문을 돌면서 키의 값(value)를 내뱉는다. 이렇게 배열과 객체에서 반복문을 사용하면 된다!

 

다음은 무엇을 기록해볼까?