[JS중급] 함수 다루기

---

함수 다루기

• 함수 생성
  1. 함수 선언(Function Declaration) : 함수 선언 전 호출 가능(호이스팅) | 보통은 이 방법 사용
  2. 함수 표현식(Function Expression) : 함수 선언을 변수에 할당(값처럼 사용) | 변수 특성상 선언 이전에 접근 불가
     • 기명 함수 표현식 : 함수 표현식으로 함수 생성시 함수에 이름을 붙여줌 | 함수 이름은 함수 내부에서 함수 자체를 가리킬 때 사용할 수 있고, 함수를 외부에서 함수를 호출할 때 사용할 수는 없음 | 함수 내부에서 함수 자신을 사용하려고 할 땐 함수표현식에선 반드시 기명 함수 표현식을 사용하는 것이 좋음

// 1. 함수 선언(Function Declaration)
function 함수이름(파라미터) {
  동작
  return 리턴값;
}

// 2. 함수 표현식(Function Expression)
const printCoding = function () {
	console.log('Coding');
};
printCoding();

// 기명 함수 표현식
const sayHi = function printHiInConsole() {
  console.log('Hi');
};
console.log(sayHi.name); // printHiInConsole

• 즉시 실행 함수(IIFE) : 함수 선언과 동시에 즉시 실행되는 함수 | 함수 작명을 하더라도, 외부에서 재사용 불가 ~> 일반적으로 이름 없는 익명 함수 사용
  • 활용 : 초기화 기능, 재사용이 필요 없는 일회성 동작을 구성할 때 많이 활용 → 함수의 리턴값을 바로 변수에 할당하고 싶을 때 활용 | 추가로, IIFE에서 사용하는 변수들은 함수 내에서만 유효하기에, 일시적으로 사용할 변수 이름들을 조금 자유롭게 작성할 수 있음

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

• 값으로서 함수 익히기
  • 콜백함수(callback F) : 다른 함수의 파라미터에 전달된 함수
  • 고차함수(higher order F) : 함수를 리턴하는 함수
  • 일급함수(First Class F) : 함수가 다른 데이터 구조나 함수에 할당될 수 있고, 다른 파라미터에 전달될 수 있고, 다른 함수에 리턴 값이 될 수 있는 것
• 파라미터(Parameter)
  • 아규먼트(Argument) : 함수 호출 시 파라미터를 전달하는 값 | 둘이 헷갈리지 않게 주의해야 함
  • 파라미터가 있는 함수에 아무 값도 전달 안하면 undefined 값으로 동작
    • 파라미터로 undefined 전달시 기본값으로 동작
• 아규먼트(Argument) : 아규먼트 개수에 따라 유연하게 동작하는 함수 | 배열과 비슷하지만 배열 메서드 사용 불가

function test(a, b, c) {
	console.log(argument.length);
}
test('hi', 'hello'); // 2
test('hi', 'hello', 'help', 'hell'); // 4

function test2(a, b, c) {
	for (const arg of arguments) {
    	console.log(arg);
    }
}
test('hi', 'hello', 'help', 'hell'); // hi hello help hell

• Rest parameter : 마침표 3개(...)를 붙인 것 | 배열이기 때문에, 배열 메서드 사용 가능 | 일반 파라미터와 함께 사용 가능(단, 제일 마지막에 사용)

function test2(...args) {
	for (const arg of args) {
    	console.log(arg);
    }
}
test('hi', 'hello', 'help', 'hell'); // hi hello help hell

function printRank(first, seconds, ...others)

• Arrow Function : 기존의 함수 선언을 보다 간결하게 만들어 줌 | 이름 없는 익명 함수 | argument가 없는 함수이기 때문에, argument 사용시 에러 발생
  • function 키워드를 지워주고, 소괄호 오른편에서 등호와 부등호를 사용해서(=>) 표현
  • 파라미터가 하나인 Arrow Function은 소괄호 생략 가능
  • 내부 동작 부분이 return문 하나만 있다면, 중괄호와 함께 return문 생략 가능... 단, 리턴값이 객체인 경우는 제외

 

// (변경 전) 기본 모양
const getTiwce = function(number) {
	return number * 2;
};
// (변경 후) 기본 모양
const getTiwce = (number) => {
	return number * 2;
};
// 더 줄이기
const getTwice = number => number *2;

// 리턴값이 객체인 경우
const getCode = () => {
	return {name: 'code', };
};
// 줄이기
const getCode = () => ({return {name: 'code', });

• this 키워드 : 함수를 호출한 객체를 가리키는 키워드 | 값이 미리 결정되는 것이 아닌 함수 호출시 어떤 함수가 호출했느냐에 따라서 값이 바뀜
  • Arrow F에서 this값 : 호출 대상에 따라 상대적으로 변하는게 아닌  Arrow F가 선언되기 직전에 그때 유효한 값과 똑같은 this값을 가지고 동작 → 이러한 특징 때문에 객체에 메서드를 만들 때 Arrow보다 일반함수가 권장됨.