[JavaScript] : api에서 받아온 데이터를 console.log 로 찍을 때..

fetch(
    'https://api.themoviedb.org/3/movie/top_rated?api_key=5e19d720d8a39386697259e7163ef8bc&language=ko-KR&page=1',
    options
)
    .then((response) => response.json())
    .then((data) => console.log(data))

api 에서 받아온 데이터를 콘솔로 출력

받아온 데이터의 result는 20개의 배열로 이루어져 있고, 하나하나의 요소는 객체로 구성이 되어있다.

results 값은 요소마다 저런 데이터를 가지고 있고,

각 요소는 이러한 key-value로 구성이 되어있다.

여기서 하나하나 요소의 title 값인 제목에 접근을 해서 영화 제목들만 가지고오는 코드를 나는 확실히 알고 있었다 생각했으나,

항상 습관적으로 배열을 보면 forEach를 돌려온 탓에, 하나 간과한 부분이 있었다.

fetch(
    'https://api.themoviedb.org/3/movie/top_rated?api_key=5e19d720d8a39386697259e7163ef8bc&language=ko-KR&page=1',
    options
)
    .then((response) => response.json())
    .then((data) => console.log(data.result))

이렇게 데이터의 results 값에 접근을 했고, 

fetch(
    'https://api.themoviedb.org/3/movie/top_rated?api_key=5e19d720d8a39386697259e7163ef8bc&language=ko-KR&page=1',
    options
)
    .then((response) => response.json())
    .then((data) => console.log(data.results.title))

이렇게 바로 title 값에 접근을 했더니...

난 이 상황을 이해할 수가 없었다.

"원래 같으면 20개의 영화 제목들이 주루룩 나와야 하는데,..?? 왜 undefined(= 값이 없음) 이라고 나올까..?"

fetch(
    'https://api.themoviedb.org/3/movie/top_rated?api_key=5e19d720d8a39386697259e7163ef8bc&language=ko-KR&page=1',
    options
)
    .then((response) => response.json())
    .then((data) => {
        let rows = data.results;
        rows.forEach((a) => {
            console.log(a.title);
        });
    })

그래서 이번엔 항상 성공적으로 결과값을 출력했던 코드인 forEach 를 써서 다시 시도해 보았다.

잘 나오는데... 왜 아까는 undefined가 나왔던 거지? 라고 생각을 하고 이것저것 console.log()를 찍어보고 나서야 알았다.

forEach 가 저렇게 정상적으로 내가 원하는 데이터를 뽑아서 가져오는 이유는,

1. data의 results 값을 rows 라고 선언을 했고

2. rows 의 배열 요소들이 a라는 매개변수 안으로 "한 요소씩" 들어오면서 그 한 요소만의 title값을 a.title로 가져오기 때문에,

3. rows의 배열 길이만큼 console.log로 찍히면서 정상적으로 a.title의 값을 반복적으로 뽑아 왔던것이고.

맨처음 내가 썻던 console.log(data.results.title)이 undefined라고 나왔던 이유는,

1. data의 results 값에는 접근을 했으나,

2. results 는 하나의 요소가 객체로 이루어진 "배열"이었고,

3. 배열에 접근하는 [index] 방식을 쓰지않은채 그냥 title을 콘솔로 찍어! 라고 명령 하니까,

4. 결과값이 undefined가 나올 수 밖에 없던 거였다.

---

오늘 이 undefined는 개인적으로 나에게 큰 충격이었다.

항상 배열을 보면 결과값을 뽑아내기 위해 forEach를 사용해 왔던 버릇이 이 부분을 나로써 간과하게 만들었기 때문이다.

당연히 이러면 찍히겠지라고 마음속으로 생각했던 부분이었고, 이로써 조금 더 정확하게 개념의 의미를 파악하지 않았나 싶은 마음이다.

#forEach #배열접근 #습관 #undefined