api 호출 후 변수로 선언하여 함수의 매개변수 인자로 전달
const detailData = await getDetailedMovie(key); // getDetailedMovie()라는 api 함수의 return값을 변수에 대입
const castData = await getCastArray(key); // getCastArray()라는 api 함수의 return값을 변수에 대입
let title = detailData["title"]; // 영화 제목
let overview = detailData["overview"]; // 영화 내용
let vote = detailData["vote_average"].toFixed(2); //영화 평점
let image = detailData["poster_path"]; // 영화 포스터
let genres = detailData["genres"]; // 영화 장르
let releaseDate = detailData["release_date"]; //개봉일
//production_companies" 객체 안에 영화 제작사 이름 뿐만 아니라 여러 정보들이 함께 존재하여
//PcArr 배열에 영화 제작사 이름만 대입
let productionCompanies = detailData["production_companies"];
let PCArr = []; // 영화 제작사 배열
//castData 객체 안에 출연진 뿐만아니라 여러 정보들이 함께 존재하여 castArr 배열에 배우 이름만 대입
let castArr = []; // 출연진 배열
castData.map((item, index) => {
if (index < 5) {
castArr[index] = item.name; //객체의 값 중 name(배우이름)이라는 값만 추출
}
return castArr; //배우 이름을 배열로 정렬하여 return;
});
productionCompanies.map((item, index) => {
PCArr[index] = item.name; //item의 객체의 값 중 name(영화 제작사)이라는 값만 추출
return PCArr; //영화 제작사를 배열로 정렬하여 return;
});
//각각의 값을 매개변수 인자로 전달
movieList(title, overview, vote, image, genres, releaseDate, castArr, PcArr);
api 호출/ 객체의 인자로 선언/ 하나의 객체를 매개변수 인자로 전달
//MovieObject라는 객체를 선언하여 Api 값을 대입
let MovieObject = {
title: detailData["title"], // 영화 제목
overview: detailData["overview"], // 영화 내용
vote: detailData["vote_average"].toFixed(2), //영화 평점
image: detailData["poster_path"], //영화 포스터
genres: detailData["genres"], // 영화 장르
releaseDate: detailData["release_date"], //개봉일
castArr: function castFunc() { // 출연진
return castData.map((item) => {
return item.name;
});
},
PcArr: function PcFunc() { //영화 제작사
let productionCompanies = detailData["production_companies"];
return productionCompanies.map((item) => {
return item.name;
});
}
};
//MovieObject 객체를 인자로 전달
movieList(MovieObject);
객체로 선언한 이유:
추후 증가할 api 값들의 수를 생각 해봤을 때 함수의 매개변수 인자로 변수를 전달하게 되면
코드 해석 측면 또는 인자를 사용할 입장에서 불편함을 호소할 거 같아 변경하게 되었습니다.