[JavaScript] ECMAScript6

슈가베어·2023년 6월 13일

JavaScript ecmascript

Javascript

목록 보기

11/15

자주 사용되는 문법

1. let, const

기존의 var 키워드는 암묵적으로 전역 변수를 양산할 가능성이 크고
의도하지 않은 변수값의 변경이 일어날 가능성이 크다
이러한 단점을 보완하기 위해 let과 const 키워드가 도입되었다

var 재선언 가능 , 재할당 가능
let 재선언 불가능, 재할당 가능
const 재선언 불가능, 재할당 불가능

ES6를 사용한다면 var 키워드는 사용하지 않는다.
재할당이 필요한 경우에 한정해 let 키워드를 사용한다. 이때 변수의 스코프는 최대한 좁게 만든다.
변경이 발생하지 않는(재할당이 필요 없는 상수) 원시 값과 객체에는 const 키워드를 사용한다. const 키워드는 재할당을 금지하므로 var, let 보다 안전하다.

2. 템플릿 리터럴(문자열 표기법)

일반적인 문자열과 달리 여러 줄에 걸쳐 문자열을 작성할 수 있으며 템플릿 리터널 내의 모든 공백은 있는 그대로 적용된다
백틱 (``)안에 문자열을 작성한다
문자열 사이에 간단하게 변수 사용이 가능(${...}으로 표현식을 감싼다)

console.log(`1 + 1 = ${1 + 1}`); // "1 + 1 = 2"

3. 화살표 함수

function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있다

// 매개변수 지정 방법
    () => { ... } // 매개변수가 없을 경우
     x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

// 함수 몸체 지정 방법
x => { return x * x }  // single line block
x => x * x             // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다
() => { return { a: 1 }; }
() => ({ a: 1 })  // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.
() => {           // multi line block.
  const x = 10;
  return x * x;
};

<일반 함수와 화살표 함수의 가장 큰 차이점 : this>

일반함수는 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다

생성자 함수와 객체의 메소드를 제외한 모든 함수(내부 함수, 콜백 함수 포함) 내부의 this는 전역 객체(window)를 가리킨다
화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다
=> 일반 함수와 달리 call , apply, bind 메소드를 사용하여 this를 변경할 수 없다

4. class

자바스크립트는 프로토타입 기반의 객체 지향 언어이다.
클래스 기반의 객체 지향 프로그래밍도 할 수 있게 Class 키워드를 도입하였다
자바스크립트에서 클래스는 내부적으로 프로토타입을 이용해서 만들어졌다
클래스는 호이스팅이 let, const 키워드 처럼 동작한다

//클래스 선언문
class Person {
  // constructor(생성자). 이름을 바꿀 수 없다.
  constructor(name) {
    // this는 클래스가 생성할 인스턴스를 가리킨다.
    // _name은 클래스 필드이다.
    this._name = name;
  }
}

// 인스턴스 생성
const me = new Person('Lee');
console.log(me); // Person {_name: "Lee"}

더 많은 Class정보

5. destructing (구조 분해 할당)

구조분해 할당이란 펼치다란 뜻으로 객체나 배열에서 사용하며, 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정이다

// 배열에서 Spread 사용
const arr = [1, 2, 3];
const [one, two, three] = arr;
one // 1
two // 2
three // 3

// 객체에서 Spread 사용
const obj = {
 firstName: '토끼',
 lastName: '산'
};
const { firstName, lastName } = obj;
firstName // 토끼
lastName // 산