[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 명령어는 자동 세미콜론(;) 삽입 영향 받기 때문.)
• 함수는 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