[JavaScript] 함수

함수

함수란 어떤 작업을 수행하기 위해 필요한 문(statement)들의 집합을 정의한 코드 블록. 함수는 이름과 매개변수를 갖으며 필요한 때에 호출하여 코드 블록에 담긴 문들을 일괄적으로 실행할 수 있다.

var area = function(width, height){  //width, height: 매개변수 
return width * height; 
}
area(10,20); //10,20 은 전달인자(인수)

매개변수 : 전달인자로부터 전달받은 값이 들어가는 통로
전달인자(인수): 함수에게 전달하는 데이터
return : 함수 안에 데이터를 저장할때 사용

함수 생성 방법

1. 함수 선언식

function Add(a, b) {
  return a + b;
}
console.log(Add(10, 20)); // 30 

=> 함수 선언문은 실행 문맥의 맨 처음부터 시작하여 아래와 같이 함수가 생성되기 전에 호출될 수 있다. 이러한 동작 방식을 함수 호이스팅이라고 한다

console.log(Add(5, 10)); // 15
function Add(a, b) {
  return a + b;
}
console.log(Add(10, 20)); // 30

2. 함수 표현식

let add = function (a, b) {
  return a + b;
}
let res = add(10, 30);
console.log(res); // 40

생성된 함수를 변수에 할당한다.함수가 할당된 변수를 함수 변수라고 하며 함수 변수로 함수를 호출할 수 있다

함수 표현식은 function 키워드 뒤에 함수명을 생략할 수 있으며, 이를 익명 함수 표현식이라고 한다

함수 표현식에서 작성된 함수 이름은 함수 외부에서 접근할 수 없기 때문에 호이스팅이 발생되지 않음

=>즉 함수 생성전에 함수를 호출하면 ReferenceError가 발생한다. 호이스팅 문제로 함수 표현식 사용을 권장함

3. 화살표 함수

// 1. 매개변수는 소괄호에 작성합니다.
let add = (a, b) => a + b;

// 2. 매개변수가 하나인 경우 소괄호를 생략할 수 있습니다.
let show = value => console.log(value);

// 3. 매개변수가 없어도 소괄호는 존재해야 합니다.
let show2 = value => console.log('Hello~');

// 4. 함수 본문에 표현식이 긴 경우 중괄호를 작성합니다.
let divide = (a, b) => {
  if(b === 0) {
    return '0 으로 나눌 수 없습니다.';
  } else {
    return a / b;
  }
}

=> 함수 표현식을 좀 더 간결하게 작성 할 수 있으며, ECMA 2015에 도입되었으며, this 객체를 가지고 있지 않음

4. Function 생성자

var add = Function('a', 'b', 'return a+b');
let res = add(10, 20);
console.log(res); // 30

=> Function 생성자에 매개병수와 함수 본문을 문자열로 전달하여 함수를 생성한다. 보안 및 성능의 문제가 있어서 사용하지 않을 것을 권장한다

함수의 반환문

반환문을 통해 호출자는 함수에서 실행된 결과를 전달받을 수 있다

반환문은 함수의 실행을 중단하고, return 키워드 다음에 명시된 표현식의 값을 호출자에게 반환한다

반환문은 배열이나 객체를 포함한 모든 타입의 값을 반환할 수 있다