[Front-End] JavaScript 함수

함수

프로그래밍을 할 때 코드를 사용하여 특정 작업을 여러 번 수행할 때, 함수를 만들어서 동일한 코드를 다시 작성하는 대신 코드 블록을 함께 그룹화하여 하나의 작업과 연결한 다음 작업을 다시 수행해야 할 때마다 해당 코드 블록을 재사용 할 수 있다.

즉, 함수는 특정 작업을 수행하기 위해 일련의 명령문을 그룹화하는 재사용 가능한 코드 블록이라고 할 수 있다.

 

1) 함수 선언

함수 선언은 함수를 이름 또는 식별자(identifier)를 사용한다.

형태: 「  function  함수이름( )  { 실행 코드; }  」

함수 선언 예시

필수 =>  ① function키워드   ② 함수 이름 또는 식별자 뒤에 ( )소괄호   ③ { }중괄호 안에 실행 코드

 

 

2) 함수 호출  

형태: 「  함수이름( );  」

함수 호출로 함수의 중괄호 안에 모든 문장들을 실행한다.

hellofun(); // Output: Hello World!

function hellofun() {
  console.log('Hello World!');
}

 

3) 매개 변수 및 인수

함수를 선언 할 때 매개 변수를 지정해서 함수에 입력을 받아 사용할 수 있다. 

함수 매개 변수 사용 예시

calculateArea() 함수 안에서 매개 변수는 괄호 사이에 width와 height이며, 함수 안에서 일반 변수처럼 작동한다. 

 

매개 변수가 있는 함수를 호출 할 때 함수 이름 뒤 괄호 안에 값을 지정하는데 이때 함수에 전달되는 값을 인수라고 한다. 인수는 값 또는 변수로 함수에 전달할 수 있다.

함수 인수 사용 예시

함수 호출에서 숫자 10은 width로 전달되고 6은 height로 전달된다. 

 

 

4) 기본 매개 변수(Default Parameters)

ES6에는 기본 매개 변수를 사용하는 기능이 추가되었다고 한다.

함수에 전달된 인수가 없거나 함수 호출 시 undefined가 인수로 전달될 경우 매개 변수가 미리 결정된 값을 가진다.

function callfun (name = 'Mike') {
  console.log(`Hello ${name}!`)
}

callfun('Tom') // Output: Hello Tom!
callfun() // Output: Hello Mike!

매개 변수 name에 기본값 'Mike'를 할당하고, callfun('Tom')에서 'Tom'이라는 인수 값이 전달되고, callfun()처럼 전달된 인수가 없을 때에는 기본값 'Mike'가 사용되어서 'Hello Mike!'가 콘솔에 출력된다.

 

 

5) 반환하기(Return)

함수 호출에서 정보를 다시 전달하기 위해서 return을 사용한다. 반환하고자 하는 값을 return 뒤에 써준다.

function rectangle(width, height) {
  let size = width * height;
}
console.log(rectangle(3, 5)) // Prints undefined

undefined가 출력되는데 return을 사용해주면 원하는 15값을 출력할 수 있다.

function rectangle(width, height) {
  let size = width * height;
  return size;
}
console.log(rectangle(3, 5))  // Prints 15

return문이 사용되면 함수 실행이 중지되고 그 뒤에 오는 코드가 실행되지 않는다.

function rectangle(width, height) {
  if (width < 0 || height < 0) {
    return 'Correct width and height';
  }
  return width * height;
}
console.log(rectangle(3, 5)) // Prints 15
console.log(rectangle(-3, 5)) // Prints Correct width and height

 

 

6) 도우미 함수(Helper Functions)

다른 함수 내에서 함수를 호출하여 return 값을 사용할 수도 있는데 이러한 함수를 도우미 함수라고 부른다.

각 함수가 특정 작업을 수행하기 때문에 필요한 경우 코드를 더 쉽게 읽고 디버깅 할 수 있습니다.

 

ex) 온도를 섭씨에서 화씨로 바꾸는 함수 만들기

function multiplyByNineFifths(number) {
  return number * (9/5);
};

function getFahrenheit(celsius) {
  return multiplyByNineFifths(celsius) + 32;
};

getFahrenheit(15); // Returns 59

 

 

7) 함수 표현식

표현식 안에 함수를 정의하려면 function키워드를 사용한다. 함수 표현식에서 함수 이름은 일반적으로 생략되고, 이름이없는 함수를 익명 함수라고 한다. 함수 표현식은 종종 참조를 위해서 변수에 저장된다.

함수 표현식 예시

• 함수 표현식 선언을 할 때에는 변수의 이름이 함수의 이름 또는 식별자가 되도록 변수를 선언한다. ES6 출시 이후 const 키워드로 변수를 선언하는 것이 일반적이다.

• function 키워드 뒤에 가능한 매개 변수가 있는 괄호 세트( )를 사용하여 생성된 익명 함수를 해당 변수의 값으로 할당한다. 그런 다음 중괄호 집합으로 함수 본문을 포함한다.

 

함수 표현식을 호출하려면 함수가 저장된 변수의 이름을 쓰고, 함수에 전달되는 인수를 괄호로 묶는다.

variableName(argument1, argument2)

함수 선언과 달리 함수 표현식은 hoist되지 않으므로 정의되기 전에 호출 할 수 없다.

 

 

 

8) 화살표 기능

() => 표기법 : ES6로 함수를 더 짧게 작성하기 위한 방법

함수를 생성해야 할 때마다 키워드를 입력할 필요가 없다. 대신 ( ) 내부에 매개 변수를 포함시킨 다음  => 를 두고  { }로 함수 본문을 둘러싼다.

const rectangleArea = (width, height) => {
  let area = width * height;
  return area;
};

 

9) 간결한 바디 화살표 기능

JavaScript는 화살표 함수 구문을 리팩터링하는 여러 가지 방법을 제공한다. 함수의 가장 압축된 형태는 간결한 바디로 알려져 있다.

•  단일 매개 변수만 사용하는 함수는 해당 매개 변수를 괄호로 묶을 필요가 없다. 그러나 함수가 0개 또는 여러 개의 매개 변수를 사용하는 경우 괄호가 필요하다.

•  한 줄 블록으로 구성된 함수 본문에는 중괄호가 없어도 되고, 중괄호가 없으면 해당 줄이 평가하는 모든 항목이 자동으로 반환됩니다.

블록의 내용은 => 화살표 바로 뒤에 와야 하며 return 키워드는 제거 할 수 있다. 이를 암시적 반환이라고 한다 .

const squareNum = (num) => {
  return num * num;
};

이와 같은 함수를 아래처럼 리팩터할 수 있다.

const squareNum = num => num * num;

단일 매개 변수 num이 있으므로 주위의 괄호가 제거되었고,  함수가 한 줄 블록으로 구성되어 있으므로  중괄호{ }가 제거되었으며, 함수가 단일 라인 블록 구성 때문에 return 키워드가 제거되었다.