함수 맛보기?

이번 예제에서는 함수에 대해서 얘기해보자. 제목에 함수 맛보기라고 적은 이유는 필자에 블로그에서는 객체와 함수에 대해서는

많은 글을 써보려고 한다(많관부). 그런 의미에서 이번 글은 간략하게 적어보려고 한다.

 

자바스크립트에서 함수는 가장 중요하며 또 객체와도 관련성이 깊다고 생각한다.

일단 코드에서 함수를 정의하는 형태로 익명함수와(함수의 이름을 넣지 않는)  선언적 함수가 대표적이다.

함수의 장점

• 반복되는 코드를 한 번만 함수에 중괄호에서 정의해놓고 필요할 때마다 그 함수를 호출해서 반복 작업을 피할 수 있다.
• 긴 프로그램을 기능별로 나눠 여러 함수로 나누어 작성하면 모듈화로 전체 코드의 가독성이 좋아진다.
• 기능별(함수 별)로 수정이 가능하므로 유지보수가 쉽다.

 

익명 함수

function  () {.   }

익명 함수에 형태는 이렇다. 함수는 {} 중괄호 사이의 코드들을 넣을 수 있다.

그 코드들을 통해 다음과 같이 사용할 수 있다.

익명 함수를 사용하는 예시로는 

익명 함수를 정의 후에 그 정의한 함수를 "함수 이름"이라는  변수에 선언 후에 "함수 이름()" 코드로 이 함수를 실행 시킬 수 있다.

익명함수 실행

선언적 함수

 

function 함수이름() {    }

이렇게 생성한 함수를 선언적 함수라고 한다.

선언적 함수 실행

위 사진과 같이 선언적 함수 또한 함수를 정의하는 부분 이외에는 함수를 실행시키는 코드는 똑같이 함수 이름()을 통해 사용한다.

 

매개변수와 리턴 값

함수를 호출할 때 괄호 안에 적는 것을 매개변수라고 합니다. 

함수가 최종 결과를 돌려주는 것을리턴 값이라고 부릅니다.

 

함수의 전체적인 형태

위 사진과 같이 함수는 이렇게 사용하는 것이 일반적이다 함수의 소괄호() 사이에 매개변수라는 것을 넣고

함수가 코드를 다 실행해서 나온 값을 return이라는 코드를 통해 실행했던 곳으로 돌려준다

매개변수와 return활용도

위 사진과 같이 함수를 실행시키는 곳 "함수 이름()"에 소괄호 사이에 1이라는 숫자 타입의 값이 들어갔다

"함수 이름" 함수의 ()소괄호를 통해 "매개변수"를 받고 {}중괄호 안에는 그 매개변수를 return 해주고 있다.

그러므로 "함수이름" 함수는 실행시킨 곳에서 1 숫자 타입의 값을 받아 함수 안에서 return 키워드를 만나 다시

실행시키는 곳으로 돌려준 것이다.

 

나머지 매개변수

만약 함수를 호출시킨 곳에서 매개변수를 엄청난 개수로 지정해주었다면 어떻게 처리해야 될까?

이렇게 많은 매개변수로 그 함수를 실행시킨다면 그 함수도 그만큼에 매개변수를 받게끔 정의되어 있어야 한다.

끔찍하다

위에 사진과 같이 말이다. 처음으로 돌아가 함수를 사용하는 이유가 반복성을 줄이고 가독성을 높이기 위해 사용하는 것인데

이럴 거면 함수를 사용할 이유가 있을까?라는 생각이 든다.

이럴 때 사용하는 것이 나머지 매개변수(rest parameter)라는 형태의 문법을 사용한다.

 

function 함수 이름(.... 나머지 매개변수) {}

형태는 이렇다... 마침표 3개를 () 소괄호 안에 입력해주면 매개변수가 몇 개든 매개변수를 가지고 온다.

 

나머지 매개변수 사용예시

위에 사진과 같이 사용할 수 있는데 주의할 점으로는 결과를 보면 배열 형태로 나오는 것을 볼 수 있다.

그래서 함수 안에서 반복문이나 조건문을 통해 그 값들을 조작할 수 있게 된다.

 

데이터 조작

위와 사진과 같이 array형태로 들어온 매개변수를 Array.isArray() 메서드를 통해 확인할 수 있다.

Array.isArray()는 소괄호 안에 같이 array타입이라면 true를 아니라면 false를 반환해줍니다.

type of연산자를 통해 array타입을 확인해보면 다음과 같이 object 객체 타입?이라는 것을 확인할 수 있다.

이점의 유의해서 가능한 나머지 매개변수 문법을 활용했을 때는 Array.isArray() 사용을 지양해야 한다.

 

전개 연산자

만약 함수를 호출한 곳에서 매개변수로 배열 형태의 값을 주면 어떻게 해야 될까?

이럴 때 사용하는 것이 전개 연산자이다

 

전개 연산자를 사용하면 숫자가 하나하나 전개되어 매개변수로 들어가게 된다.

 

기본 매개변수

함수의 매개변수로 항상 비슷한 값을 입력하는 경우 항상 같은 매개변수를 여러 번 반복해서 입력한다면

기본 매개변수에 기본값을 지정하는 기본 매개변수를 사용한다.

function(매개변수, 매개변수 = 기본값, 매개변수 = 기본값) {   }

기본매개변수 예시

위의 사진을 보면 함수 이름은 매개변수 2의 기본 매개변수 설정으로 'id값'을 설정했다.

"함수 이름()"  함수를 실행시킨 곳에서는 두 번째 매개변수를 지정해주지 않았다.

그래서 함수를 정의한 곳에서는 두 번째 매개변수를 2의 값을 지정해준 후 return 해 주고 있기 때문에

"함수 이름()" 호출한 곳에서는 'id값'을 받을 수 있다.

 

이번글에서는 함수의 정의 방법과 함수를 사용하는 방법에대해 알아봤다. 

보통 변수는 선언한다는 의미를 가지는데 함수는 정의한다는 의미를 가진다.

그 이유는 함수는  값(리터럴)처럼 사용되기 때문이다.

그런 이유와 함수와 객체에 관해서는 찬찬히 알아가보도록 하자!