자바스크립트 함수관련 내용 보충

 

자바스크립트에서 구구단 계산 함수를 함수선언문, 함수표현식, 화살표 함수로 각각 표현할 수 있습니다. 아래에 각각의 예시를 제시해 드리겠습니다.

1. 함수 선언문을 사용한 구구단 계산 함수:

function multiplicationTable(num) {
    for (var i = 1; i <= 9; i++) {
        console.log(num + " * " + i + " = " + (num * i));
    }
}

// 사용 예시:
multiplicationTable(5);

 

 

함수 표현식을 사용한 구구단 계산 함수:

 

var multiplicationTable = function(num) {
    for (var i = 1; i <= 9; i++) {
        console.log(num + " * " + i + " = " + (num * i));
    }
};

// 사용 예시:
multiplicationTable(5);

 

화살표 함수를 사용한 구구단 계산 함수:

 

var multiplicationTable = (num) => {
    for (var i = 1; i <= 9; i++) {
        console.log(`${num} * ${i} = ${num * i}`);
    }
};

// 사용 예시:
multiplicationTable(5);

 

함수 표현법을 모두 배우는 이유:

 

프론트엔드와 백엔드에서 모두 사용되는 함수 정의 방식은 프로젝트의 개발 스타일, 개발자의 선호도 및 팀의 규칙에 따라 다를 수 있습니다. 그러나 일반적으로 화살표 함수는 간결하고 읽기 쉬운 코드를 만드는 데 도움이 되므로 프론트엔드 및 백엔드 모두에서 많이 사용됩니다. 특히 최근의 JavaScript 프로젝트에서는 화살표 함수를 많이 선호하는 추세입니다.

 

화살표 함수는 코드 블록을 간단하게 표현할 수 있어서 콜백 함수나 간단한 함수 정의에 매우 편리합니다. 또한, 함수 내부에서 this 컨텍스트가 외부 스코프를 따르므로, 일반 함수에서 발생할 수 있는 this 관련 문제를 방지할 수 있습니다.

 

따라서, 프론트엔드와 백엔드 모두에서 화살표 함수가 가장 많이 사용되는 경향이 있습니다. 그러나 각각의 환경에서 선호되는 함수 정의 방식은 개발자나 팀에 따라 다를 수 있습니다.

 

자바스크립트에서의 this

실행 컨텍스트에 따라 동적으로 결정되는 특별한 키워드입니다. this가 어떤 값을 참조하게 될지는 함수가 호출되는 방식에 따라 다릅니다. this의 값은 다음과 같은 상황에서 결정됩니다:

1. 전역 컨텍스트: 전역 컨텍스트에서의 this는 전역 객체를 가리킵니다. 브라우저 환경에서는 window 객체가 되고, Node.js 환경에서는 global 객체가 됩니다.
2. 함수 호출: 일반적인 함수 호출에서 this는 함수를 호출한 주체에 따라 결정됩니다. 메서드 내부의 this는 메서드를 호출한 객체를 가리킵니다.
3. 메서드 호출: 객체의 메서드 내부에서 this는 해당 메서드가 속한 객체를 가리킵니다.
4. 생성자 함수 호출: 생성자 함수로 객체를 생성할 때, this는 새로 생성되는 인스턴스를 가리킵니다.
5. call, apply, bind 메서드: call, apply, bind 메서드를 사용하여 명시적으로 this를 지정할 수 있습니다.

이제 각각의 상황에 따라 this가 어떻게 동작하는지 예시 코드를 살펴보겠습니다.

 

// 전역 컨텍스트에서의 this
console.log(this === window); // 브라우저에서는 true, Node.js에서는 false

// 함수 호출에서의 this
function sayHello() {
  console.log(this);
}
sayHello(); // 브라우저에서는 window 객체, Node.js에서는 global 객체

// 메서드 호출에서의 this
const obj = {
  name: 'Alice',
  sayName: function() {
    console.log(this.name);
  }
};
obj.sayName(); // 출력: Alice

// 생성자 함수 호출에서의 this
function Person(name) {
  this.name = name;
}
const person1 = new Person('Bob');
console.log(person1.name); // 출력: Bob

// call, apply, bind 메서드에서의 this
const john = { name: 'John' };
const greet = function() {
  console.log(`Hello, ${this.name}`);
};
greet.call(john); // 출력: Hello, John

 

위의 코드에서 this는 각각의 상황에 따라 다른 값을 가지고 있음을 볼 수 있습니다. 주의할 점은 화살표 함수 내부에서 this는 외부 스코프의 this를 따르므로, 위 예시에서는 화살표 함수를 사용하지 않았습니다.

 

this 관련 문제란?

 

일반 함수(일반적인 함수 선언문 또는 함수 표현식)에서의 this는 해당 함수가 호출되는 방식에 따라 동적으로 결정됩니다. 이 때문에 일반 함수 내에서 this가 예상과 다르게 동작할 수 있고, 특히 콜백 함수나 중첩된 함수 등에서는 this의 값이 원하는 대상을 가리키지 않을 수 있습니다. 이러한 문제를 해결하기 위해 JavaScript에서는 화살표 함수를 도입했습니다.

 

화살표 함수에서의 this는 화살표 함수가 정의된 시점에서 외부 스코프의 this를 유지합니다. 다시 말해, 화살표 함수 내부에서 this를 사용하면 해당 화살표 함수를 감싸고 있는 가장 가까운 외부 함수의 this를 가리키게 됩니다. 이는 화살표 함수가 호출되는 방식에 관계없이 항상 동일한 this 값을 가지므로, 예측 가능성이 높아지고 코드를 이해하기 쉬워집니다.

 

예를 들어, 다음과 같은 코드에서 일반 함수와 화살표 함수를 비교해 보겠습니다.

const obj = {
  name: 'Alice',
  getName: function() {
    return this.name;
  },
  getArrowName: () => {
    return this.name;
  }
};

console.log(obj.getName()); // 출력: Alice
console.log(obj.getArrowName()); // 출력: undefined (or window.name if not in strict mode)

 

위 코드에서 getName() 메서드는 일반 함수로 정의되었기 때문에, 호출될 때 this는 해당 메서드를 호출한 객체인 obj를 가리킵니다. 따라서 this.name은 'Alice'가 됩니다.

 

그러나 getArrowName() 메서드는 화살표 함수로 정의되었습니다. 화살표 함수는 외부 스코프의 this를 유지하므로, getArrowName() 내부의 this는 obj가 아니라 외부 스코프의 this를 가리키게 됩니다. 만약 이 코드가 전역 스코프에서 실행되었다면, this.name은 undefined가 될 것입니다. 이는 getName() 메서드와 달리 예상치 못한 동작을 유발할 수 있습니다.

 

따라서, 화살표 함수를 사용하면 일반 함수에서 발생할 수 있는 this 관련 문제를 방지할 수 있습니다.