[JS] 함수(Function)

함수 (Function)

: 속성 및 method를 가실 수 있는 일급(first-class) 객체이며, 인자를 가질 수 있는 코드블록이다. 함수는 함수 자체의 범위를 가진다.

: 함수는 코드를 재사용할 수 있고, 유지보수가 편리하기 때문에 사용한다.

함수의 특징

1. 함수는 값이기 때문에 변수 안에 담길 수 있다.
2. 객체 속성 안에 method로 담길 수 있다.
3. 함수의 return 값 및 배열의 값으로도 사용될 수 있다.
4. 다른 함수의 인자 값을 전달할 수 있다.

함수 정의

: 자바스크립트에서 함수를 정의하는 방법은 2가지가 있다. 하나는 함수 선언식이고, 하나는 함수 표현식이다.

함수 정의 : 함수 선언식

: 함수 선언식은 다음과 같이 함수 이름을 사용하여 정의하는 방법이다.

 function sayHello() {
    console.log("Hello, World!");
}

함수 정의 : 함수 표현식

: 변수에 함수를 할당하는 방식으로 사용한다.

const sayHello = function() {
   console.log("Hello, World!");
}; 

함수 선언식과 함수 표현식의 차이점으로는 호이스팅이다.

함수 선언식과 함수 표현식의 차이점

함수 선언식

• 함수 선언문이 정의되기 전에 호출 가능하다. (호이스팅)
• 코드 중간에 독자적인 구문 형태로 존재한다.

함수 표현식

• 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성한다. 즉, 실행 흐름이 함수에 도달했을 때부터 해당 함수를 사용할 수 있다.

자바스크립트에서 변수와 함수 선언을 현재 스코프의 최상위로 올리게 된다. 이를 호이스팅(Hoisting)이라 한다. 이는 코드 실행 전에 자바스크립트 엔진에 의해 처리된다.

1. 변수 호이스팅 : 선언된 변수는 현재 스코프의 최상위로 끌어올려지지만, 할당(초기화)는 끌어올려지지 않는다. 즉, 변수를 선언하지 않고 사용하려고 하면, undefined가 할당된다.
2. 함수 호이스팅 : 함수 선언은 전체가 호이스팅된다. 즉 함수 선언식과 함수 표현식 둘 다 호이스팅이 된다. 하지만, 함수 할당은 호이스팅이 되지 않으므로, 변수에 함수가 할당된 이후에 해당 함수를 호출할 수 있다. 함수 선언식은 전체 함수가 호이스팅되므로 함수 선언 이전에도 함수를 호출할 수 있다.

화살표 함수 (Arrow Function)

: ES6부터 화살표함수라는 새로운 문법 방식으로 함수를 만들 수 있게 되었다. 화살표 함수는 => 기호를 사용하여 function 키워드를 생략 할 수 있다.

화살표 함수 표현

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

매개변수가 한 개이면, 매개변수 괄호 부분을 생략할 수 있다.

//매개 변수가 없을 때
()=> {
	//실행할 코드
}

//매개변수가 한 개인 경우, 소괄호 생략 가능 => 여러 개라면 불가능하다
x => {
	//실행할 코드
}

함수 내 코드가 한 줄이고, 단순히 return 만 존재한다면 중괄호와 return 키워드를 생략할 수 있다.

x => {return x * x}
x => x*x

객체 반환 시 소괄호로 감싼 후 반환해야한다.

화살표 함수 특징

: 화살표 함수는 function을 축약하여 쓰는 문법이지만, 고유의 특징을 가진다.

1. 화살표 함수에는 this가 존재하지 않는다.
: 화살표 함수에서 this 키워드로 접근하면, 자신이 아닌 외부에서 값을 가지고 오게 된다. 즉, 자신을 감싸고 있는 외부환경의 this를 따라가는 정적으로 결정된다. 그러므로 화살표 함수의 this는 주로 콜백함수나 내부함수로 사용된다.

function Counter() {
    this.count = 0;
    setInterval(() => {
        this.count++;
        console.log(this.count);
    }, 1000);
}

const counter = new Counter(); // 1, 2, 3, ...

2. 화살표 함수에는 arguments가 존재하지 않는다.
: arguments 는 함수 내에서 모든 전단된 인수를 포함하는 유사 배열 객체이다. 일반 함수에서는 arguments 객체를 사용하여 함수에 전달된 모든 인수에 접근 할 수 있다. 그러나 화살표 함수에서는 arguments 객체를 사용할 수 없다.
화살표 함수에서 arguments를 사용하려고 하면 외부 스코프에서 해당 변수를 찾게된다. 즉, 화살표 함수 내에서 arguments 변수를 사용하면 외부 스코프에서 정의된 arguments 변수를 참조한다.

function regularFunction() {
  console.log(arguments);
}

regularFunction(1, 2, 3); // [1, 2, 3]

const arrowFunction = () => {
  console.log(arguments); // Error: arguments is not defined
};

arrowFunction(1, 2, 3);

화살표 함수에서 함수에 전달된 모든 인수에 접근하려면, 일반적으로 나머지 변수나 spread 문법을 사용한다.

const arrowFunctionWithRestParameters = (...args) => {
  console.log(args);
};

arrowFunctionWithRestParameters(1, 2, 3); // [1, 2, 3]

3. 위와 같은 특성으로 인해, 화살표 함수는 생성자 함수가 없다.
: 생성자는 객체를 생성하기 위한 함수로, new 키워드와 함께 호출되어 새로운 객체를 반환하는 함수이다. 하지만 화살표 함수는 생성자로 사용할 수 없기에 new 키워드와 함께 호출하면 에러가 발생한다.