[Vue.js] - Vue 자바스크립트 화살표 함수(Arrow Function) 사용 방법

 

#화살표 함수(Arrow Function)란?
화살표 함수(Arrow Function)는 ES6(ECMAScript 2015)에서 도입된 JavaScript의 함수 표현식입니다. 일반 함수 표현식에 비해 간결하고 명료한 문법을 제공하며, 함수를 더 간편하게 정의할 수 있습니다.

화살표 함수의 기본 구문은 다음과 같습니다:

-javascript

(parameter1, parameter2, ..., parameterN) => { 
  // 함수의 본문 
}

화살표 함수는 다음과 같은 특징을 가지고 있습니다:

1. 짧은 문법: function 키워드 대신 화살표(`=>`)를 사용하여 함수를 정의합니다. 이로써 함수 정의가 더 간결하고 명료해집니다.

2. this 바인딩: 화살표 함수는 자신만의 `this`를 생성하지 않고, 함수가 정의된 컨텍스트의 `this`를 그대로 사용합니다. 이는 일반 함수에서의 `this` 동작과 다르며, 주로 객체의 메서드로 사용될 때 유용합니다.

3. 인자 처리: 인자가 하나인 경우 괄호를 생략할 수 있습니다. 인자가 없거나 여러 개인 경우 괄호로 묶어야 합니다.

4. 암묵적 반환: 함수 본문이 한 줄인 경우 중괄호와 `return` 문을 생략할 수 있으며, 해당 표현식이 암묵적으로 반환됩니다.

화살표 함수는 주로 콜백 함수나 간단한 함수 로직을 작성할 때 유용하며, 코드의 가독성을 높일 수 있습니다. 그러나 메서드 함수로 사용할 때는 주의해야 할 점이 있으므로, 사용 시 적절한 상황에서 활용하는 것이 좋습니다.

 

 

#ES6이란?

ES6는 ECMAScript 2015의 약어로, JavaScript의 표준 규격인 ECMAScript의 6번째 버전을 의미합니다. 이전에는 ES5가 가장 널리 사용되었지만, ES6의 도입으로 JavaScript에 많은 기능이 추가되고 개선되었습니다.

ES6에서 도입된 주요 기능과 개선 사항은 다음과 같습니다:

1. 화살표 함수(Arrow Function): 간결한 함수 정의를 위한 화살표 함수가 도입되었습니다. 이전에 비해 함수 작성이 더 편리해졌습니다.

2. 클래스(Class): 클래스 기반 객체 지향 프로그래밍을 위한 클래스 문법이 도입되었습니다. 이전에는 프로토타입 기반의 객체 생성 방식이 주로 사용되었습니다.

3. 블록 스코프 변수(const, let): 블록 스코프를 가지는 변수인 `const`와 `let`이 도입되었습니다. 이전에는 함수 스코프 변수인 `var`만 사용할 수 있었습니다.

4. 모듈(Module): 모듈 시스템이 도입되어, 코드를 여러 파일로 분리하고 모듈 간의 의존성을 관리할 수 있게 되었습니다.

5. 비구조화 할당(Destructuring Assignment): 객체나 배열에서 필요한 값을 추출하여 변수에 할당하는 비구조화 할당 문법이 도입되었습니다.

6. 확장된 객체 리터럴(Enhanced Object Literal): 객체 리터럴 문법이 개선되어 메서드 축약 표현, 프로퍼티 축약 표현 등을 사용할 수 있게 되었습니다.

ES6를 비롯한 ECMAScript의 버전은 JavaScript의 기능과 문법을 업데이트하고 개선하기 위해 사용됩니다. 이후 버전인 ES7, ES8, ES9 등도 추가로 발표되었으며, 이러한 버전 업데이트는 JavaScript 개발자에게 다양한 기능과 개선된 개발 경험을 제공합니다.

 

 

#Vue 화살표 함수(Arrow Function) 예시

-자바스크립트 함수 선언식

function sum(num1, num2) {
	return num1 + num2;
}

 

-자바스크립트 함수 표현식

const sum = function sum(num1, num2) {
  return num1 + num2;
}

 

-자바스크립트 화살표 함수

const sum = (num1, num2) => {
  return num1 + num2;
}

-자바스크립트 화살표 함수 (코드 간략화)

const sum = (num1, num2) => num1 + num2;

 

 

-자바스크립트 화살표 함수 (매개변수가 1개일 경우 매개변수의 소괄호 생략 가능)

const sum = num1 => num1 + num1;

 

- 자바스크립트 화살표 함수 (매개변수가 1개도 없을 경우 소괄호만 사용)

const num = () => 123;

 

-자바스크립트 화살표 함수 (객체 반환)

const obj = () => {
  return {
    no: 1,
    name:"김민수",
    age:30
  }
}

 

-자바스크립트 화살표 함수 (객체 반환 간략화)

const obj = () => ({
  no: 1,
  name:"김민수",
  age:30
});