[JavaScript] ES6 문법

ES6란?

ES6는 2015년에 도입된 JS의 6번째 표준안이다.

현대적인 코드를 사용하면, 코드가 간결해지고 생산성이 향상된다.

---

변수 선언

• var : 재정의, 재선언 모두 가능
• let : 가변변수로 재정의가 가능, 재선언 불가능
• const : 불변변수. 재선언, 재정의 모두 불가능

재선언 똑같은 이름의 변수를 다시 만드는것

재정의 값이 지정된 변수에 값을 바꾸려는 것

스코프 식별자(예: 변수명, 함수명, 클래스명 등)의 유효범위

 

//변수 선언
var x = 2;
//재정의
x = 4;
//재선언
var x = 4;

 

• var의 문제점
  • 변수 선언이 유연하기 때문에 예기치 못한 값을 반환할 수 있음
  • 코드가 길어진다면 어디에서 어떻게 사용 될지 파악하기 힘듦
  • 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수
  • 변수 선언문 이전에 변수를 ㅊ마조하면 언제나 undefined 반환(호이스팅 발생)
  • 위 이유들로 인해 var은 잘 사용하지 않으며 let과 const를 사용하는 것을 권장한다

---

템플릿 리터럴

템플릿 리터럴은 ES6부터 새로 도입된 문자열 표기법.

문자열 생성시 따옴표 대신 백틱(`)을 사용.

따옴표와 달리 백틱 안에서는 줄바꿈이 반영됨.

또한, 문자열 사이에 변수나 연산을 넣을시 ${} 사이에 표현식 삽입.

var jsp = "자바스크립트";

// 기존 코드
console.log("이건 " + jsp + "입니다.");

// 템플릿 리터럴 방식
console.log(`이건 ${jsp}입니다.`);

// 출력 결과 -> 이건 자바스크립트입니다.

 

---

화살표 함수

화살표 함수는 함수 표현식을 단순하고 간결하게 작성하는 문법.

// 기본 함수 형식
let sum = function(a, b) {
  return a + b;
};

// 화살표 함수 형식
let sum = (a, b) => a + b;

• 인수가 1개라면 인수를 감싸는 괄호 생략 가능.
• 인수가 1개도 없을때엔 괄호를 비워놓음. 다만 괄호는 생략할 수 없음.
• 본문이 한 줄 밖에 없다면 중괄호 생략 가능.
• 중괄호는 본문 여러 줄로 구성되어 있음을 알려주며, 중괄호를 사용했다면 return으로 결과값을 반환해야함.

---

모듈 내보내고 가져오기

모듈을 내보내는 방법으로는 named export와 default export가 있다

// named export 기본 형식
export { 모듈명1, 모듈명2 };
import { 모듈명1, 모듈명2 } from 'js 파일 경로';

// default export 기본 형식
export default 모듈명;
import 모듈명 from 'js 파일 경로';

 

name export는 한 파일에서 여러 개를 export 할때 사용 가능.

export한 이름과 동일한 이름으로 import해야 하며 중괄호에 묶어서 import 해야 함.

다른 이름으로 import 하려면 as 사용. 한 파일에 있는 클래스나 변수를 한번에 import 하려면 * as 사용

// named export는 중괄호 포함 import 
import { named1, named2 } from './example.js';

// named export에서 as를 사용하여 다른 이름으로 import
import { named1 as myExport, named2 } from './example.js';

// 한 파일에 있는 모든 클래스나 변수를 * as를 사용하여 한 번에 import
import * as Hello from './example.js';

 

 

defalut export는 하나의 파일에서 단 하나의 변수 또는 클래스만 export 할 수 있다.

또한 import 할 때 아무 이름으로 자유롭게 import 가능하며 중괄호에 묶지 않아도 된다.

// default export 는 중괄호 없이 import 
import default1 from './example.js';

---

클래스

Class는 객체를 생성하기 위한 템플릿으로 틀과 같은 역할

• 클래스를 선언하려면 class 키워드와 함께 클래스 이름 작성.
• 클래스는 함수로 호출 될 수 없음.
• 클래스 선언은 let과 const처럼 블록 스코프에 선언되며, 호이스팅(hoisting)이 일어나지 않음. 클래스는 반드시 정의한 뒤에 사용.
• 클래스의 메소드 안에서 super 키워드 사용 가능.
• static 키워드를 메소드 이름 앞에 붙여주면 해당 메소드는 정적 메소드가 됨.
• Getter 또는 Setter를 정의하고 싶을 때, 메소드 이름 앞에 get 또는 set을 붙임.
• extends 키워드를 사용하여 클래스에서 다른 클래스로 상속하면서 클래스 기능 확장 가능
• 클래스에서 일반적인 방식으로 프로퍼티를 선언하고 할당하면 Public Property. 외부에서 프로퍼티에 접근하여 값을 사용하거나 수정이 가능
• 클래스에서 프로퍼티 앞에 # 키워드를 작성하여 선언하면 Private Property. 오직 클래스 안에서만 사용, 변경 가능. 외부 접근 불가

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  nextYearAge() {
    return Number(this.age) + 1;
  }
}

class IntroducePerson extends Person {
  constructor(name, age, city, futureHope) {
    super(name, age);
    this.city = city;
    this.futureHope = futureHope;
  }
  introduce() {
    return `저는 ${this.city}에 사는 ${this.name} 입니다.
내년엔 ${this.nextYearAge()}살이며,
장래희망은 ${this.futureHope} 입니다.`;
  }
}

let kim = new IntroducePerson('kim', '23', 'seoul', '개발자');
console.log(kim.introduce());

---

구조분해할당

객체와 배열의 값을 쉽게 변수로 저장 가능.

객체에서 값을 꺼낼 때 중괄호를 사용해서 key와 같은 이름을 꺼내올 수 있고, key와 다른 이름으로 꺼낼 때는 변수이름:키값으로 꺼내올 수 있음.

const introduce = {name: 'unknown', age: 23};
// key와 같은 이름으로 변수 선언
const { name, age } = introduce;
// 다른 이름으로 변수 선언 -> 변수이름: 키값
const { myName: name, myAge: age } = introduce;

console.log(myName) // unknown
console.log(myAge) // 23

 

배열에서 값을 꺼낼 때는 대괄호를 사용해서 앞에서부터 순차적으로 꺼내올 수 있음.

const fruits = ['apple', 'mango', 'grape'];
// 앞에서부터 순차적으로 변수 선언 가능
const [zero, one, two] = fruits;

console.log(zero) // apple

---

Rest Operator / Spread Operator

Rest Operator(나머지 매개변수)

나머지 후속 매개변수들을 묶어 하나의 배열에 저장해서 사용.

묶어줄 매개변수 앞에 ...을 붙여서 작성.

즉, Rest Operator는 배열과 함수의 인자 중 나머지를 가리키며, 객체의 나머지 필드를 가리킴.

// args에 1,2,3,4,5가 한꺼번에 배열로 담겨 인자로 넘겨진다.
function func1(...args) {
	console.log(`args: [${args}]`)
  // args: [1,2,3,4,5]
}
func1(1,2,3,4,5);

// arg1에는 1, arg2에는 2, arg3에는 나머지 3,4,5가 배열로 담겨 인자로 넘겨진다.
function func2(arg1, arg2, ...arg3) {
  	console.log(`arg1: ${arg1}, arg2: ${arg2}, arg3: [${arg3}]`)
  // arg1: 1, arg2: 2, arg3: [3,4,5]
}
func2(1,2,3,4,5);

 

func(인자1, 인자2, ...인자들)로 넘겨주게 되면 인자1, 인자2 처럼 지정된 인자는 앞에서 부터 각각의 값을 넣어주고 그 뒤에 나머지 후속 인자들을 배열에 인자들로 묶어서 보내주는 것이다.

 

Rest Operrator는 함수 정의시 하나의 ...만 존재할 수 있으며, 반드시 마지막 매개변수여야한다.

 

func(...wrong, arg2, arg3) 
// 틀린 예. ...wrong이 마지막으로 와야 한다.

 

Spread Operator(전개 구문)

묶인 배열 혹은 객체를 개별적인 요소로 분리한다. 즉, Rest와 반대 개념.

마찬가지로 전개할 매개변수 앞에 ...을 붙여서 작성.

배열과 함수에선 또 다른 배열과 함수의 인자로의 전개를, 객체에선 또 다른 객체로의 전개를 함.

let arr = [1, 2, 3, 4, 5]; 
console.log(...arr);
// 1 2 3 4 5

var str = 'javascript'; 
console.log(...str);
// "j" "a" "v" "a" "s" "c" "r" "i" "p" "t"

 

 

Spread Operator도 Rest Operator와 마찬가지로 ...의 작성 순서에 주의.

등장 순서에 따라 덮어씌워 질 수 있음.

var obj = { name: '짱구', species: 'human'};
obj = { ...obj, age: 5}; 

console.log(obj)
// {name: "짱구", species: "human", age: 5}

obj = { ...obj, name: '짱아', age: 1};

console.log(obj);
// {name: "짱아", species: "human", age: 1}

 

위 예제와 같이 ...obj가 먼저 나오고 name, age가 나중에 등장함으로써 덮어씌워져 값이 변경됨

 

Rest Operator(나머지 매개변수)는 배열로 묶음,
Spread Operator(전개 구문)는 개별적인 요소로 분리.
둘 다 "..." 을 붙여서 사용하며, 작성 순서에 주의.

---

forEach() / map() / reduce()

forEach와 map은 반복문을 돌며 배열 안의 요소들을 1대1로 짝지어줌

• forEach() : 배열 요소마다 한번씩 주어진 함수(콜백) 실행

배열.forEach((요소, 인덱스, 배열) => { return 요소 });

• map() : 배열 내의 모든 요소 각각에 대하여 주어진 함수(콜백)를 모아 새로운 배열 반환

배열.map((요소, 인덱스, 배열) => { return 요소 });

 

하지만 forEach()와 map()의 역할은 같지만 리턴값의 차이가 있음.

forEach()는 기존의 배열을 변경하고 반환값을 안줌, map()은 결과값으로 새로운 배열 반환.

var arr = [1,2,3,4,5];
// forEach()
var newArr = arr.forEach(function(e, i) {
  return e;
});
// return -> undefined

// map()
var newArr = arr.map(function(v, i, arr) {
  return v + 1;
});
// return -> 2, 3, 4, 5, 6

• reduce() : 배열의 각 요소를 순회하며 콜백 함수의 실행 값을 누적하여 하나의 결과값 반환

배열.reduce((누적값, 현재값, 인덱스, 요소) => { return 결과 }, 초기값);

const arr = [1, 2, 3];
const result = arr.reduce((prev, curr, i) => {
  console.log(prev, curr, i);
  return prev + curr;
}, 0);

console.log(result); // 6

초기값을 적어주지 않으면 자동으로 초기값이 0번째 인덱스

reduce()는 초기값을 배열로 만들고, 배열에 값들을 push하면 map이 됨

 

출처

https://velog.io/@kim_unknown_/JavaScript-ES6