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

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

592  
목차
  1. return 예제 - 함수 결과값 반환
  2. return 정의
  3. return 구문
  4. return 예제 - 문자열 반환
  5. return 예제 - 숫자 연산 결과 반환
  6. onclick에서 return false 의미 ★

 

return 예제 - 함수 결과값 반환

 

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


<script>

function homzzang() {

  return Math.PI;

}


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

</script>

 

결과보기

결과값: 3.141592653589793

 

return 정의

 

함수 실행 중지 후, 해당 함수에서 값을 반환.

 


 

1.

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

 

2. 

JS 버전 : ECMAScript 1 

 

3.

모든 브라우저 지원.

 

 

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>

 

결과보기

 

onclick에서 return false 의미 ★

 

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 속성값으로 이동을 안 하므로, 페이지 맨 상단으로 이동도 안 하게 됨.

 

클릭1~클릭5 결과보기

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



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