[JavaScript] ES6 문법 개념

ES6문법 이란?

ES6(ES2015)는 ECMAScript 6 라고도 불리며, ECMAScript의 6번째 버전이다.

여기서 ECMA는 기술규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다.

 

let, const

기존에는 변수를 선언할때 var 키워드를 사용했지만, ES6부터는 let, const 키워드를 사용하여 블록 범위의 변수와 상수를 선언할수 있다

let

let은 재할당이 가능한 변수를 선언할때 사용하며 언제든 변할수있는 변수에 사용된다.

const

const는 재할당이 불가능한 상수를 선언할때 사용하며 변하지 않는 상수에 사용된다.

Arrow Function(화살표 함수)

함수를 더 간결하게 정의하는 화살표 함수 문법이다.

일반적인 함수 선언

function add(a, b) {
  return a + b;
}

const result = add(2, 3);
console.log(result); // 출력 결과: 5

Arrow Function

const add = (a, b) => a + b;

const result = add(2, 3);
console.log(result); // 출력 결과: 5

Template Literal(템플릿 리터럴)

백틱 ( ` ` ) 을 사용하여 문자열 내에 변수를 쉽게 삽입할수 있다.

${변수명} 형태로 변수를 문자열에 포함할 수 있다.

const name = '홍길동';
const age = 20;
const job = 'developer';

const message = `안녕하세요, 저의 이름은 ${name}이고, 나이는 ${age}살이며, 직업은 ${job}입니다.`;

console.log(message);

//출력문 '안녕하세요, 저의 이름은 홍길동이고, 나이는 20살이며, 직업은 developer 입니다.

Class(클래스)

클래스 문법이 도입되어 객체 지향 프로그래밍을 더 편리하게 할수 있다.

class 키워드를 사용하여 클래스를 정의하고, 생성자와 메서드를 추가할수 있다

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`안녕하세요, 저는 ${this.name}(${this.age})입니다.`);
  }
}

const person1 = new Person('홍길동', 30);
const person2 = new Person('김덕배', 25);

person1.sayHello(); // 출력 결과: 안녕하세요, 저는 홍길동(30)입니다.
person2.sayHello(); // 출력 결과: 안녕하세요, 저는 김덕배(25)입니다.

'Person' 클래스를 선언하고 클래스는 생성자(constructor) 메서드와 일반 메서드를 포함할수 있으며 생성자 메서드는 객체를 생성할 때 자동으로 호출되며 클래스의 프로퍼티를 초기화 하는 역할을 한다.

일반 메서드는 클래스의 인스턴스에서 사용할 수 있는 메서드를 정의한다.

'sayHello' 메서드는 'Person' 클래스의 일반 메서드로 클래스의 인스턴스에서 호출할 수 있다.

인스턴스를 생성하고 해당 메서드를 호출하여 객체의 동작을 수행한다.

Module(모듈)

모듈 기능이 도입되어 코드를 여러개의 파일로 나누고 재사용 가능한 모듈로 구성할수 있다 export 와 import 키워드를 사용하여 모듈을 정희하고 불러올수있다.

//math.js

// 두 수를 더하는 함수를 내보냄
export function add(a, b) {
  return a + b;
}

// 두 수를 빼는 함수를 내보냄
export function subtract(a, b) {
  return a - b;
}

내보내기

 

//app.js

// math.js 모듈에서 함수를 가져옴
import { add, subtract } from './math.js';

// 함수 사용
console.log(add(5, 3)); // 출력 결과: 8
console.log(subtract(10, 4)); // 출력 결과: 6

가져오기

 

math.js에서 add 와 subtract 함수를 내보내 app.js 에서 사용한 예시이다.

Destructuring(디스트럭처링)

배열이나 객체에서 원하는 요소를 추출하여 변수에 할당하는 디스트럭처링 문법이다.

배열예시

// 배열 선언
const numbers = [1, 2, 3, 4, 5];

// 배열 디스트럭처링을 이용하여 값 추출
const [first, second, ...rest] = numbers;

// 추출한 값 출력
console.log(first);  // 출력 결과: 1
console.log(second); // 출력 결과: 2
console.log(rest);   // 출력 결과: [3, 4, 5]

객체예시

// 객체 선언
const person = {
  name: 'Alice',
  age: 30,
  job: 'developer'
};

// 객체 디스트럭처링을 이용하여 값 추출
const { name, age, job } = person;

// 추출한 값 출력
console.log(name); // 출력 결과: Alice
console.log(age);  // 출력 결과: 30
console.log(job);  // 출력 결과: developer

Enhanced Object Literals(확장된 객체 리터럴)

객체 리터럴의 표현이 더 편리해져 { key : value } 형태 외에도 { key } 와 같이 키와 값의 이름이 같을 때 축약하여 작성할수 있다.

// 변수 선언
const name = 'Alice';
const age = 30;

// 객체 리터럴에서 변수 사용
const person = {
  name, // 변수 name의 값이 속성 이름과 값으로 할당됨
  age,  // 변수 age의 값이 속성 이름과 값으로 할당됨
  // 메서드 정의
  sayHello() {
    console.log(`안녕하세요, 저는 ${this.name}이고, ${this.age}살입니다.`);
  }
};

// 객체의 메서드 호출
person.sayHello(); // 출력 결과: 안녕하세요, 저는 Alice이고, 30살입니다.