return 에 대한 js 초보의 야매정리

javascript를 공부하게 된 이후로 "return" 이란 개념은

너무나 이해하기 어려운 개념이었다. 

 

그래서 내식대로 정리를 해봤다. 

제대로 된 사용을 모르는 초보자의 정리이므로

괜히 따라 이해했다가 후회할 수 있으니

보실 분은 훑어 보시길 바라며..

 

 

return 은 어떤 일을 할까?

 

1. 값을 반환 (배출한다, 꺼내준다로 해석)

(- 코딩 초보자로서 return을 검색하면 다 값을 반환한다는 표현을 사용하는데 항상 좀 더 풀어서 설명해줬으면 했었다..)

var test = function (){
	var x = 1;
}

test();

이런식의 코드를 짰을 때 과연 무슨 일이 일어날까?

결론 :: 아무 일도 일어나지 않는다.

 

현재의 코드는 "x=1 인 자판기가 있기만 한 상태" 이다.

(지역변수를 담은 함수를 자판기라고 생각하기)

즉, 자판기(function(){})에 동전을 넣어야 1이 나오는데 동전을 넣지 않아서

아무 일도 발생하지 않는다고 생각해보기

 

동전 == return

 

그렇다면 자판기에 동전을 넣어보자

var test = function(){
	var x=1;
    
   	return x;
}

test();
// 1을 반환하여 test의 값에 1이 선언됨

결과 :: 1을 반환하여 test의 값에 1이 선언됨

 

 

2. 지역변수를 알 수 있도록 도와준다

 

3. 함수에서 탈출이 가능하다

//예제 1

test function(){
	var x=1;
	
    if(x==1){
    	return x;
    }
    
    x=x+1;
}

:: x=x+1 까지 가지 않고 중간에 탈출한다는 의미인듯하다.

그 의미대로라면 x=1; 이 나와야 한다.

 

 

---

 

여기 아래부터는 참고한 블로그에서 똑같이 가져온 부분이다.

정리가 필요해서 여기에 작성하게 되었다.

 

https://skql.tistory.com/102

[Javascript] return true;return false; 차이점

return 에 대해 친절하고 상세히 설명을 잘 해주어서 참고하면 도움이 될 것같다.

--------------------------------

//예제2

function checkInput(){
	if(frm01.title.value == ""){
    	alert("제목을 입력하셔야 합니다.");
        frm01.title.focus();
        return;
    }
    
    frm01.submit();

}

리턴값이 없는데, 리턴시키고 있습니다.
여기서 return;을 뺀다면 어떻게 될까요. (반환하는 값이 없으니, 빼도 되겠지 하고 말입니다.)

결론부터 말씀드리면, 안됩니다. 이유를 따져 봅시다.

 

title이라는 이름의 제목을 넣는 박스에, 사용자가 제목에 글을 입력하고, "확인" 버튼(혹은 이미지)을 클릭했다고 합시다.
클릭시 checkInput함수를 호출하여, if절에 걸리지 않고, 바로 submit가 발생하겠죠.

이번엔 제목에 아무것도 입력하지 않고, 클릭했다고 합시다.
그럼 if절에 걸리겠지요. 만약 if절 안에 return;이 없다면,
메세지 띄우고, 포커스 이동후에, submit가 발생하게 됩니다.
그렇게 되면, 제목이 없는 글이 써지게 되겠지요.

이해 가시죠. 자바스크립트에서 return은 값의 반환뿐만 아니라, exit의 기능도 포함하는 것입니다.

 

즉, "여기까지만 실행하고, 뒷부분은 실행을 안한다." 하는 것입니다.

 

 

---

 

return 에 대한 정리는 일단 여기까지이다.

 

부족한 설명은 앞으로도 공부하면서 채워나갈 예정이다.