[JavaScript] Rest Parameter, Arrow Function, this 정리

파라미터 (Parameter)

함수 선언 부분에서 소괄호 안에 작성된 것이 파라미터, 함수 호출하는 부분에서 파라미터로 전달하는 값을 아규먼트라고 한다.

function Func (파라미터) {
	console.log(파라미터);
}

Func(아규먼트);

---

파라미터의 기본값

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

function Hello (name = 'hwichul') {
	console.log(`Hi! ${name}`);
}

Hello('eunju'); // Hi! eunju
Hello(); // Hi! hwichul

---

arguments 객체

arguments 객체는 함수를 호출할 때 전달한 아규먼트들을 배열의 형태로 모아둔 유사 배열 객체이다.

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

printArguments('ggum', 'dal', 'bam');
// ggum
// dal
// bam

---

Rest Parameter

Rest parameter는 앞에 마침표 세 개를 붙여주면 배열로 아규먼트를 다룰 수 있다.

arguments 객체는 유사 배열이기 때문에 배열의 메소드를 활용할 수 없는데 Rest Parameter는 배열이기 때문에 배열의 메소드를 사용할 수 있다.

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

printArguments('ggum', 'dal', 'bam');
// ggum
// dal
// bam

 

파라미터(first, second)에 순서대로 argument를 먼저 할당하고 나머지(...other) argument를 배열로 묶는 역할을 하며, 일반 파라미터와 함께 사용할 때는 가장 마지막에 작성해야 한다.

function printRankingList(first, second, ...others) {
  console.log(`1등: ${first}`);
  console.log(`2등: ${second}`);
  for (const arg of others) {
    console.log(`참가자: ${arg}`);
  }
}

printRankingList('ggum', 'dal', 'bam', 'eunju', 'hwichul');
// 1등: ggum
// 2등: dal
// 참가자: bam
// 참가자: eunju
// 참가자: hwichul

 

참고로 Spread 구문과 헷갈릴 수 있는데 Rest Parameter는 여러 개의 argument를 하나의 파라미터로 묶는 방식이고, Spread 구문은 하나로 묶여있는 값을 각각의 개별값으로 펼치는 방식이다.

---

Arrow Function

화살표 함수는 익명 함수를 더 간결하게 표현할 수 있도록 만든 함수 선언 방식이다.

function을 지우고 소괄호 () 우측에 => 화살표를 추가하면 된다.

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


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

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

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

// 함수 내부의 동작이 return문 하나라면
const getTwice = number => number * 2;

// 함수 내부의 동작이 return문 하나지만 객체일 경우 객체를 소괄호로 감싸면 사용가능
// 객체의 중괄호를 함수 동작 부분의 중괄호로 착각하기 때문
const getTwice = number => ({name: 'hwichul'});


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

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

 

일반 함수와의 차이점은 화살표 함수는 arguments 객체가 없고, this가 가리키는 값이 다르다.

---

this

웹 브라우저에서 this가 사용될 때는 전역 객체, window 객체를 가지게 되고, 함수 안에서는 메소드를 호출한 객체를 가리키게 된다.

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

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