• Q&A
  • 회원가입
  • 로그인

[Statement] JS - return 구문 ★★ (= return문 = return구문 = 리턴문 = 반환문 = 리턴구문) ※ return false 의미 (= 리턴폴스 의미)

목차
  1. return 예제 - 함수 결과값 반환
  2. return 정의
  3. return 구문
  4. return 예제 - 문자열 반환
  5. return 예제 - 숫자 연산 결과 반환
  6. return 예제 - 반환값이 함수인 경우
  7. return false 의미 (onclick 경우) ★

 

return 예제 - 함수 결과값 반환 

 

<p id="demo"></p>


<script>

function homzzang() {

  return Math.PI;

}


document.getElementById("demo").innerHTML = homzzang();

</script>

 

결과보기 (결과값: 3.141592653589793)

 

return 정의

 

함수 실행 종료 후, 함수 결과값을 함수 호출 지점으로 반환.

 


 

1.

함수 배우기 : 함수정의, 매개변수, 함수호출, 클로저 등.

 

2.

  • 함수 안에서 return 명령어로 값을 반환하면 변수에 할당 가능.
  • 함수 안에서 출력 명령어로 값을 출력시키면 변수에 할당 불가.
  • return 뒤 반환값은 줄바꿈 X (※ 줄바꿈하려면, 값을 중괄호로 감싸야 함.)
  • 함수는 return 지점에서 즉시 실행 멈추고,  함수 호출 지점으로 이동함.
  • 반환값으로 함수도 가능.

 

3. 

  • JS 버전 : ECMAScript 1 
  • 모든 브라우저 지원.

 

4. MDN return 예제 보기
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return

 

 

return 구문

 

return value;

 


[매개변수]

 

value

선택. 함수 호출자에게 반환될 값 지정. (생략 시, undefined 반환) 

 

 

return 예제 - 문자열 반환

 

<p id="demo"></p>


<script>

function homzzang(name) {

  return "홈짱닷컴 " + name;

}

document.getElementById("demo").innerHTML = homzzang("Homzzang.com");

</script>

 

결과보기

 

return 예제 - 숫자 연산 결과 반환

 

<p id="demo"></p>


<script>

var x = homzzang(3, 4); 


function homzzang(a, b) {

  return a * b;   

}  

document.getElementById("demo").innerHTML = x;

</script>

 

결과보기 (결과값: 12)


return 예제 - 반환값이 함수인 경우

 

function homzzang(x,y) {

  return function plus(x,y) { return x + y };

}


var hz = homzzang();

document.write(hz(3,4)); // 7

 

결과보기 (결과값: 7)

 

return false 의미 (onclick 경우) ★

 

1. 

<a href="https://homzzang.com">클릭1</a>

href 속성값으로 바로 이동.

 

2. 

<a href="https://homzzang.com" onclick="alert('홈짱닷컴');">클릭2</a>

onclick 속성값 코드 먼저 수행 후, href 속성값으로 이동.


3. ★ 

<a href="https://homzzang.com" onclick="alert('홈짱닷컴'); return false;">클릭3</a>

onclick 속성값 코드 먼저 수행 후 실행 종료. (※ href 속성값으로 이동 안 함.)

 

4. 

<a href="#" onclick="alert("홈짱닷컴");">클릭4</a>

onclick 속성값 코드 먼저 수행 후, href 속성값으로 이동하는데,

목적지에 해당하는 ID가 없어, 브라우저는 갈 곳을 잃어 페이지 맨상단으로 이동.

 

5

<a href="#" onclick="alert("홈짱닷컴"); return false;">클릭5</a> 

onclick 속성값 코드 먼저 수행 후 실행 종료. (※ href 속성값으로 이동 안 함.)

href 속성값으로 이동을 안 하므로, 페이지 맨 상단으로 이동도 안 하게 됨.

 

결과보기

참고: 손꽁쥐 님 (190414) https://ggmouse.tistory.com/418

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012