Skip to content

JS/SevelteKit

(x, y) => (x + y)

Author
siwon
Date
2024-01-10 13:00
Views
345

이것은 Arrow function으로 작성된 간단한 함수입니다. 이 함수는 주어진 두 개의 매개변수 `x`와 `y`를 받아서 그들의 합을 반환합니다. 


```javascript

const add = (x, y) => (x + y);

```


이 함수는 괄호로 둘러싸인 `(x + y)`를 반환 값으로 가지고 있습니다. 괄호는 가독성을 높이기 위해 사용되었을 수 있으며, 실제로는 괄호를 사용하지 않고도 함수를 작성할 수 있습니다.


```javascript

const add = (x, y) => x + y;

```


이 두 버전의 코드는 기능적으로 동일하며, 괄호의 사용 여부는 프로그래머의 스타일과 가독성에 따라 다를 수 있습니다.

Arrow functions는 함수가 생성될 때의 컨텍스트에서 `this` 값을 가져옵니다. 이것은 함수가 호출되는 시점이 아니라 정의될 때의 컨텍스트에서 `this`를 결정한다는 의미입니다. 이 특성은 몇 가지 장점과 함께 오는데, 기존의 함수 선언문이나 함수 표현식과는 다른 동작을 가지고 있습니다.


1. **외부 스코프의 `this`를 상속:**

   ```javascript

   function RegularFunction() {
     this.value = 1;
     setTimeout(function() {
       this.value++;
       console.log(this.value); // this는 여기서 RegularFunction 객체를 참조하지 않음
     }, 1000);
   }
   const regularInstance = new RegularFunction(); // 출력 결과는 NaN 또는 에러일 것입니다.

   ```


   위의 예제에서 `setTimeout` 내부의 콜백 함수에서 `this`는 `RegularFunction` 객체를 참조하지 않고, 전역 객체를 참조하게 됩니다. 이 문제를 해결하려면 다음과 같이 `bind`나 `that` 변수를 사용하여 해결할 수 있습니다.


   ```javascript

   function RegularFunction() {
     this.value = 1;
     const that = this;
     setTimeout(function() {
       that.value++;
       console.log(that.value); // this는 여기서 RegularFunction 객체를 참조
     }, 1000);
   }
   const regularInstance = new RegularFunction(); // 출력 결과는 2일 것입니다.

   ```


   반면에, Arrow function을 사용하면 외부 스코프의 `this`를 그대로 가져와서 이러한 문제를 해결할 수 있습니다.


   ```javascript

   function ArrowFunction() {
     this.value = 1;
     setTimeout(() => {
       this.value++;
       console.log(this.value); // this는 여기서 ArrowFunction 객체를 참조
     }, 1000);
   }
   const arrowInstance = new ArrowFunction(); // 출력 결과는 2일 것입니다.

   ```


2. **클로저와 함께 사용:**

   Arrow function을 사용하면 클로저에서 더 간결한 코드를 작성할 수 있습니다. 외부 함수의 `this`를 명시적으로 처리할 필요가 없기 때문입니다.


   ```javascript

   function OuterFunction() {
     this.value = 1;
     const innerFunction = () => {
       this.value++;
       console.log(this.value);
     };
     return innerFunction;
   }
   const closureInstance = new OuterFunction();
   const innerFunction = closureInstance();
   innerFunction(); // 출력 결과는 2일 것입니다.

   ```

Arrow function의 이러한 특징은 코드를 더 간결하게 만들어주고, 특히 콜백 함수를 다룰 때 유용합니다. 하지만 모든 상황에서 Arrow function을 사용해야 하는 것은 아니며, 특히 `this`가 동적으로 바뀌어야 하는 경우에는 일반적인 함수 선언문이나 함수 표현식이 더 적합할 수 있습니다.