• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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

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

분류 제목
DOM JS - CSS - 스타일변경
DOM JS - Animation - 애니메이션 (= 동적효과 = 움직임효과)
DOM JS - Events - 이벤트 2
DOM JS - addEventListener() 메서드 ★★★★★ - 이벤트 걸기 (= addEventListen…
DOM JS - Navigation - 노드탐색 (= 요소탐색) ※ 텍스트노드복사
DOM JS - Node - 노드추가, 노드삭제, 노드변경 (= 노드생성, 노드제거, 노드교체)
DOM JS - Collection - HTML요소집합 (= HTML요소묶음)
BOM JS - Window BOM - 윈도우 브라우저객체모델 (BOM: Browser Object Model)
BOM JS - Window Screen 객체 - 화면객체 (= 스크린객체 = screen객체)
BOM JS - Window Location 객체 - 위치객체 (= 로케이션객체 = Location객체) ※ loc…
BOM JS - Window History 객체 - 이력객체 (= 히스토리객체 = History객체 = 뒤로가기 +…
BOM JS - Window Navigator 객체 - 브라우저객체 (= 네이게이터객체 = Navigator객체 =…
BOM JS - Popup Boxes - 팝업상자 (= 팝업박스 = Alert Box + Confirm box + …
BOM JS - Timing Events ★ - 시간간격 코드실행 (= 타이밍 이벤트 = 시간이벤트 = 일정시간별 …
BOM JS - Cookie (쿠키) 사용법 ★★★ - 쿠키 (설정・생성) / 쿠키 (읽기・얻기・가져오기) / 쿠…
AJAX JS - AJAX (아작스) 소개
AJAX JS - AJAX - XMLHttpRequest() 메서드 ★ - 객체생성 (= 아작스/에이잭스 핵심 = X…
AJAX JS - AJAX - open()/send() 메서드 ★ - 서버에 요청 보내기 (GET방식 vs POST방…
AJAX JS - AJAX - Server Response (서버응답) - 콜백함수 사용 예제
AJAX JS - AJAX - XML 아작스 예제 (= xml 데이터 불러와 표만들기)
4/67
목록
찾아주셔서 감사합니다. Since 2012