[JS] 함수

KJA·2022년 6월 30일
0

함수

일정한 동작을 수행하는 코드입니다. 함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러 번 호출할 수 있습니다.

함수 선언문

function 키워드 뒤에 함수 이름을 넣어주는 방식을 함수 선언문(function declaration) 이라고 합니다. function 키워드, 함수 이름, 괄호로 둘러싼 매개변수를 차례로 써주면 함수를 선언할 수 있습니다.

function name(parameters) {
  // ...함수 본문...
}

예시

function sayHi() {
  console.log('Hi!');
}

새롭게 정의한 함수는 함수 이름 옆에 괄호를 붙여 호출할 수 있습니다.
* 자바스크립트는 괄호가 있어야만 함수가 호출됩니다.

function sayHi() {
  console.log('Hi!');
}

sayHi(); // Hi!
sayHi(); // Hi!

함수 표현식

함수 sayHi와 같이 상수나 변수에 대입하는 방식을 함수 표현식(function expression) 이라고 합니다.

let sayHi = function() {
  alert( "Hello" );
};

끝에 세미 콜론은 왜 있나요?
함수 표현식은 let sayHi = ...;과 같은 구문 안에서 값의 역할을 합니다. 코드 블록이 아니고 값처럼 취급되어 변수에 할당되기 때문입니다. 모든 구문의 끝엔 세미 콜론 ;을 붙이는 게 좋습니다.

화살표 함수

함수 func는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환합니다.

let func = (arg1, arg2, ...argN) => expression
const sum = (a, b) => a + b;
/* 위 화살표 함수는 아래 함수의 축약 버전입니다.

const sum = function(a, b) {
  return a + b;
};
*/
console.log(sum(1, 2)); //3
  • 인수가 하나 밖에 없을 때는 인수를 감싸는 괄호를 생략할 수 있습니다.
let double = n => n * 2;
// let double = function(n) { return n * 2 }과 거의 동일합니다.

alert( double(3) ); // 6
  • 인수가 하나도 없을 땐 괄호를 비워놓으면 됩니다. 단, 이 때 괄호는 생략할 수 없습니다.
let sayHi = () => alert("안녕하세요!");

sayHi();

본문이 여러 줄 일 때

평가해야 할 표현식이나 구문이 여러 개인 함수가 있을 때 중괄호안에 평가해야할 코드를 넣어주어야 합니다. 그리고 return지시자를 사용해 결괏값을 반환해주어야 합니다.

let sum = (a, b) => {  // 중괄호는 본문 여러 줄로 구성되어 있음을 알려줍니다.
  let result = a + b;
  return result; // 중괄호를 사용했다면, return 지시자로 결괏값을 반환해주어야 합니다.
};

alert( sum(1, 2) ); // 3

0개의 댓글