[자바스크립트 기초] 함수의 선언과 표현, arrow function

드림코딩 자바스크립트 기초 강의를 들으며 학습한 내용을 정리해보았다.
⭐️ 재생목록 바로가기

1️⃣ function

• 프로그램을 구성하는 가장 기본적인 구성 요소
• subprogram 이라고도 불리며, 재사용이 가능하다
• 보통 한 가지 일이나 한 가지 값을 계산하기 위해 사용

💡 function 또한 object이기 때문에, 변수로 할당 / 파리미터로 전달 / 리턴 가능

1) 타입스크립트

• function의 타입이 중요한 경우(string인지, number인지…)

function log(message : string){
	console.log(message);
}

• 타입스크립트에서는 항상 파리미터나 리턴의 타입을 명시하도록 되어있음
  

function log(message : string) number{
	console.log(message);
	return 0;
}

2) early return, early exit

💡 코드의 가독성을 높이는 원칙

• 조건에 맞는 것을 if 문 안에, 즉 블럭 안에 로직을 전부 작성하면 가독성이 많이 떨어짐
  -> 조건에 맞지 않는 것 / undefined인 값 등을 먼저 return 해주고(early return), 그 뒤에 필요한 로직을 쭉 작성하는 것이 나음(early exit)

⬆️ early return, early exit를 적용한 코드
(출처: 유튜브 드림코딩 by 엘리)

---

2️⃣ parameter

1) default parameter

• added in ES6
• 파리미터 값이 지정되지 않았을 경우에 초기값을 넣어줄 수 있다
  (예전엔 if 문으로 undefined 인 조건문을 만들어 구현했었음)

function showMessage(message, from = 'unknown'){
	console.log(`${message} by ${from}`)
}
showMessage('hello!')// 값이 지정되지 않은 from은 디폴트값으로 호출, hello! by unknown

2) rest parameter

• 나머지 매개변수 (added in ES6)
• 매개변수를 어레이로 반환할 수 있음
  💡 매개변수가 여러 개 일때는 Rest parameter가 마지막에 위치해야함

⬆️ default parameter와 rest parameter , rest parameter를 통해 배열의 값을 반환하는 3가지 방법
(출처: 유튜브 드림코딩 by 엘리)

---

3️⃣ Arrow function

• 간결한 함수 표현식
• function 이름이 없을 때 사용 가능

const add = function(a, b){
	return a + b;
}
//일반적인 함수식

const add = (a, b) => a + b;
//화살표 함수식

💡 실행문이 여러줄이라면, {} 쓰고 return 넣어야 함

---

4️⃣ IIFE

• Immediately Invoked Function Expression

• 함수 선언과 동시에 실행 시킬 수 있는 방법
  -> function 전체를 소괄호로 감싸고, 맨 끝에 실행() 을 명령한다.

(Function hello(){
	console.log(“IIFE”);
})();