JavaScript 함수(Function)

JavaScript 함수(Function)

 : 함수는 입력(input)을 받아 출력(output)을 하는 하나의 작은 기능 단위입니다.  함수를 선언할 때 괄호 안의 값은 매개변수(Parameter)라고 합니다. 함수를 실행할 때 괄호 안의 값은 전달 인자. 줄여서 인자(argument)라고 합니다. 기본 형식은 아래와 같습니다.

function 함수명(매개변수){
   코드 내용
   return 반환 값
} // 함수를 선언할 때

함수명(인자) // 함수를 실행할 때

 : 함수는 2가지 방식으로 선언할 수 있습니다. 첫 번째는 함수(function)라는 점을 먼저 선언하고 세부적인 함수명과 코드 내용으로 이루어진 '함수 선언식'이고, 두 번째는 변수를 선언한 뒤 이 변수에 함수를 할당한 '함수 표현식(익명 함수)'입니다. 호이스팅 현상으로 실행될 때 차이가 있지만 일단 아래 예시의 결과는 같습니다.

function hello(){
   return "안녕하세요";
} // 함수 선언식

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

let hello = function(){
	return "안녕하세요";
}; // 함수 표현식

 : 매개변수는 외부에서 받아올 입력 값으로 함수 내부에서 해당 값을 사용할 수 있습니다. 외부에서 받아온 값을 저장해두는 변수 라고 생각해볼 수도 있습니다. 매개변수가 2개 이상일 때는 콤마(,)로 구분합니다. 아래의 예시에서 함수 sum을 실행할 때 인자값을 10과 20으로 넣으면 a = 10, b = 20 으로 할당합니다. 함수 내의 코드 a + b 가 실행되고 return값은 30이 됩니다. 

function sum(a, b){
   return a + b;
} 

sum(10, 20); // 30. 함수실행

 : 함수를 호출할 때는 함수명();로 호출합니다. 괄호 안에 인자는 생략할 수 있습니다. 함수도 자바스크립트 안에서는 하나의 자료형(Data Type)입니다. 따라서 함수를 변수에 대입하거나, 함수에 속성(Property)을 지정하는 것도 가능합니다. 

function hello(){
   return "안녕하세요";
} 


hello(); // "안녕하세요". 함수호출

let firstGreet = hello(); // hello 함수를 호출하고, 그 반환값을 변수 'firstGreeting'에 할당함.

firstGreet; // "안녕하세요"

 : 함수는 특정 동작을 추후 다시 해야 할 때 미리 설정한 대로 실행할 수 있어 편리합니다. 아래의 예시처럼 같은 계산을 반복해야 할 때 함수로 만들어두면 인자만 수정해 결과값을 반환할 수 있습니다.

function number(a, b){
	return (((a - b) * 365) /24) * 100;
} 


number(5, 4); // 1520.8333333333335

number(10, 2); // 12166.666666666668

 : return을 넣지 않으면 결과값이 반환되지 않습니다. 아래 2번째의 경우 함수 실행 시 return문이 없기 때문에 undefined를 반환합니다. 그리고 return 이후 함수는 종료되기 때문에 그 뒤에는 코드를 넣어도 실행되지 않습니다. 모든 코드는 return문 앞에 기재되어야 하며, console.log는 콘솔에 일시적으로 표시될 뿐 연산의 결과를 도출해 사용할 수 있도록 하는 건 return문으로 둘은 용도에 차이가 있습니다. 

function hello() {
  return 'Hello good morning!';
}
hello(); // 'Hello good morning!'

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

function hello() {
  'Hello good morning!';
}
hello(); // undefined

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

function hello() {
  return 'Hello good morning!';
  return 'Hello good morning!';
}

hello(); // 'Hello good morning!' 1회만 실행됨. 2번째 return은 무시.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

function hello() {
    greet = 'Hello good morning!';
  return; // 반환값이 없음. undefined 반환. 아래 greet 반환은 무시.
  return greet;
}

hello(); // undefined