[javascript] 함수, 클래스, 메서드

함수

function 키워드로 선언하며 return 키워드로 값을 반환한다.

function func1(var1, var2...) {
	// do something
    return
}

만약 함수가 아무런 값도 반환하지 않거나, return 뒤에 값이 없다면 undefined를 반환한다.

매개변수

js의 모든 함수는 0개 이상의 이름이 있는 매개변수를 가질 수 있다.

만약 미리 선언되지 않은 n개의 '나머지 매개변수(rest parameter)'를 전달받으려면 ...args 키워드를 사용한다.

function add(a, b, ...args) {
	// 1, 2를 제외한 나머지 매개변수는 배열로 args에 전달됨
	console.log(args)
	return a + b;
}

console.log(add(1, 2, 3, 4, 5));

만약 매개변수와 함께 선언된 함수에 아무런 값도 전달하지 않는다면, 이 매개변수는 초기화되지 않은 변수기에 undefined이다.

function add(a, b, ...args) {
	console.log(args)
	// undefined + undefined식은 NaN으로 평가됨
	return a + b;
}

console.log(add());

대입 연산자를 이용해 매개변수를 기본값으로 초기화 할 수 있다.

function add(a, b = 1) {
	return a + b;
}

console.log(add(3)); // 4

익명 함수

js에선 함수를 선언할 때 이름이 없는 함수가 허용된다.

주로 다른 함수의 인자로 함수를 전달할 때, 호출할 수 있는 변수에 할당할 때, 함수의 결과로 함수를 반환할 때 사용한다.

// 위 예제랑 완전히 동일
const add = function(a, b, ...args) {
	console.log(args);
	return a + b;
}

console.log(add);

이러한 익명함수는 선언과 동시에 호출도 가능하다.

const result = (function(a, b) {
	return a + b;
})(1, 2);

console.log(result);

괄호에 집중하자. 첫번째 소괄호까지가 하나의 function 값이며, 두번째 소괄호가 호출 구문이다.

화살표 함수

익명 함수 표현에 대한 간결한 표현으로, 의미적으로 function 키워드를 사용해 선언한 함수와 완전히 동일하진 않다.

괄호 안에 매개변수와 중괄호 안에 실행할 코드를 작성하고, 이를 화살표 (=>)로 연결한다.

const add = (a, b) => {
	return a + b;
}

// 실행할 코드가 한 줄이라면 중괄호는 생략할 수 있으며,
// 그 한 줄의 코드가 반환문이라면 return 키워드 역시 생략할 수 있다.
const add = (a, b) => a + b;

console.log(add);

화살표 함수로 선언된 함수는 바인딩이 존재하지 않으며, 메서드나 생성자로 사용할 수 없다.

function add1(a, b) {
  return a + b;
}

const add2 = (a, b) => a + b;

console.log(Object.getOwnPropertyDescriptors(add1));
console.log(Object.getOwnPropertyDescriptors(add2));

두번째 함수의 속성이 조금 더 간결한것을 볼 수 있다.

클래스

class 예약어로 선언하며 인스턴스화 할 수 있는 함수를 말한다.

클래스가 인스턴스화 할 때 가장 먼저 실행되는 생성자 함수는 constructor로 선언한다.

특정 클래스를 인스턴스화 하려면 new 키워드를 사용한다.

class Person {
	constructor(name) {
		// this는 이 클래스를 상속받은 인스턴스를 의미
		this.name = name;
	}
}

// 이제 p1은 Person의 인스턴스며, name 속성의 값으로 "김시윤"을 갖는다.
const p1 = new Person("김시윤");

메서드

클래스의 속성으로 함수를 선언할 수도 있는데, 이런 함수를 메서드라고 부른다.

class Person {
  constructor(name, birth) {
      this.name = name;
      this.birth = birth;
  }
  
  // 여기서는 class의 블럭에 함수를 작성하였지만,
  // constructor 안에 this.clacAge의 값으로 익명 함수를 작성하는것과 다르지 않다.
  calcAge(year) {
      return year - this.birth;
  }
}

const p1 = new Person("김시윤", 2004);
console.log(p1.calcAge(2025));

이러한 메서드들은 반드시 인스턴스화 해서 사용해야 한다.