JavaScript/Javascript

함수(Function)

MoZZANG 2022. 2. 16. 14:46

함수(function)이란? 

 

 

우리가 수학에서 얘기하는 함수랑 같은 개념이다. 하지만 수학적 지식이 필요한 것은 아니니 걱정하지 말자.

 

함수란 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다. 여기서 포인트는 '재사용'이다.

 

 

 

우선 함수의 문법(형식)을 알아보자

▲ 앞서 조건문, 반복문 때와 마찬가지로 browser에게 함수를 사용한다고 알려주어야 하므로 function을 입력한다.

function 뒤에는 자신이 이 함수를 뭐라고 정의할 것인지 함수의 이름을 지어주면 된다. 그리고는 소괄호가 나오고 중괄호가 나오는 순서이고 인자는 아래에서 자세히 설명하도록 하고 중괄호 안에는 이 함수를 사용하였을 때 출력되게 하고 싶은 코드를 적어주면 된다. return은 예시이며 꼭 return을 사용해야 하는 것은 아니다.

 

 

빠르게 예제를 통해 알아보도록 하자.

 

▲ 먼저 function을 통해 함수생성을 알리고 함수이름을 지어준다. 이후 중괄호안에 함수를 실행했을 때 원하는 실행코드를 작성해준다. 위 예제는 0부터 9까지의 숫자를 출력하는 반복문을 넣어주었다. 이제 함수 numbering이 생성된 것이다.

 

 

이제 생성된 함수를 사용해보자. 함수를 실행할 때는 '함수명();' 을 입력해주면 된다. 아래처럼 말이다.

 ▲단순히 numbering만 입력하면 변수로 받아들이기 때문에 소괄호와 세미콜론을 붙여줘야 함수로 인식한다.

 

▲ 단순히 numbering(); 을 입력하였지만 0123456789가 출력된 것을 볼 수 있다. 이처럼 매번 복잡한 코드를 적을 필요없이 한번 함수로 정의해두면 함수명만 불러준다면 복잡한 코드가 실행되는 것을 볼 수 있게된다. 

이것이 함수의 가장 중요한 포인트인 '재사용'인 것이다.

 

한번 함수를 정의해두면 그 파일 안 어디에서든지 함수명만 적어주면 호출되는 것!

그리고 내가 함수를 1000번을 사용하였지만 함수의 로직을 수정해야 할 때도 1000개를 일일이 수정하지 않고

최초 함수를 정의한 부분만을 수정한다면 나머지 1000번의 함수 호출값이 다 수정되는 것이다! 

 

 

 

 

<return>

 

이번에는 return에 대해서 알아보자.

 

▲ 함수 내에서 사용한 return은 return뒤에 따라오는 값을 함수의 결과로 반환하는 동시에 함수를 종료시킨다.

    위의 get_member 함수를 호출하면 출력값으로 moon이 나올 것이고 그 출력값이 alert 안에 있으므로 결과적으로        moon을 경고창에 출력시키는 결과가 되는 것이다.

 

 

만약 다음과 같이 return값 여러개를 하나의 함수에 넣는다면 결과는 어떻게 될까?

▲ 결과값은 moon만 출력될 것이다. 왜냐하면 바로 위에서 말햇듯이 return은 자기 뒤에 있는 값을 함수의 결과로 반환하는 동시에 함수를 종.료. 시키기 때문이다. 최초의 return이 실행되면서 moon을 함수 값으로 배출하고 함수자체가 종료되어 버리기 때문에 나머지 return들은 실행조차 되지 않기 때문이다.

 

 

 

 

<인자(argument)>

 

인자란 함수료 유입되는 입력값을 의미하는데, 어떤 값을 인자로 전달하느냐에 따라서 함수가 반환하는 값이나 메소드의 동작방법을 다르게 할 수 있다. 다음 예제를 보자.

 

▲ 1) 함수 실행을 위해 get_argument( ) 를 호출하고 괄호안에 1을 넣어주었다.

    2) 1은 함수의 arg라는 변수에 대입된다.(var arg = 1; 처럼)

    3) return에 의해 arg가 함수 밖으로 배출되고 함수는 종료된다.

    4) get_argument(1) => arg => 1 => 최종적으로 alert(1);이 되어 출력값을 1이 출력된다.( 2의 경우도 동일한 방법)

 

 

위의 예제처럼 우리가 직접 입력해주는 것을 '인자(argument)'라고 하고 그 인자값을 받아서 대입하는 변수를 매개변수(parameter)라고 한다.

 

 

 

* 추가로 함수를 정의하는 다른 방법도 방법도 있다.

 

우리가 알아본 함수 정의 방식대로 만든 것은 아래와 같다.

 

 

하지만 변수지정 하는 방법으로도 함수를 만들 수 있는데 아래와 같다.

▲ 함수명을 지정하지 않고 함수 자체를 numbering이라는 변수에 대입하는 방법으로도 함수를 만들 수 있으며

당연히 출력값은 위와 아래 동일하다.

'JavaScript > Javascript' 카테고리의 다른 글

객체(Object)  (0) 2022.02.16
배열(Array)  (0) 2022.02.16
반복문(break, continue, 중첩)  (0) 2022.02.16
반복문(for와 while)  (0) 2022.02.15
조건문(추가내용)  (0) 2022.02.14