[5일차] #27. 함수 - 리턴

---

5일차

---

수업의 목적

HTML과 JavaScript의 만남 1 (script 태그)

HTML과 JavaScript의 만남 2 (이벤트)

HTML과 JavaScript의 만남 3 (콘솔)

데이터타입 - 문자열과 숫자

변수와 대입 연산자

웹브라우저 제어

CSS 기초

제어할 태그 선택하기

프로그램, 프로그래밍, 프로그래머

조건문 예고

비교 연산자와 Boolean 데이터 타입

조건문

조건문의 활용

리팩토링(refactoring)

반복문 예고

배열

반복문

배열과 반복문

배열과 반복문의 활용

함수예고

함수

함수의 활용

객체예고

객체

객체 활용

파일로 쪼개서 정리 정돈하기

라이브러리와 프래임워크

UI vs API

수업을 마치며

---

#27. 함수 - 리턴

---

▲ 글자를 붉은색으로 바꿈

---

□ function sumColorRed(left, right){document.write('<div style="color:red">'+left+right+'</div><br>');

□  스트링(문자)으로 변환해주는 코드 ⇒ +

□ '+left+right+' ⇒ 23

□ '+(left+right)+' ⇒  5

---

▲ 함수 예약어 리턴(Return)을 통한 출력 → 다양한 용도로 활용 

[Javascript] 리턴 (Return)^[각주:1]

---

return이 하는 가장 중요한 일은 바로 함수를 사용할 때 반환값을 얻을 때 가장 많이 사용합니다. 

여기서 반환값을 얻는다는 의미는 반환값을 반환한다는 의미로 어떤 함수의 결과를 함수에서 얻을 수 있게합니다. 

또한 함수 내부의 변수들은 전역변수가 아닌 지역변수를 사용하게 되는데 지역변수의 값을 알아야 하는 경우에도 return을 사용해 반환시켜서 알 수 있을 것입니다.

또한 해당 함수를 실행 중에도 중지시킬 수 있는 역할도 합니다. 

즉 아직 실행해야할 코드들이 남은 상태에서도 원하는 경우 escape 할 수 있는 용도로 사용됩니다. 정리하자면...

1. 값을 반환하는데 사용한다.

2. 지역변수를 알 수 있는데 사용할 수 있다.

3. 현재 진행중인 함수를 중지(탈출)할 수 있다.

그렇다면 간단한 예제를 통해 알아보도록 하겠습니다. 아래 함수를 봐주세요.

# 값을 반환하는데 사용하는 return 예제보기
아래 예제에서의 함수 test는 x라는 내부변수를 가지고 있습니다. 이 값을 함수를 실행했을때 반환하여 다른 스크립트에 사용가능하도록 해보려 합니다.

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

test();

이 함수를 실행할 경우 어떤 결과가 나타날까요? 아무런 일도 일어나지 않습니다. return이 사용되지 않았기 때문이죠. 즉 내부 구문들을 실행하였으나 반환할 값이 선언되지 않았고 return 역시 선언되지 않았기 때문입니다. 만약 x를 얻기 위해서는 어떻게 해야할까요? 아래처럼 return 문을 사용해야 합니다.

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

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

성공입니다. test() 함수를 실행할 경우 해당함수는 1을 반환합니다. 반환값을 사용하기위해서는 변수가 필요하겠지요 그래서 test2 변수를 선언하고 여기에 저장하였습니다.

만약 return 없이 x의 값을 불러올 수 있을까요? 불가능합니다... 그 이유는 앞에도 말한것처럼 x가 함수내에서 실행된 지역변수이기 때문입니다. 그러므로 지역변수가 필요한 경우 return을 사용해 외부로 반환하여 사용해야합니다.

# 중간에 중지시키는데 사용하는 return문 예제
앞에 언급한 것처럼 return은 현재 구문을 중지하고 빠져나오는(escape) 방법으로 사용이 가능합니다.

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

위 코드는 많은 코드가 담겨 있으나 필요한 구문만 실행했다면 모두 실행할 필요가 없을 것입니다. 그래서 return을 사용하여 필요한 부분만 사용 후 함수에서 빠져나오기 위하여 return을 사용하였습니다. 이처럼 변수가 필요한 경우에 return 해당변수명으로 사용하기도 하지만 반환할 경우가 없다면 아래처럼 사용하기도 합니다.

return false;
return;

여기까지 간단하게 return 예약어에 대하여 알아보았습니다.

저자 'ENSSO'님의 글을 발췌했습니다.  (출처: 각주참고)

---

---

1. https://webisfree.com/2016-06-18/[javascript]-%ED%95%A8%EC%88%98%EC%9D%98-%EC%98%88%EC%95%BD%EC%96%B4-return%EC%9D%B4%EB%9E%80 [본문으로]