[JavaScript] 함수

함수 선언식

• 일반적인 프로그래밍 언어의 함수 선언 방식
• 호이스팅 발생
• 함수 호출 이후에 선언하여도 동작함.

// ex)
function add(num1, num2) {
	return num1 + num2;
}
add(1, 2); // 3

함수 표현식

• 표현식 내에서 함수를 정의하는 방식
• 함수 이름을 생략한 익명함수로 정의 가능(함수 이름 명시 또한 가능)
• 기본 인자도 작성 가능(default 값)
  • 인자 작성 시 ‘=’ 문자 뒤 기본인자 선언

// ex)
const greeting = function (name = 'Anonymous') {
	return `Hi, ${name}`;
}
greeting(); // Hi, Anonymous

화살표 함수(Arrow Function)

• 함수를 비교적 간결하게 정의할 수 있는 문법
• function 키워드를 생략 가능
• 매개변수가 하나 뿐인 경우 매개변수의 소괄호( )도 생략 가능
  • 단, 명확성과 일관성을 위해 인자를 감싸는 소괄호는 생략하지 않는 것을 권장
• 함수 내용이 한 줄인 경우 {} 와 return도 생략 가능
• 화살표 함수는 항상 익명 함수

// 일반적인 함수 선언
const arrow1 = function (name) {
	return 'hello';
};

// 1단계. function 키워드 삭제 후 => 화살표 추가
const arrow1 = (name) => {
	return 'hello';
};

// 2단계. 인자가 1개일 경우 () 생략
const arrow1 = name => {
	return 'hello';
};

// 3단계. 함수 바디가 return을 포함한 표현식 1개일 경우, {}와 return 삭제 가능
const arrow1 = name => 'hello';

Spread Syntax(…)

• 전개 구문
• 배열이나 문자열과 같이 반복 가능한 객체를 전개하거나 분해할 때 사용

  1. 함수의 호출에서 사용(Rest Parameters)

     • 정해지지 않은 수의 매개변수를 배열로 받을 수 있음

     function restOpr(a, b, ...args) {
     	console.log([a, b, args]);
     }
     restOpr(1, 2, 3, 4, 5); // [1, 2, [3, 4, 5]]
     restOpr(1, 2);          // [1, 2, []]

  2. 배열 또는 객체가 리터럴 방식으로 선언되는 경우 사용

     • 값이 참조형인 경우 ⇒ 값을 변경 시 참조한 값도 영향

       const arr = {a: 1, b: 2};
       const array = ['one', 'two', ...arr];
       console.log(array); // ['one', 'two', {a: 1, b: 2}]
       
       arr.a = 3;
       console.log(array); // ['one', 'two', {a: 3, b: 2}]

     • 값이 원시형인 경우 ⇒ 값을 변경 시 참조한 값 영향 없음

       const arr = [1, 2];
       const array = ['one', 'two', ...arr];
       console.log(array); // ['one', 'two', [1, 2]]
       
       arr[0] = 3;
       console.log(array); // ['one', 'two', [1, 2]]