자바스크립트에서의 함수

변시윤·2023년 3월 28일
0

함수 선언식 vs 함수 표현식

-함수 선언식(Functino Declation)함수 표현식(Function Expression)
정의 방식function 키워드변수에 대입
호이스팅OX
호출호이스팅의 영향으로 어디서나 호출 가능변수를 호출하여 실행
함수명필요불필요
  • 함수 선언식

    function sum(a, b) {
      return a + b;
    }
  • 함수 표현식

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


함수 표현식의 종류

기명 함수(Named Function)

함수 이름을 지정하여 해당 함수 내부에서 자기 자신을 참조할 수 있다.

const sum = function add(a, b) {
  return a + b;
};
console.log(sum(2, 3)); // Output: 5
console.log(add(2, 3)); // ReferenceError: add is not defined

익명 함수(Anonymous Function)

함수 이름을 생략한 함수 표현식으로, 해당 함수는 변수에 할당되어 사용된다.

const sum = function(a, b) {
  return a + b;
};
console.log(sum(2, 3)); // Output: 5

즉시 실행 함수(Immediately Invoked Function)

함수 정의 후 즉시 실행되는 함수로 한 번의 실행만 필요한 초기화 코드를 작성할 때 유용하다.

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

화살표 함수(Arrow Function)

ES6에서 추가된 함수 작성법으로, function 키워드 대신 화살표 =>를 사용하여 선언하는 방식이다.

this 바인딩 방식에 있어서 함수 선언식과 차이가 있다. this가 가리키는 값이 함수를 선언할 때의 값으로 고정된다. 이 덕분에 함수 선언식에서 발생하는 this 바인딩 오류를 방지할 수 있다. 그러나 this를 사용해야 하는 경우라면 함수 선언식을 사용해야 한다.

함수 내부에서 return을 사용하여 값을 반환할 수 있다. 단, return문이 중괄호{}로 둘러싸여 있다면 암시적 변환이 불가능하다. 따라서 return문을 통해 값을 반환하기 위해선 중괄호를 생략해야 한다.

const subtract = (a, b) => {
  return a - b;
}

인수가 하나인 경우엔 괄호를 생략할 수 있다.

const square = x => x * x;

단, 인수가 없거나 2개 이상이라면 괄호를 사용한다.

생성자 함수

객체를 생성하기 위한 함수. 생성자 함수를 사용시 유사한 객체를 다량 생성할 수 있으며, 객체의 속성과 메서드를 동일하게 정의한다. new 연산자와 함께 호출한다.

생성자 함수 정의

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

객체 생성

const person1 = new Person('Alice', 25);
const person2 = new Person('Bob', 30);

객체 메서드 호출

person1.sayHello(); // 출력: Hello, my name is Alice and I'm 25 years old.
person2.sayHello(); // 출력: Hello, my name is Bob and I'm 30 years old.
profile
개그우먼(개발을 그은성으로 하는 우먼)

0개의 댓글