[JS] 함수 종합 정리

함수 선언

자바스크립트에서는 함수를 다양한 방식으로 선언할 수 있다.
가장 일반적인 방법은 fuction 키워드를 통해 함수를 선언하는 방식이다.

// 함수 선언
function sayHi() {
	console.log('Hi!');
}

이렇게 작성하는 방식을 함수 선언(function declaration)이라고 한다.

함수 표현식

그리고 자바스크립트에서 함수는 값으로 취급될 수도 있기 때문에 변수에 할당해서 함수를 선언할 수도 있다.

// 함수 표현식
const sayHi = function () {
	cosole.log('Hi!');
};

이렇게 함수를 값으로 다루는 방식을 함수 표현식 (fuction expression)이라고 한다.

다양한 함수의 형태

자바스크립트에서 함수는 값으로 취급된다. 이런 특징은 코드를 작성할 때 다양한 형태로 활용될 수 있다.

// 변수에 할당해서 활용
const printJS = function () {
	console.log('JS');
}

// 객체의 메소드로 활용
const codeit = {
	printTitle: function () {
    	console.log('coding');
    }
}

// 콜백 함수로 활용
myBtn.addEventListener('click', function () {
	console.log('button is clicked!');
});


// 고차 함수로 활용
fuction myFuction() {
	return function () {
  		console.log('Yeah');  
    };
};

파라미터의 기본값

자바스크립트에서 함수의 파라미터는 기본값을 가질 수가 있다. 기본값이 있는 파라미터는 함수를 호출할 때 아규먼트를 전달하지 않으면, 함수 내부의 동작은 이 파라미터의 기본값을 가지고 동작하게 된다.

function sayHi(name = 'Codeit'){
	console.log(`Hi ${name}`);
}

sayHi('Yujin'); // Hi Yujin
sayHi(); // Hi Codeit

arguments 객체

자바스크립트 함수 안에는 arguments라는 독특한 객체가 존재한다.
arguments 객체는 함수를 호출할 때 전달한 아규먼트들을 배열의 형태로 모아둔 유사 배열 객체이다. 특히, 함수를 호출할 때 전달되는 아규먼트의 개수가 불규칙적일 때 유용하게 활용될 수 있다.

function printArguments() {
	//	arguments 객체의 요소들을 하나씩 출력
  	for (const arg of arguments) {
    	console.log(arg);
    }
}

printArguments('rabbit', 'turtle', 'tiger');

참고로 arguments라는 객체를 활용하고자 한다면 함수 안에서 사용할 파라미터나 변수, 함수의 이름을 arguments라고 짓는 것은 피하는 게 좋다.

Rest Parameter

arguments 객체를 이용하는 것 말고도 불규칙적으로 전달되는 아규먼트를 다루는 방법이 있다. 파라미터 앞에 마침표 세 개를 붙여주면, 여러 개로 전달되는 아규먼트들을 배열로 다룰 수가 있게 된다.
그리고 arguments객체는 유사 배열이기 때문에 배열의 메소드를 활용할 수 없는 반면, rest parameter는 배열이기 때문에 배열의 메소드를 자유롭게 사용할 수 있다는 장점이 있다.

function printArguments(...args) {
  // args 객체의 요소들을 하나씩 출력
  for (const arg of args) {
    console.log(arg); 
  }
}

printArguments('Young', 'Mark', 'Koby');

rest parameter는 다른 일반 파라미터들과 함께 사용될 수도 있다.

function printRankingList(first, second, ...others) {
  console.log('코드잇 레이스 최종 결과');
  console.log(`우승: ${first}`);
  console.log(`준우승: ${second}`);
  for (const arg of others) {
    console.log(`참가자: ${arg}`);
  }
}

printRankingList('Tommy', 'Jerry', 'Suri', 'Sunny', 'Jack');

이름 그대로 앞에 정의된 이름 그대로 앞에 정의된 파라미터에 argument를 먼저 할당하고 나머지 argument를 배열로 묶는 역할을 하기 때문에 일반 파라미터와 함께 사용할 때는 반드시 가장 마지막에 작성해야 한다.

Arrow Fuction

arrow function은 익명 함수를 좀 더 간결하게 표현할 수 있도록 ES2015에서 새롭게 등장한 함수 선언 방식이다.
아래 코드와 같이 표현식으로 함수를 정의할 때 활용될 수도 있고 콜백 함수로 전달할 때 활용할 수도 있다.

// 화살표 함수 정의
const getTwice = (number) =< {
  return number * 2;
};

// 콜백함수로 활용
myBtn.addEventListener('click', () => {
  console.log('button is clicked!');
});

화살표 함수는 다양한 상황에 따라 축약형으로 작성될 수 있다.

// 1. 함수의 파라미터가 하나 뿐일 때
const getTwice = (number) => {
  return number * 2;
}

// 파라미터를 감싸는 소괄호 생략 가능
const getTwice = number => {
  return number * 2;
};

// 2. 함수 동작 부분이 return문만 있을 때
const sum = (a, b) => {
  return a + b;
};

// return문과 중괄호 생략 가능
const sum = (a, b) => a + b;

그리고 Arrow function이 일반 함수와 몇 가지 차이점이 있다.
가장 대표적인 차이점은 arguments객체가 없고, this가 가리키는 값이 일반 함수와 다르다는 점이다.
arrow function을 사용할 땐 이런 부분을 잘 고려야해야 된다.

this

자바스크립트에는 this라는 조금 특별한 키워드가 있다.
웹 브라우저에서 this가 사용될 때는 전역 객체, Window 객체를 가지게 된다. 하지만 객체의 메소드를 정의하기 위한 함수 안에선 메소드를 호출한 객체를 가리키게 된다.

const user = {
  firstName: 'Tess',
  lastName: 'Jang',
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`;
  },
};

console.log(user.getFullName()); // getFullName 안에서의 this는 getFullName을 호출한 user객체가 담긴다!

출처 : 코드잇 - 모던 자바스크립트