Javascript ES6 문법 (1)

들어가며..

Javascript를 배운지 이제 약 7개월 가량이 지났다.
프로젝트에서 내가 그냥 사용하는 자바스크립트의 문법이 ES6의 문법이란 것을 알게되었다.
ES6? 문득 궁금하여 ES6 문법들에 대해 알아보고 혹시 또 다른 유용한 문법이 있는지, ES5와 다른점이 있는지 확인해보기로 한다.

ECMAScript ?

ECMA란, 자바스크립트를 표준화하기 위해 만들어진 스크립트 프로그래밍 언어를 말한다. 여러 기술을 기반으로 만들어졌으며 대표적으로 Netscape의 Javascript, Microsoft의 Jscript가 있다.
보다시피 서로 다른 언어로 개발 된 웹 페이지에서 크로스 브라우징 이슈가 있어 이를 해결하기 위해 Javascript를 표준화 한 것이 ECMAScript 이다.

ES6 (ECMAScript 2015)

• 2009년에 표준화 된 ES5 이후 언어에 대한 주요 업데이트
• ES2015 또는 ES6로 불림.
• 최신버전은 아니며 매년 6월에 규칙적으로 개정되고 있음. (현재 최신버전 : ECMARScript 2022)
• ES5에서 문제가 되었던 부분이 ES6에서 해결되었고, 많은 기능이 추가되어 유명 라이브러리들도 이에 맞춰 개발 환경을 ES6로 변경하게 됨.
• 최신 버전이 다양한 브라우저에 적용되기에는 오랜 시간이 걸리기 때문에 아직 대부분 ES6 사용

1. let, const 의 등장

• ES6 이전에는 var 를 사용하여 변수를 저장하였지만, ES6 부터는 let과 const를 사용하여 변수를 저장할 수 있다.

변수 var

• 변수의 선언은 전역 범위 혹은 함수 범위로 지정된다.
• 함수 외부에서 선언 시 전역 변수로 설정 된다.
• 함수 내부에서 선언 시 함수 내에서만 사용과 접근이 허용된다.

let

• var 처럼 값을 변경해줄 순 있지만 변수의 선언 범위는 블록("{}")내에서만 유효하다.
• 같은 블록 범위 내에서 동일한 이름의 변수 재선언은 불가하다.

< app.js >
var global = "globalValue";
let local = "localValue";

console.log(window.global); // "globalValue"
console.log(window.loca); // undefined
// 전역 변수는 window 객체의 프로퍼티이다.

var global;
let local; // error!
console.log(global) // "globalValue"

< component.js >
console.log(global); // "globalValue"
console.log(local); // error! (undefined)

--------------------------------------------

• 반복문에서의 var, let차이점

// var
for (var i = 0; i < 5; i++) {
 console.log(i); // 1, 2, 3, 4
}
console.log(i); // 5

--------------------------------------------
// let
for (let i = 0; i < 5; i++) {
 console.log(i); // 1, 2, 3, 4
}
console.log(i); // Uncaught ReferenceError: i is not defined

const

• let과 마찬가지로 블록 {} 범위 내에서 접근이 가능하다
• 보통 변하지 않는 값(상수)을 변수로 지정할 때 사용한다.
• 변수 값을 재지정하거나 변경할 수 없다.
  • 배열 또는 객체 타입의 경우 변수 자체가 읽기 전용임을 보장한다.
  • const 변수가 참조하는 객체, 배열의 내부 값이 불변이라는 의미는 아니다.
• 변수의 초기 값을 지정하지 않은 채 선언할 수 없다.

const TEMP; // !! SyntaxError
const NAME = "goodjam"; // common usage
NAME = "nojam"; // !! TypeError

--------------------------------------------
// const Object
const 객체 = {}; // OK
객체.any = "anything"; 
console.log(객체.any); // anything

const 우리집 = { 티비: "삼성", 냉장고: "엘지" };
우리집.티비 = "엘지" 
console.log(우리집.티비) // 엘지

우리집 = { 티비: "엘지", 냉장고: "딤채" }; // !! TypeError

--------------------------------------------
// const Array
const 음식 = []; // OK
음식.push("pizza");
음식.push("coke");

console.log(음식[0]); // pizza

음식 = []; // !! TypeError

2. Default Parameters (매개변수 기본 값)

• 함수의 매개변수의 기본 값은 인수를 함수에 전달하지 않으면 undefined 이다.
• ES6에서는 함수 매개변수의 기본 값을 설정하는 간단한 방법을 제공
• 함수의 매개변수 기본 값으로 다른 함수의 결과 값을 사용할 수 있다.

// 매개변수에 기본 값이 없는 경우
function 더하기 (x, y) {
  return x + y; 
}

const sum = 더하기();
console.log(sum); // undefined;

--------------------------------------------
// 매개변수에 "=" 등호를 사용하여 기본 값을 정의
function 방문인사es6(message="Hello World!") {
  console.log(message); 
}

방문인사es6(); // Hello World!
방문인사es6(undefined); // Hello World!
방문인사es6("Hi! bro"); // Hi! bro

// ES5 기본 값 할당 방법
function 방문인사es5(message) {
  message = typeof message !== "undefined" ? message: "Hello World!";
  console.log(message); 
}
방문인사es5();

--------------------------------------------
// 매개변수의 기본 값을 다른 함수의 결과 값으로 사용
function 인사하기(message=방문인사es6()) {
  console.log(message); 
}

인사하기(); // Hello World!

--------------------------------------------
// 파라미터에 계산식을 사용할 수도 있다.
const 부가세 = () => 0.1;
const 물품가격 = (가격, 부가세금액 = 가격 * 부가세()) {
 	return 가격 + 부가세금액; 
}

const 맥북가격 = 물품가격(1500);
console.log(맥북); // 1650;

--------------------------------------------
function 피타고라스 (a=1, b=1) {
  retrun (a** + b**);
}

3. Spread Operator (스프레드 연산자)

• ES6에서 새로운 연산자의 탄생 ( ... Spread Oprator )
• 전개 연산자를 사용하면 반복 가능한 객체의 요소를 전개할 수 있다.
• 함수의 나머지 매개변수(Rest Parameters)와 달리 연산자 사용 순서에 상관이 없다.
• 스프레드 연산자를 사용하여 배열 자체만 복사할 수 있다.

// 기본적인 사용 방법
const 장바구니 = ["콜라", "맥주"];
const 삼성냉장고 = ["물", "식빵", ...장바구니]; // ["물", "식빵", "콜라", "맥주"]
const 엘지냉장고 = [...장바구니, "물", "식빵"]; // ["콜라", "맥주", "물", "식빵"]

--------------------------------------------
// Array push() 에서의 스프레드 연산자 사용법

// 두 숫자의 배열을 함수에 전달하기 위한 방법 (ES5 vs ES6)
function 합치기(a, b) {
  return a+b;
}
const result_ES5 = 합치기.apply(null, [1, 2]); // 3 (ES5)
const result_ES6 = 합치기(...[1,2]); // 3 (ES6)

// 배열에 배열의 요소 추가하기 (ES5 vs ES6)
const 해야할일 = ["방청소", "ES6공부"];
const 끝마친일 = ["장보기", "빨래하기"];

// ES5 문법사용 시
[].push.apply(끝마친일, 해야할일]; 
              
// ES6 문법 사용 시
끝마친일.push(...해야할일);

// 끝마친일 = ["장보기", "빨래하기","방청소", "ES6공부"];

--------------------------------------------
// 배열의 문자열을 분해하기도 한다.
const 문자 = ["A", ..."BC", "D"];
console.log(문자); // ["A", "B", "C", "D"]

--------------------------------------------
// Rest Parameters (함수의 매개변수에서 ... 사용)
// 매개변수의 스프레드 연산자는 순서가 항상 마지막이어야 함.
function sum(a, ...agr) {
 	let result = 0;
  for (const num of agr) {
    result += num;
  }
  return result - a;
}
sum(5, 3, 4, 5, 6, 1); // 14

4. Object property initializer shorthand (객체 리터럴 구문 확장)

• 반환되는 객체의 키와 값이 동일한 경우 키 값만 작성해도 된다.
• 간결한 메서드 구문을 활용하여 ES6에선 객체의 내부 메서드를 전체 함수 정의 지정을 하지 않아도 된다.
• 속성 이름이 [] 대괄호 안에 배치되면 문자열로 평가되어 표현식을 속성 이름으로 사용 할 수 있다.

const computer = "MacBook "

// ES5 사용 시
function createUserES5 (name, id) {
	return {
      name : name, 
      id : id,
      loading : function () {
      		console.log(this.name + " 님의 정보를 로딩중입니다..");
      }
    };
};

// ES6 사용 시
function createUserES6 (name, id) {
	return {
      name,
      id,
      loading() {
      	console.log(this.name + " 님의 정보를 로딩중입니다..");
      },
      "log out"() {
        console.log(this.name + "님의 계정을 로그아웃 합니다."
      }
    };
};
const user = createUserES6 ("아무개", 11234);
user.loading(); // 아무개 님의 정보를 로딩중입니다.. 
user["log out"](); // 아무개 님의 계정을 로그아웃 합니다.

5. Template Literals (템플릿 리터럴)

• ES6 이전에는 '', "" 사용하여 문자열 리터럴을 감싸주었지만 기능이 제한적이었다.
• ES6 에서는 `` 백틱을 사용하여 보다 복잡한 문자열을 안전하고 깔끔하게 작업할 수 있다.
• `` 백틱의 기능
  • 여러 줄에 걸쳐 있을 수 있는 문자열 생성
  • 문자열의 일부를 변수 또는 표현식의 값으로 대체하는 기능 (문자열 보간)
  • HTML에 안전하게 포함할 수 있도록 문자열을 변환하는 기능

// 기본 사용법
const 자기소개 = `안녕하세요. 
저는 프론트엔드 개발자 김땡땡입니다.
저는 자바스크립트를 사용하는 프로젝트를 참여한 경험이있습니다.`;
// 백틱은 따로 \n 이스케이프를 활용하지 않고, 사용자의 입력에 따른 줄바꿈, 띄어쓰기가 적용된다.

// 변수 및 표현식을 대체
const 성 = "김";
const 이름 = "아무개";
const 나이 = "30";
console.log(`안녕! 나는 ${성}${이름}라고 해 나이는 ${나이-10}이야 반가워!`); 
// 안녕! 나는 김아무개라고 해 나이는 20살이야 반가워!

---

여러 예시를 같이 작성하다 보니 꽤 길어서.. 글을 2개로 쪼개야겠다..

다음 글에서..

• 구조 분해 할당 (Destructuring assignment)
• 화살표 함수 (Arrow function)
• ES6 모듈 (Module)
• 클래스 (Class)

참고 자료
javascripttutorial
Var, Let, Const의 차이점은?