javascript #3. 함수

 

 

자바스크립트의 꽃은 함수라고 한다...!.....

 

오늘은 자바스크립트 꽃에 대해 설명해 보겠습니다.

(요즘에는 ES6의 화살표 함수 구조가 더 많이 사용되는 걸로 알고 있는데, 일단 함수의 기본부터 설명해 보겠습니다!)

 

 

함수 (Function) 

자바스크립트에서 함수는 

function add(x) {
  var y = x + 1;
  return y;
}

var mul = function(x) {
  var y = x * 2;
  return y;
};

이런 구조로 선언할 수 있습니다. 

add 함수는 add라는 함수 안에 처리해 줄 값들을 설정해 주고,

mul은 변수 mul을 선언한 후, 그 변수에 함수를 대입해 주는 방식으로 설정해 주었습니다. 

 

mul함수를 더 자세히 보자면!

mul은 함수를 정의해 줄 함수의 이름, 또는 변수의 이름이 되고 

function() 괄호 안에 값 x는 자신이 넣고 싶은 변수를 넣어주는 매개변수(parameter)가 됩니다. 

즉 , y는 매개변수 x의 값을 받아서 곱하기 2를 해주고 y를 return 하라는 함수인 거죠. 

 

참 쉽죠~???

 

이 함수를 실행하려면 

var i = mul(1);

i; // 2

이런 식으로 mul() 함수 괄호 안에 매개변수 값 1을 x한테 전달해 주어 호출하면 x는 1을 받아 y의 값을 리턴합니다. 

이때 괄호 안의 1을 인자라 고합니다. 

 

 

함수 중에는 리턴하지 않는 함수도 있습니다!

var dateChecker = function() {
  var date = new Date();
  alert(date);
};
dateChecker(); // undefined

예를 들어 위 함수는 날짜를 표시하는 프로그램인데 

alert를 사용하여 날짜를 띄우지만 

반환해 주는 return 문은 없기 때문에 dateChecker()을 불러와도 undefined가 뜨게 됩니다!

 

"return할 때 주의할 점은 return 이후에는 값을 반환하기 때문에 이후 코드들은 실행되지 않습니다. 주의하세요!"

 

 

 

---

1급 함수

var mother = function(func) {
  func();
};
var children = function() {
  alert('안녕하세요');
};
mother(children); // '안녕하세요'

mother 함수와 children 함수 생성하였는데, 

mother함수 호출 인자로 children 함수...?

 

이렇게 넣으면 children 함수 자체가 function(func)의 func 매개변수로 전달이 되어 

func();에서 children 함수가 실행됩니다.

 

따라서 값은 안녕하세요가 나오게 되겠죠??^^

 

 

 

이렇게 기초적인 자바스크립트 함수에 대해 소개해봤습니다~

보시는 분 모두가 이해가 되시길 바라며 다음 연산자로 돌아오겠습니당:)

 

 

 

참고: 제로초