[🍦] 함수의 return

티스토리 뷰

Language/JavaScript

[🍦] 함수의 return

채._. 2025. 1. 11. 15:17

주어진 문제

배달팁 계산기 만들기

버튼이 눌렸을 때 입력한 음식값에 따른 배달비를 출력해야 한다.

📍세팅 html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<input type="number" placeholder="음식값 여기다 넣으세요" class="food-price" />
	<button class="btn">배달팁 검색!</button>
	<div>결과: <span class="result"></span>원</div>
	<script src="script.js"></script>
</body>

</html>

문제 풀이 과정

📍생각한 로직

1. 버튼 클릭 시 이벤트 주기

1-1. 클릭 시 계산기 결과값을 result에 나타내기

2. 계산기 함수 실행하기

2-1. 음식값(foodpr.value)에 따라 배달비 거르기

📍구현한 코드

const searchBtn = document.querySelector(".btn");
const result = document.querySelector(".result");
const foodpr = document.querySelector(".food-price");

searchBtn.addEventListener("click", function () {});

function tipcalculate() {
  if (foodpr.value < 10000) {
    result.innerHTML = 3000;
  } else if (foodpr.value < 30000) {
    result.innerHTML = 2000;
  } else if (foodpr.value < 50000) {
    result.value.innerHTML = 1000;
  } else {
    result.innerHTML = 0;
  }
  return;
}

console.log(tipcalculate(foodpr.value));

문제 상황

계산기 함수 로직 구성과정 중 어려움을 느꼈다.

❓어떤 걸 return해야할지

❓console.log에 어떤 변수를 넣어 찍어봐야 하는지

❓addEvenstListener에서는 어떤 함수를 실행해야 하는지

여러가지를 시도하다가 머리속에서 꼬여버렸다.

...

문제 해결 과정

함수에서 중요한 건 "기능의 명확한 분리"이다.

처음에 addEventListener의 함수에서 if문에 따라 가격을 분리했었는데,

생각해보니 클릭할 때 발생하는 이벤트는 단지 결과를 나타내는 것뿐이었다.

따라서 tipcalculate() 라는 함수를 따로 지정하였다.

📌 두 함수의 연결

그럼 클릭이벤트와 계산기 함수, 이 둘을 어떻게 연결하느냐?

그냥 넣어주면 된다!

searchBtn.addEventListener("click", function () {
  tipcalculate();
});

function tipcalculate() {
  if (foodpr.value < 10000) {
    result.innerHTML = 3000;
  } else if (foodpr.value < 30000) {
    result.innerHTML = 2000;
  } else if (foodpr.value < 50000) {
    result.value.innerHTML = 1000;
  } else {
    result.innerHTML = 0;
  }
}

결과 도출 시도 1. result.innerHTML 이동하기

이벤트리스너에 함수를 연결했으니 아래와 같이 변형해보았지만 결과가 나오지 않는다.

searchBtn.addEventListener("click", function () {
  result.innerHTML = tipcalculate();
});

function tipcalculate() {
  if (foodpr.value < 10000) {
    3000;
  } else if (foodpr.value < 30000) {
    2000;
  } else if (foodpr.value < 50000) {
    1000;
  } else {
    0;
  }
}

최종 해결

📌 함수 밖에서 값을 사용하려면 return을 해야 한다

const searchBtn = document.querySelector(".btn");
const result = document.querySelector(".result");
const foodpr = document.querySelector(".food-price");

searchBtn.addEventListener("click", function () {
  result.innerHTML = tipcalculate();
});

function tipcalculate() {
  if (foodpr.value < 10000) {
    return 3000;
  } else if (foodpr.value < 30000) {
    return 2000;
  } else if (foodpr.value < 50000) {
    return 1000;
  } else {
    return 0;
  }
}

값이 정상적으로 나오는 것을 볼 수 있다.

'Language > JavaScript' 카테고리의 다른 글

간혹가다 헷갈릴 수 있는 문제들 ! - 문제은행 오답 풀이 (1)	2025.01.16
[🍦] 손님~ 진동벨로 알려드릴게요! (1) - promise (0)	2025.01.16
[🍦] 모달창 여러 추가 기능 구현하기 (0)	2025.01.15
그래, id는 가져왔어. 이제 어떡할 건데?! - find() (0)	2025.01.15
[🍦] text 삼형제 비교 - textContent / innerText / innerHTML (0)	2025.01.12

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2026/03 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

글 보관함

개발 🐾

티스토리 뷰