[Project]/[6.2 개인과제] 영화 콜렉션
[Javascript] 기능구현시 ... return vs console.log
Lethargin
2023. 6. 2. 16:52
function a(item) {
let { poster_path, title, overview, vote_average, id } = item;
let movieCard = document.createElement("div");
movieCard.className = "movie-card";
movieCard.onclick = function () {
alert(`ID : ${id}`);
};
let posterPathElement = document.createElement("img");
posterPathElement.src = `https://image.tmdb.org/t/p/w400/${poster_path}`;
posterPathElement.style.marginLeft = "20px";
posterPathElement.style.marginTop = "20px";
let titleElement = document.createElement("h3");
titleElement.textContent = title;
titleElement.style.marginLeft = "10px";
titleElement.style.fontSize = "20px";
let overviewElement = document.createElement("p");
overviewElement.textContent = overview;
overviewElement.style.marginLeft = "10px";
overviewElement.style.marginRight = "10px";
overviewElement.style.textAlign = "justify";
let voteAverageElement = document.createElement("p");
voteAverageElement.textContent = `Rating: ${vote_average}`;
voteAverageElement.style.marginLeft = "10px";
voteAverageElement.style.marginRight = "10px";
let idElement = document.createElement("p");
idElement.textContent = `id: ${id}`;
idElement.style.marginLeft = "10px";
idElement.style.marginRight = "10px";
movieCard.appendChild(posterPathElement);
movieCard.appendChild(titleElement);
movieCard.appendChild(overviewElement);
movieCard.appendChild(voteAverageElement);
movieCard.appendChild(idElement);
return movieCard; //👈
}🤔 return movieCard 밑에 console.log(movieCard)를 찍으면 안되고 -> 콘솔을 return 위에 찍어야 함 (return 이하 문장들은 모두 무시하기 때문에)
console.log() vs return
-전자는 단순히 화면에 출력하는 기능이고,
-후자는 값을 '저장'하는 기능이다.
좀더 자세히 살펴보면
return
-함수가 return이라는 말을 만나면 값을 내뱉고 끝나게 되므로,
-함수의 맨 마지막에 return이 위치해야 함.
function f (a, b) {
return (a + b) ;
if(조건) { ... } //if와 else 조건문 안의 명령문은 실행되지 않음. return이 앞에 있으므로
else(조건) { ... }
}
console.log
오류 종류
①undefined : 콘솔에 인자로 아무것도 안 보내졌을 때
②sth is not a function : 함수가 아닌데 함수로 호출하면 뜨는 오류 -> 🤔forEach() 썼을 때 이 오류 났었는데...
③sth(변수이름) is not defined : 변수가 선언된 적이 없는데 썼을 때
④NaN : not a number(숫자가 아니라, 잘못 계산했어!라는 뜻) - ❶(+)연산자 : 숫자와 boolean을 -> 문자열로 변경 ❷(+) 제외한 (-), (*) 등 연산자 : 숫자로 변경 (공백은 0ㅇ으로 침)의 경우에 나오는 듯