화살표 함수와 객체

ES6에서 도입된 화살표 함수와 함수의 스코프, 객체 지향 프로그래밍의 기본이 되는 객체와 메서드 활용에 대해 알아보자.

스코프와 호이스팅

스코프는 변수의 유효 범위를 결정하는 규칙이다. 자바스크립트에서는 전역 스코프, 함수 스코프, 그리고 ES6부터 추가된 블록 스코프가 있다.

 

호이스팅은 변수와 함수 선언이 코드 실행 전에 메모리에 먼저 올라가는 현상을 말한다. 정확히 말하면, 실제로 올라가는 것이 아니라 끌어올린 것처럼 선언부를 먼저 인식한다는 개념이다.

function sumNumbers(a, b) {
  const modifiedB = b + 5;
  return a + modifiedB;
}
console.log(sumNumbers(3, 7)); // 15 (3 + (7 + 5))

함수 내에서 선언된 변수 (여기서는 modifiedB)는 함수 내부에서만 접근 가능한 지역 변수이다.

 

함수 표현식과 화살표 함수

함수 표현식은 변수에 함수를 할당하는 방식이다. ES6에서 도입된 화살표 함수는 기존 함수 표현식보다 더 간결하게 작성할 수 있는데, 특히 함수 본문이 한 줄일 경우 중괄호와 return 키워드를 생략할 수 있어 코드가 깔끔해진다.

// 일반 함수 표현식
const multiply1 = function(a, b) {
  return a * b;
};

// 화살표 함수
const multiply = (a, b) => a * b;
console.log(multiply(3, 4)); // 12

 

위 코드를 실행하면 화살표 함수를 사용한 multiply 함수가 두 수를 곱한 결과인 12를 콘솔에 출력한다.

또한, 화살표 함수는 자신만의 this를 가지지 않고 상위 스코프의 this를 그대로 사용한다는 특징이 있는데, 이 때문에 콜백 함수로 많이 활용된다.

 

객체와 메서드

자바스크립트에서 객체는 관련 데이터와 기능을 하나로 묶는 자료구조이다. 키-값 쌍으로 이루어지며, 객체 내부의 함수는 메서드라고 부른다.

const book = {
  title: "러닝스쿨! 자바스크립트 첫걸음",
  author: "김효빈",

  getSummary: function() {
    return `책의 제목은 '${this.title}', 저자는 '${this.author}'이다.`;
  }
};
console.log(book.getSummary());

위 코드는 book 객체의 getSummary 메서드를 호출하여 책의 제목과 저자 정보를 문자열로 반환한다.

 

객체 메서드 내에서 this 키워드는 해당 객체를 가리키는데, 이를 통해 객체의 다른 속성에 접근할 수 있다.

ES6에서는 다음과 같이 메서드를 좀 더 간결하게 정의할 수 있는 축약 문법도 제공한다.

// ES5 방식의 메서드 정의
const book = {
  // ...
  getSummary: function() {}
};

// ES6의 메서드 축약 문법
const bookES6 = {
  // ...
  getSummary() {}
};

ES6 메서드 축약 문법은 function 키워드를 생략하고 메서드 이름 뒤에 바로 괄호를 붙여 정의할 수 있다.

 

주의할 점

• 화살표 함수는 콜백에 유용하지만, 객체 메서드로는 적합하지 않다
• 함수 스코프를 제대로 활용하면 변수 관리가 훨씬 쉬워진다