Notice

Recent Posts

Recent Comments

Link

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

Bibi's DevLog 🤓🍎

[인프런] Javascript입문 - 함수2 (함수와 리턴값 return) 본문

프로그래밍/Javascript 자바스크립트

[인프런] Javascript입문 - 함수2 (함수와 리턴값 return)

비비 bibi 2020. 10. 12. 23:14

* 이 글은 인프런에서 제공하는 호눅스님의 유료 강의 '쉽고 자연스럽게 배워보는 Javascript 입문 - 코드스쿼드 마스터즈 코스 레벨1'를 듣고 공부하며 정리한 글입니다. 강의 내용에 더해, 제가 필기하고 구글링한 내용이 정리되어 있습니다. 초보인 제가 이해한 대로 정리했기 때문에, 부정확한 내용이 있을 수 있음을 감안해 주시길 바랍니다. 강의를 듣고 내용을 정리한 글이기 때문에 문제가 되지 않는다는 인프런 측 답변을 받은 적이 있으나(https://bibi6666667.tistory.com/37), 저작권상 문제가 된다면 보호 모드(비공개)로 전환하겠습니다.

함수와 리턴 값

리턴 값이 있는 함수 정의하기

리턴 값이 있을 경우, 함수를 호출해서 변수에 값을 넣을 수 있습니다.
= 변수를 선언하고, 거기에 리턴 값을 넣을 수 있다.

※ 리턴 값은 하나만 넣어 줄 수 있다 = 리턴은 한 개의 값만 리턴해준다.
(고 일단 알아두기)

var five = function() {
	return 5; 
} 

// 매개변수 없이 함수 호출할 때
five(); // 5

// 리턴을 사용하면 변수에 값을 넣을 수 있다.
// (변수를 선언하고, 거기에 리턴값을 넣을 수 있다)
var x = five();
x; // 5
console.log(x); // 5

(아래 내용과 비교하면서 이해하기)

위와 반대로,
리턴이 없는 함수를 변수에 할당하면?

리턴이 "없는" 함수를 변수에 넣으려 하면, undefined 가 뜬다. (return이 없기 때문)

정확한 return값이 있는 함수만 변수의 값으로 넣을 수 있다.

** 함수에 return값 없이 결과값을 변수에 넣으려고 하는 실수를 많이 한다. 주의하자!

var foo = function() { 
	console.log('I am foo'); 
} 

foo(); // I am foo

var n = foo(); 
n; // undefined
// 함수 foo()는 return값이 없기 때문에, 변수 n에 그 결과값을 넣을 수 없는 것.

var fool = function() {
	return "I am fool";
}

fool() ; // I am fool

var n = fool();
n; // I am fool
// 함수 fool()은 return값이 있기 때문에 변수 n에 그 결과값을 넣어줄 수 있다.

아무 값도 없는 리턴 사용하기 : 함수의 종료

return; 의 두 번째 용도
: 함수를 종료할 때(함수를 빠져나갈 때) 사용할 수 있다.
반복문(루프)의 break;와 같은 용도이다.

var test1 = function(text) {
  if (text === "exit") {
  	return;
  } 
  console.log("보이나요?"); 
}

test1("hoho"); // 보이나요?
// 조건문을 만족하지 않아 함수 test1 을 다 돌았기 때문에 "보이나요?"가 찍힌 것.
test1("exit"); // undefined
// 조건문을 만족하기 때문에 조건문일 때 실행되는 return;을 만나 함수가 끝남.
// 그렇기 때문에 "보이나요?" 는 찍히지 않는다.

함수를 사용하면

가독성이 좋아짐
유지보수를 잘 하게 됨

-> 왕초보 레벨1 : 조건문, 반복문을 잘 사용한다.
-> 왕초보 레벨2 : 함수를 잘 사용한다.
-> 왕초보 레벨3 : 객체를 잘 사용한다. (클래스, 객체지향프로그래밍)
함수를 잘 사용해 왕초보 레벨2 탈출하자!

함수 어떻게 (잘) 만들까?

함수를 쓸 때는 '매개 변수'와 '리턴'을 적극적으로 활용하자.
코드를 짤 때,
줄 수가 지나치게 길어지면 함수로 빼자. (코드 10줄 정도)
인덴트indent(들여쓰기)가 지나치게 깊어져도 함수로 빼자. (들여쓰기 3단 정도)
함수는 반드시 한 가지 일만 하도록 하자.
한 함수에서 두 가지 일을 한다(X)

(Option) 2중 루프를 한 번에 빠져 나가기

- `break` 명령은 한 번에 한 루프만 빠져나갑니다.
- 함수의 `return` 을 이용하면 2중 루프를 한 번에 종료할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>test</h1>
<script>
    for (var i = 0; i < 100 ; i++) {
        for (var j = 0; j < 100 ; j++) {
            console.log(i, j);
            if (i === 5 && j === 3) {
                break;
            }
        }
    }
</script>
</body>
</html>

위와 같은 이중루프에서,
i=5, j=3이 되어 break에 걸린다고 해도 이중루프를 한 번에 종료시킬 순 없다.
break를 사용하면 안쪽 반복문을 빠져나갈 뿐, 바깥쪽 반복문으로 돌아가 나머지 반복을 계속한다.

-> 이중루프를 한 번에 빠져나가기 위해서는
이중루프를 함수로 만들고, break; 대신 return;을 사용한다. 마지막에 그 함수를 호출한다.
그러면 return을 통해 함수가 한 번에 종료되기 때문에, 이중루프를 한 번에 빠져나갈 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>test</h1>
<script>
    function hamsu() {
        for (var i = 0; i < 100; i++) {
            for (var j = 0; j < 100; j++) {
                console.log(i, j);
                if (i === 5 && j === 3) {
                    return;
                }
            }
        }
    }
    hamsu();
</script>
</body>
</html>

저작자표시 비영리 변경금지

'프로그래밍 > Javascript 자바스크립트' 카테고리의 다른 글

[인프런] Javascript 입문 - 연습문제3-1 (0)	2020.10.16
[인프런] Javascript입문 - 객체 1 (0)	2020.10.13
[인프런] Javascript입문 - 함수1 (0)	2020.10.12
[인프런] Javascript 입문 - 배열과 문자열1 [ 배열, 원소, 인덱스, undefined, typeof, length, immutable/mutable, 객체/속성/메소드, push()/pop(), unshift()/shift() ] (0)	2020.10.12
[인프런] Javascript입문 - 반복문2 (break, continue, 이중루프) (0)	2020.10.12

'프로그래밍/Javascript 자바스크립트' Related Articles