[프로그래밍] Javascript 함수란?

Javascript 함수란?

안녕하세요. 개발 까마귀입니다. 오늘 알려드릴 거는 Javascript 함수에 대해 설명을 하겠습니다. 

원래는 스코프 체인을 알려드리려 했지만 함수를 알아야지 스코프 체인을 이해를 하기 때문에 함수를 먼저 알려드리도록 하겠습니다. 일단 함수(function)가 뭘까요? 함수란 하나의 특별한 목적의 작업을 수행하기 위해 독립적으로 설계된 코드의 집합입니다. 이렇게만 들으면 감이 잘 안 오죠? 일단 예제를 보면 감이 좀 올겁니다. 

 

함수(function) 사용법

보기에는 복잡하지만 원리만 이해하면 정말 쉽습니다. 일단 함수 선언 방법은 function 다음에 여러분들이 적고 싶은 함수 명을 적으면 됩니다. 하지만 저번 강의 변수명처럼 막 지으면 안 됩니다. 함수 명도 카멜 기법으로 이게 무슨 함수인지 적어야 합니다. 지금 이 add함수만 봐도 이게 더하기를 해주는 함수 구 나라는 걸 아는 거처럼요. 그다음 중괄호({})를 해줘야 합니다. 중괄호는 쉽게 말해 선언한 함수의 영역입니다. 그런 다음 함수를 "실행"시켜줘야 합니다. 실행을 하기 위해서는 함수명 + 소괄호를 해주면 됩니다. ex: add(); 이런 식으로요. 함수 실행은 실행하고 싶을 때 해주면 됩니다. 저렇게 "window" 영역에 실행을 하면 브라우저에 진입 시 바로 실행이 됩니다. 

 

매개변수와 인자 값

저번에 변수에 대해서 알려드렸지만 매개변수는 못알아드렸습니다. 매개변수는 저번에 알려드린 변수와는 좀 다릅니다. 

매개변수란 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기위해 사용하는 변수를 의미합니다.

여기서 전달받은 인수란 뭘까요? 위에 말했던 거처럼 함수를 실행을 하려면 함수명 + 소괄호를 해야 한다고 말씀드렸습니다. 여기서 소괄호 안에 "데이터"를 담을 수 있습니다. 이 데이터를 "인자 값"이라고 부릅니다. 이 인자 값은 함수를 실행한 그 함수에서만 데이터를 보내는 겁니다. 인자 값은 숫자, 문자열, 배열, 객체 심지어 함수까지 보낼 수 있습니다. 함수는 보낸 인자의 개수만큼 매개변수는 소괄호 안에 이름을 적어주면 됩니다. 매개변수도 똑같이 변수이기 때문에 막 지으면 안 됩니다.

 

arguments

만약 인자 값을 배열 형태로 한방에 받고 싶다면 어떡할까요? 그럴 때 arguments라는 게 있습니다. 

arguments

arguments는 배열 형태입니다. 이렇게 배열 형태면 arguments [0], arguments [1] 이런 식으로 데이터에 접근할 수 있습니다. 하지만 arguments배열은 "유사 배열"입니다. 그냥 이름처럼 배열과 유사하다입니다. 그래서 es6 배열 함수인. map,. filter는 유사 배열에 사용 시 에러가 납니다. 그래서 유사 배열을 배열로 변환시키는 방법이 많습니다. 이 방법은 나중에 알려드리겠습니다.

 

익명 함수와 즉시 실행 함수

즉시 실행 함수

즉시실햄함수

즉시 실행 함수는 뭘까요? 원래 함수를 실행하려면 함수명 + 소괄호라고 말씀드렸는데 만약 함수가 바로 실행이 되는 함수이면서 바로 실행이 되는 함수라고 표현을 하고 싶다면 즉시 실행 함수를 사용하면 됩니다. 그러면 "아 이 함수는 바로 실행이 돼야 하는 함수구나"라는 걸 바로 알 수가 있죠 즉시 실행 함수는 익명 함수로도 사용이 가능하고 함수를 여러번 쓰이는 경우에는 함수명을 달아서 즉시실행함수와 호출함수로도 사용을 많이 합니다.

 

익명함수

익명 함수는 이름 뜻처럼 이름이 없는 함수입니다. 즉시실행함수에서 잠깐 익명함수를 보여드렸는데 그럼 저때 말고는 사용을 안할까요? 익명함수는 어떨 때 사용할까요? 이렇게 생각하면 됩니다. 저희가 함수에 이름을 붙이는 이유는 뭘까요? 당연히 그 함수를 특정 상황에서 호출을 하기 위해서입니다. 변수도 마찬가지고요. 한마디로 이름을 지어주는 이유는 필요한 상황에 부르기 위해 사용하는 겁니다. 반대로 익명 함수는? 그 특정 상황 말고는 딱히 쓸 필요가 없기 때문입니다.

 

익명함수 활용법1

위 코드처럼 함수를 변수에 담는다 거나 

 

익명함수 활용법2

이렇게 함수를 return 한다거나 이럴 때 익명 함수는 많이 씁니다. 저렇게 함수 내에서 return을 하면 return 값을 저렇게 쓸 수가 있습니다.

화살표 함수

es6후 화살표 함수라는 게 나왔습니다. 화살표 함수는 일반적인 function과 다르게 말 그대로 화살표가 들어갑니다.

 

화살표 함수

일반 함수와는 좀 많이 다릅니다. 화살표 함수는 변수를 이용합니다. 한마디로 변수에다 함수를 담는 거죠. 소괄호는 똑같이 매개변수를 받는 곳입니다. 하지만 화살표 함수는 arguments를 지원을 안 합니다.

 

화살표 함수 arguments

이렇게 에러가 납니다. 이거 말고도 화살표 함수가 지원을 안 하는 게 있지만 그거는 따로 강좌로 빼겠습니다.

함수의 필요성

그러면 함수는 언제 쓸까요? 함수는 반복이 되는 코드를 사용하거나 기능별로 코드를 나눌 때 사용합니다. 

예시로 여러분이 나이를 계산하는 코드를 만들었다고 칩시다. 그 나이 계산 코드가 여러곳에서 많이 쓰입니다. 근데 나이계산 코드는 70줄정도되는 코드입니다. 필요할때마다 그 70줄 코드를 갖다 붙이는거는 정말로 비효율적입니다. 그럴 경우에는 나이계산 코드를 function ageCalculation() { "나이 계산 코드" } 이렇게 해서 함수를 호출하기만 하면 70줄 코드가 1 줄이 됩니다. 또한 초보자들이 많이 실수하는 거는 한 함수에 여러 가지 기능을 다 몰아넣는겁니다. 저도 처음에 한 함수에 여러가지 기능을 넣어서 코드가 엉망진창이 되었죠 코드는 어느 상황에서도 분리가 되는 코드가 좋은 코드입니다. 여러분이 라면을 끓이는걸 코드로 한다고 친다면

 

function makingRamen() {

  "물 넣기"

  "수프 넣기"

  "면 넣기"

  "계란 넣기"

  "3분 기다리기"

}

 

이런 식으로 코드를 짠다면

 

function water() {

 "물 넣기"

}

 

function soup() {

 "수프 넣기"

}

 

이런 식으로 기능별로 함수를 만들어서 코드를 짜는 게 좋습니다. 한 곳에 몰아서 넣는다면 그냥 그거는 라면만 만드는 코드입니다. 예를 들어서 짜파게티 만드는 코드르 짜는데 물 넣기랑 수프 넣기 3분 기다리기는 중복되죠? 근데 이 셋 기능을 한 함수에 또 몰아넣는 거보다는 기능별로 함수를 만들어서 필요할 때마다 쓰는 함수를 만드는 게 재활용성이 높아집니다. 

 

오늘은 기본적이 함수에 대해서 알려드렸습니다. 함수로 프로그래밍을 잘해야지 어느 프로그래밍을 하든 자연스럽게 잘할 수 있습니다. 아직 재귀 함수와 화살표 함수와 그냥 함수의 차이의 대해서는 자세히 못 알아드렸습니다. 걱정 마십시오 나중에 쉽고 재미있게 설명을 해놓겠습니다.

 

감사합니다.