[JS-기초편] 3.함수(Function)

코딩/Javascript

[JS-기초편] 3.함수(Function)

드리프트 2020. 12. 14. 14:49

728x170

지금까지 우리가 작성한 모든 코드는 실제로 구조적이지 않습니다.

그저 달랑 한문장이죠.

alert("hello, world!");

이와 같은 코드를 갖는 것은 잘못된 것이 아닙니다.

코드가 단일 명령문으로 구성된 경우 특히 그렇습니다.

하지만 대부분의 경우에는 그렇지 않습니다.

현실 세계에서 사용하는 경우 코드는 이렇게 간단치 않습니다.

예를 들어보겠습니다.

비행기가 이동한 거리를 계산하는 공식을 생각해 봅시다.

학교에서 배운 기억을 되짚어 보면 이동한 거리는 속도와 시간을 곱하여 계산됩니다.

자바스크립트 버전으로 바꿔 보겠습니다.

let speed = 10;
let time = 5;
alert(speed * time);

속도와 시간이라는 두 개의 변수가 있으며 각각 숫자를 저장합니다.

"alert"함수는 속도 및 시간 변수에 저장된 값을 곱한 결과를 표시합니다.

이것은 방금 본 거리 방정식을 문자 그대로 번역 한 것입니다.

더 많은 값에 대한 거리를 계산하고 싶다고 가정 해 보겠습니다.

지금까지 본 것만 사용하면 코드는 다음과 같습니다.

let speed = 10;
let time = 5;
alert(speed * time);
 
let speed1 = 85;
var time1 = 1.5;
alert(speed1 * time1);
 
let speed2 = 12;
let time2 = 9;
alert(speed2 * time2);
 
let speed3 = 42;
let time3 = 21;
alert(speed3 * time3);

자세히 보시겠지만 위 코드는 끔찍해 보입니다.

코드는 불필요하게 장황하고 반복적입니다.

앞서 변수에 대해 배울 때 보았던 것처럼 코드를 반복하는 것은 코드 자체를 나중에 유지하기 어렵게 만들고 시간도 낭비합니다.

이런 문제는 매우 쉽게 해결할 수 있습니다.

자바스크립트의 함수로 말입니다.

다음 함수를 보십시요.

function showDistance(speed, time) {
	alert(speed * time);
}
 
showDistance(10, 5);
showDistance(85, 1.5);
showDistance(12, 9);
showDistance(42, 21);

이 코드가 아직 무엇을 하는지 너무 걱정하지 마세요.

이 작은 코드 덩어리는 모든 부정적인 부작용없이 이전에 여러 줄의 코드가 수행 한 모든 작업을 수행합니다.

이제 곧 함수가 하는 기능과 함수를 사용하는 법을 배울 것입니다.

함수란 무엇인가?

매우 기본적인 수준에서 함수는 일부 코드의 묶음에 지나지 않습니다.

함수는 기본적으로

문구(Statement)을 함께 사용하여
코드를 재사용 할 수 있도록합니다.

함수를 포함하지 않는 코드를 작성하거나 사용하는 경우는 거의 없으므로 이러한 기능에 익숙해지고 작동 방식에 대해 모두 배우는 것이 중요합니다.

간단한 함수

함수에 대해 배우는 가장 좋은 방법은 바로 들어가서 사용하는 것이므로 매우 간단한 함수를 만들어 시작하겠습니다.

함수를 만드는 것은 그리 흥미롭지 않습니다.

이상한 괄호와 대괄호를 사용하는 것과 같은 약간의 구문상의 단점을 이해하면 됩니다.

다음은 매우 간단한 함수의 예입니다.

function sayHello() {
	alert("hello!");
}

하지만 함수를 정의하는 것만으로는 충분하지 않습니다.

함수를 사용하려면 실제로 호출해야하며 그럴러면 다음 코드를 추가해야 합니다.

sayHello();

이 모든 것을 직접 보려면 새 HTML 문서를 만들고 다음과 같이 코드를 작성하십시요.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Say Hello!</title>

  <style>

  </style>
</head>

<body>
  <script>
    function sayHello() {
      alert("hello!");
    }
    sayHello();
  </script>
</body>

</html>

위 코드를 입력하고 브라우저에서 페이지를 새로 고침하면 hello! 라고 표시됩니다.

지금 당장 알아야 할 것은 코드가 작동한다는 것입니다.

sayHello 함수를 개별 청크로 나누고 각각을 더 자세히 살펴봄으로써 코드가 작동하는 이유를 살펴 보겠습니다.

먼저, function 키워드를 봅시다.

이 키워드는 브라우저 내부에있는 JavaScript 엔진에 이 코드 블록을 함수와 관련된 것으로 처리하도록 지시합니다.

function 키워드 뒤에 함수의 실제 이름과 괄호()를 차례로 지정합니다.

함수 선언을 마무리하는 것은 우리의 코드를 여는 괄호와 닫는 괄호입니다.

마지막으로 함수의 내용, 즉 함수가 실제로 작동하도록하는 명령문입니다.

우리의 경우 hello!라는 단어가 포함 된 대화 상자를 표시하는 "alert" 함수입니다.

마지막으로 살펴볼 것은 함수 호출입니다.

함수 호출은 호출하려는 함수의 이름과 그 뒤에 괄호를 써야합니다.

함수 호출 없이는 우리가 만든 함수는 아무것도하지 않습니다.

함수를 깨우고 일을 하게 만드는 것은 함수 호출입니다.

이제까지는 매우 간단한 함수를 살펴 보았습니다.

다음 두 섹션에서는 방금 배운 내용을 바탕으로 점점 더 현실적인 함수 예제를 살펴볼 것입니다.

인수가 있는 함수 만들기

이전 sayHello 함수는 다음과 같이 간단했습니다.

function sayHello() {
	alert("hello!");
}
sayHello();

함수를 호출하면 함수가 뭔가를 합니다.

단순하게 생각해 보면 간단합니다.

그러나 함수가 호출되는 방법, 데이터를 가져 오는 위치 등에 대한 세부 정보가 필요할 때가 있습니다.

우리가 살펴볼 첫 번째 부분은 인수를 취하는 함수와 관련이 있습니다.

간단하고 익숙한 예부터 시작하겠습니다.

alert("my argument");

여기에 있는 것은 "alert" 기능입니다.

이미 몇 번 (또는 수십 번) 본 적이 있을 것입니다.

이 함수가 하는 일은 호출 될 때 실제로 표시 할 내용을 파악하기 위한 인수로 알려진 것을 취하는 것입니다.

"my argument" 인수로 "alert" 함수를 호출하면 다음과 같은 결과가 표시됩니다.

인수는 "alert" 함수를 호출 할 때 여는 괄호와 닫는 괄호 사이의 항목입니다.

"alert" 함수는 인수를 받는 많은 함수 중 하나 일 뿐이며, 앞으로 우리가 생성하는 많은 함수도 인수를 받을 수 있습니다.

이번 튜토리얼에서 인수를 받는 또 다른 함수는 한참 전에 있는 showDistance 함수입니다.

function showDistance(speed, time) {
	alert(speed * time);
}

함수 선언 자체를 보면 함수가 인수를 받는 지를 알 수 있습니다.

function showDistance(speed, time) {...}

함수 이름 뒤에 빈 괄호가 있던 것은 실제로 함수에 필요한 인수의 양에 대한 정보와 인수가 취할 값에 대한 힌트를 포함합니다.

showDistance의 경우 이 함수가 두 개의 인수를 취한다고 추론 할 수 있습니다.

첫 번째 인수는 속도에 해당하고 두 번째 인수는 시간에 해당합니다.

showDistance(10, 5);

이 경우에는 showDistance를 호출하고 괄호 안에 함수에 전달할 값을 지정합니다.

둘 이상의 인수를 제공하므로 각각의 인수는 쉼표로 구분할 수 있습니다.

그리고 함수에 인수를 제공해서 호출할 때 인수의 순서를 지정하는것이 중요합니다.

다음 그림을 자세히 살펴 보겠습니다.

showDistance 함수가 호출되면 speed 인수에 대해 10을 전달하고 time 인수에 대해 5를 전달합니다.

이전 그림에서 표시된 것처럼 해당 매핑은 전적으로 순서를 기반으로합니다.

인수로 전달한 값이 함수에 도달하면 인수에 대해 지정한 이름이 변수 이름처럼 처리됩니다.

인수로 전달되서 함수 내부에서 변수로 지정된 이름을 사용하여 함수 내부의 인수에 의해 저장된 값을 함수 바깥을 걱정할 필요없이 쉽게 참조 할 수 있습니다.

데이터를 반환하는 함수 만들기

마지막으로 살펴볼 함수 변형은 일부 데이터를 호출한 데이터로 되돌리는 변형입니다.

여기에 우리가 하고 싶은 것이 있습니다. 우리는 showDistance 함수를 가지고 있으며 다음과 같이 보인다는 것을 압니다.

function showDistance(speed, time) {
	alert(speed * time);
}

showDistance 함수가 거리를 계산하고 이를 경고로 표시하도록하는 대신 실제로 나중에 사용할 수 있도록 해당 값을 저장하려고 합니다.

우리는 다음과 같이하고 싶습니다.

let myDistance = showDistance(10, 5);

myDistance 변수는 showDistance 함수가 수행하는 계산 결과를 저장합니다.

return 키워드

함수에서 데이터를 반환하는 방법은 return 키워드를 사용하는 것입니다.

함수가 완료 될 때 발생하는 유일한 차이점을 제외하고 showDistance와 동일하게 보이는 getDistance라는 새 함수를 만들어 보겠습니다.

function getDistance(speed, time) {
	var distance = speed * time;
	return distance;
}

우리는 여전히 속도와 시간을 곱하여 거리를 계산하고 있습니다.

"alert"함수를 이용해 표시하는 대신 거리 변수에 저장된대로 거리를 반환합니다.

getDistance 함수를 호출하려면 변수 초기화처럼 호출하면 됩니다.

var myDistance = getDistance(10, 5);

getDistance 함수가 호출되고 나면 어떤 계산 후에 myDistance 변수에 할당되는 숫자 값을 반환합니다.

그게 전부입니다.

함수 수행 도중 일찍 종료하는 경우

함수가 return 키워드에 도달하면 해당 지점에서 수행중인 모든 작업을 중지하고 호출자에게 지정한 값을 반환하고 종료합니다.

function getDistance(speed, time) {
	var distance = speed * time;
	return distance;
 
	if (speed < 0) {
		distance *= -1;
	}
}

return 문 이후에 존재하는 코드는 도달하지 않습니다.

그 코드가 존재 조차하지 않은 것처럼 보일 것입니다.

실제로는 return 문을 사용하여 원하는 작업을 수행 한 후 함수를 종료합니다.

이 함수는 이전 예제에서 본 것처럼 호출자에게 값을 반환하거나 단순히 종료 할 수 있습니다.

function doSomething() {
  let blah = "Something interesting";
  return;
}

return 키워드를 사용하여 값을 반환하는 것은 선택 사항입니다.

return 키워드는 여기에서 보듯이 함수를 종료하기 위해 독립형으로 사용할 수 있습니다.

함수가 반환 할 항목을 지정하지 않으면 대신 기본값 undefined가 반환됩니다.

결론

함수는 거의 모든 JavaScript 애플리케이션에서 사용할 수 있는 몇 가지 요소 중 하나입니다.

그들은 우리의 코드를 재사용 할 수 있도록 돕는 능력을 제공합니다.

우리 자신의 함수를 만들 든 JavaScript 언어에 내장 된 많은 함수를 사용하든, 우리는 그것들 없이는 살 수 없을 것입니다.

지금까지 살펴본 것은 함수가 일반적으로 사용되는 방식입니다.

여기에서 다루지 않은 몇 가지 고급 특성이 있으나 이는 먼 미래에 다룰 것입니다.

다음편에서는 조건부 If else와 switch 에 대해 알아 보겠습니다.

그리드형

'코딩 > Javascript' 카테고리의 다른 글

[JS-기초편] 5.반복문 (For, While, Do...While) (0)	2020.12.14
[JS-기초편] 4.조건문 (If, Else, Switch) (0)	2020.12.14
[JS-기초편] 2.변수(variable)와 값(value) (0)	2020.12.14
[JS-기초편] 1.소개 (0)	2020.12.13
자바스크립트 웹 스크래핑 맛보기 - 2편 (0)	2020.12.13

현재글[JS-기초편] 3.함수(Function)

드리프트의 코-자-경