ECMA6

ECMA International

정보 통신에 대한 표준을 제정하는 비영리 표준화 기구

표준의 가장 대표적인 예시 중 하나가 바로 키보드. 대부분 키보드가 같은 배열로 키를 가지고 있었을 것. 이는 대부분의 키보드 제조업체가 키보드 디자인을 QWERTY 레이아웃 표준으로 따르기 때문.

마찬가지로, ECMA는 표준을 제정. 대표적으로 CD롬 볼륨과 파일 구조, C# 언어 규격, JSON 포맷처럼 일부 정보 통신 기술에 대한 표준을 이 단체에서 관리. 각각의 표준들은 고유한 이름과 번호를 가지고 있는데, 우리는 그 중에서도 ECMA-262 라는 표준에 대해 알아보아야 함.

ECMA-262

Ecma International에 의해 제정된 하나의 기술 규격의 이름으로, 범용 목적의 스크립트 언어 표준에 대한 명세(규칙)를 담음.

스크립트 언어(Script Language)

독립된 시스템에서 작동하도록 특별히 설계된 프로그래밍 언어.
스크립트 언어의 특징으로는 응용 프로그램과는 독립적이고, 사용자가 직접 프로그램을 의도에 따라 동작시킬 수 있다는 것. 스크립트 언어를 이용한 명령어의 실행이, 시스템 내부에서 어떤 원리로 동작하는지는 전혀 상관하지 않음. 단순히 사용자가 그 프로그램을 의도에 따라 제어할 수만 있다는 것.

ECMAScript

Ecma International에 의해 제정된 ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어. 동의어로는 ‘ECMAScript 사양’(ECMAScript specification)

ECMA-262는 표준의 이름 이지만, ECMAScript는 ECMA-262에서 정의된 하나의 사양을 의미. ECMAScript는 스크립트 언어가 준수해야 하는 규칙, 세부 사항 및 지침을 제공함.

국어를 표준어 라고 부르고, 국립국어원 에서 관리. 표준어는 국립국어원에서 제정한 여러가지 규칙들 (대표적으로 발음이나 맞춤법)을 일정한 원리를 따름.

ECMAScript에서도 마찬가지. 국립국어원은 Ecma 인터내셔널, ECMA-262는 표준어고, ECMAScript는 맞춤법과 같은 규칙.

JavaScript

ECMAScript 사양을 준수하는 범용 스크립팅 언어
ECMAScript 문서를 읽게 된다면, 어떻게 스크립트 언어를 만들 수 있는지를 알 수 있음. JavaScript 문서를 읽게 된다면, 어떻게 스크립트 언어를 쓸 수 있는지를 알 수 있음.

JavaScript를 ECMAScript의 방언이라고 부르는 이유는 경상도, 전라도, 충청도처럼 실제 방언과 같은 문맥으로 사용되기 때문. 방언은 표준어로부터 파생된 언어이지만, 각각의 방언들은 마치 다른 언어처럼 들림.

JavaScript 엔진(JavaScript Engine)

JavaScript 코드를 이해하고 실행하는 프로그램 또는 인터프리터
동의어로는 ‘JavaScript 인터프리터’(JavaScript interpreter)

JavaScript 엔진은 대부분의 웹 브라우저에서 찾아 볼 수 있음. 마치 아까 위에서 말했던 이동하고, 뛰고, 점프하는 명령어들을 실제로 이해하고 수행함. 마치 사람이 언어를 이해하는 것과 같은 맥락.

JavaScript 엔진에는 여러 종류가 있는데, 예를 들자면 Google Chrome의 V8, Mozilla Firefox의 SpiderMonkey, Microsoft Edge의 Chakra 등이 있음. 다양한 종류가 있기 때문에, 각각의 JavaScript 엔진들은 다른 것들과 비교할 수 있는 몇 가지 특징을 가짐.

첫 번째 특징은 바로 수행 능력(Performance)이 차이. 만약 여러분들이 실제로 두 명의 사람에게 점프해! 라고 명령을 내린다고 생각. 사람들이 명령을 인지하고 이해한 후 처리하는 능력이 신체에 따라 다르므로, 운동 신경과 반사 신경이 좋은 사람은 아마 더 빠르고 높게 점프할 수 있음. 두 개의 웹 브라우저는 명령어를 이해할 수는 있는 능력은 같지만 속도에서 차이가 날 수 있는데, JavaScript 엔진이 얼마나 효율적으로 JavaScript를 처리하고 있는가에 따라 다르기 때문.

두 번째 특징은 지원되는 ECMAScript가 다르다는 것. 쉽게 이해하기 위해 같은 언어로 대화하고 있는 두 사람을 상상. 많은 사람들이 영어를 사용할 줄 앎에도 불구하고, 어떤 사람은 다른 사람이 알지 못하는 문법이나 표현, 단어를 알 수도 있고 그렇지 않을 수도 있음. 마찬가지로, 웹 브라우저의 JavaScript 엔진이 JavaScript를 모두 이해할 수 있음에도 불구하고, 몇몇 브라우저들은 다른 브라우저들에 비해 매우 뛰어난 이해 능력을 갖고 있음. 이는 브라우저마다 언어를 지원하는 능력이 다르기 때문.

브라우저가 얼마나 JavaScript를 잘 지원하느냐와 관련해서, 사람들은 일반적으로 JavaScript 호환성 이라는 단어보다는 ECMAScript 호환성 이라는 단어를 더 사용.(사실 알고보면 JavaScript 엔진이 ECMAScript를 얼마나 잘 지원하느냐와 관련된 이야기지만요.)

아까 위에서 말했듯이, ECMAScript는 스크립트 언어가 어떻게 생겨야 하는지에 관한 사양. 새로운 버전의 ECMAScript를 발표한다고해서 모든 JavaScript 엔진이 갑자기 이러한 새로운 기능을 갖게되는 것은 아님. JavaScript 엔진이 최신 ECMAScript의 사양을 준수하던지 아닌지는 JavaScript 엔진을 담당하는 회사나 조직(Google, Mozilla, Microsoft 등)의 업데이트에 따라 달려있습니다.

따라서, 개발자들은 Google, Mozilla, Microsoft 등과 같은 JavaScript 엔진을 개발한 회사에게 “이 브라우저는 어떤 버전의 ECMAScript를 지원하나요?” 또는 “이 브라우저는 어떤 ECMAScript 기능을 지원하나요?”와 같은 질문을 하는 경향이 있음.

물론 새 버전의 ECMAScript가 나오면 JavaScript 엔진을 통째로 업데이트하지는 않고, 새로 추가된 ECMAScript 기능을 점진적으로 업데이트.

ECMAScript 6

ECMAScript 6는 ECMA-262 표준의 제 6판이며, ECMAScript 사양의 주요 변경 사항 및 개선 사항을 명세. 동의어로는 ‘ES6’, ‘ES2015’, ‘ECMAScript 2015’가 있음.

국립국어원에서는 필요에 따라 표준어 규칙을 바꾸거나 새로운 단어를 표준어에 추가하기도 함. Ecma 역시 마찬가지로, 필요성에 따라 ECMAScript를 개정. ECMAScript 6는 제 6판을 의미. 각 판의 간략한 정보는 다음의 표와 같음.

같은 이름으로는 ES2015도 있는데, 이는 2015년 Ecma 인터내셔널이 ECMAScript를 매년마다 개정하기로 발표했기 때문. 따라서 앞으로는 매년 해의 이름을 딴 ECMAScript가 새로 발표될 예정.

바벨(Babel)

개발자들은 ES6에서 새로 도입된 새로운 기술들을 사용할 수 있었지만, 다양한 브라우저 종류로 발생하는 호환성(Cross Browser) 문제 때문에 기술을 손쉽게 사용하기가 쉽지 않았음. 특히 Microsoft의 낡은 브라우저인 Internet Explorer가 ES6의 사양을 준수하지 않고 있음.

이를 해결하기 위해 바벨 등장함. 바벨은 ES6 사양으로 작성된 코드를 함수적으로 동일한 ES5 코드로 바꿔주기 때문. 대부분의 주요 브라우저는 ES5까지는 지원을 하기 때문에, 개발자들은 브라우저 간 호환성 걱정을 덜 수 있었음.

ECMAScript vs JavaScript

JavaScript는 1996년에 만들어졌고, 그 다음 JavaScript의 표준화를 위해 1997년에 ECMAScript가 만들어짐. 당시 기준에서 JavaScript는 ECMAScript 사양을 따르고 있었기 때문에, JavaScript는 ECMAScript 사양을 준수하고 있던 언어의 예시.

ECMAScript는 JavaScript를 기반으로 하는 동시에, JavaScript 역시 ECMAScript를 기반으로 함.

둘의 뗄레야 뗄 수 없는 관계, 그리고 그 두 용어가 혼용되어서 사용되던 이유는 바로 여기에서부터 출발하지 않았을까 생각해봄.

ES6 문법

const, let

변수

• 생성 단계

선언 단계(변수명을 자바스크립트 엔진에 알리는 것. 실행 컨텍스트의 변수 객체(Variable Object)에 등록. 변수 객체는 스코프가 참조하는 대상이 됨.) -> 초기화 단계(변수 객체(Variable Object)에 등록된 변수를 위한 공간을 메모리에 확보. 변수는 undefined로 초기화) -> 할당 단계(undefined로 초기화된 변수에 실제 값을 할당)

• 참조

변수에 저장된 값을 읽어 들이는 것

스코프
식별자(ex. 변수명, 함수명, 클래스명 등)의 유효범위.
선언된 위치에 따라 유효 범위가 달라짐. 전역에 선언된 변수는 전역 스코프를, 지역에 선언된 변수는 지역 스코프를 가짐.
자바스크립트에서 모든 코드 블록(if, for, while, try/catch 등)이 지역 스코프를 만듦.

var

• 재선언, 재할당 가능

• 호이스팅(Hoisting)

코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상. 자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서, 변수 선언을 포함한 모든 선언문(ex. 변수 선언문, 함수 선언문 등)을 찾아내 먼저 실행함.

// 스코프의 선두에서 선언 단계와 초기화 단계가 실행됨.
// 따라서 변수 선언문 이전에 변수를 참조할 수 있음.
console.log(foo); // undefined

var foo;
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1

var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어짐. 즉, 스코프에 변수를 등록(선언 단계)하고 메모리에 변수를 위한 공간을 확보한 후, undefined로 초기화(초기화 단계)함. 따라서 변수 선언문 이전에 변수에 접근하여도 스코프에 변수가 존재하기 때문에 에러가 발생하지 않음. 다만 undefined를 반환함. 이후 변수 할당문에 도달하면 비로소 값이 할당됨.

• 함수 레벨 스코프

var키워드로 선언된 변수는 오로지 함수 코드 블록만을 지역 스코프로 인정.
전역 변수로 인해 재할당이 발생하거나, 전역 스코프를 공유하기 때문에 어딘가에 동일한 이름이 있다면 예상치 못한 결과를 가져올 수 있는 위험이 있음. 따라서 함수 코드 블록만을 지역 스코프로 인정하는 var 대신, 블록 레벨 스코프를 지원하는 const와 let을 사용하는 것을 권장

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

let name = 'kmj'
console.log(name) // output: kmj

let name = 'howdy' // output: Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'howdy'
console.log(name) // output: howdy

• 호이스팅

// 스코프의 선두에서 선언 단계가 실행된다.
// 아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않음.
// 따라서 변수 선언문 이전에 변수를 참조할 수 없음.
console.log(foo); // ReferenceError: foo is not defined

let foo; // 변수 선언문에서 초기화 단계가 실행된다.
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1

let 키워드로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행됨. 즉, 스코프에 변수를 등록(선언단계)하지만 초기화 단계는 변수 선언문에 도달했을 때 이루어짐. 초기화 이전에 변수에 접근하려고 하면 참조 에러(ReferenceError)가 발생. 이는 변수가 아직 초기화되지 않았기 때문. 다시 말하면 변수를 위한 메모리 공간이 아직 확보되지 않았기 때문. 따라서 스코프의 시작 지점부터 초기화 시작 지점까지는 변수를 참조할 수 없음. 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 ‘일시적 사각지대(Temporal Dead Zone; TDZ)’라고 부름.

• 블록 레벨 스코프

const
반드시 선언과 초기화 동시 진행

const name; // output: Uncaught SyntaxError: Missing initializer in const declaration
const name = 'kmj'

let 키워드로 선언한 경우, 런타임 이전에 선언이 되어 자바스크립트 엔진에 이미 존재하지만 초기화가 되지 않았기 때문에 name is not defined라는 문구가 떴음. 하지만 const 키워드로 선언한 경우, 선언과 초기화가 동시에 이루어져야 하지만 런타임 이전에는 실행될 수 없음. 초기화가 진행되지 않은 상태일 때 변수에 접근 시 Cannot access '변수명' before initialization 에러 문구가 뜸.

재선언, 재할당 불가능.( 원시값은 불가능. 객체는 가능. ) const 키워드는 재할당을 금지할 뿐, ‘불변’을 의미하지 않음.

// 원시값의 재할당
const name = 'kmj'
name = 'howdy' // output: Uncaught TypeError: Assignment to constant variable.

// 객체의 재할당
const name = {
  eng: 'kmj',
}
name.eng = 'howdy'

console.log(name) // output: { eng: "howdy" }

• 상수

가독성과 유지보수의 편의를 위해 적극적으로 사용

// 10의 의미를 알기 어렵기 때문에 가독성이 좋지 않다.
if (rows > 10) {
}

// 값의 의미를 명확히 기술하여 가독성이 향상되었다.
const MAXROWS = 10;
if (rows > MAXROWS) {
}

조건문 내의 10은 어떤 의미로 사용하였는지 파악하기가 곤란. 하지만 네이밍이 적절한 상수로 선언하면 가독성과 유지보수성이 대폭 향상

• 블록 레벨 스코프

var, let, const

• ES6를 사용한다면 var 키워드는 사용하지 않음.
• 재할당이 필요한 경우에 한정해 let 키워드를 사용. 이때 변수의 스코프는 최대한 좁게 만듦.
• 변경이 발생하지 않는 원시 값(재할당이 필요 없는 상수)과 객체에는 const 키워드를 사용. const 키워드는 재할당을 금지하므로 var, let 보다 안전.
  변수를 선언하는 시점에는 재할당이 필요할지 잘 모르는 경우가 많음. 그리고 객체는 의외로 재할당을 하는 경우가 드물다. 따라서 변수를 선언할 때에는 일단 const 키워드를 사용. 반드시 재할당이 필요하다면(반드시 재할당이 필요한지 한번 생각해 볼 일.) 그때 const를 let 키워드로 변경해도 결코 늦지 않음.

Arrow functions

화살표 함수(Arrow function)는 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;
};

// ES6
const pow = x => x * x;
console.log(pow(10)); // 100

// ES6
const arr = [1, 2, 3];
const pow = arr.map(x => x * x);

console.log(pow); // [ 1, 4, 9 ]

Template Literals

백틱(backtick)문자를 사용.

공백, 줄바꿈이 허용.

문자열 내 작은 따옴표, 큰 따옴표 모두 사용

+연산자를 사용하지 않아도 새로운 문자열 삽입 가능.

String Interpolation(문자열 인터폴레이션) : ${...}으로 표현식 감쌈. 문자열 인터폴네이션 내 표현식은 문자열로 강제 타입 변환.

중첩 Template literals

Default parameters

값이 없거나, undefined가 전달될 경우 이름 붙은 매개변수를 기본값으로 초기화할 수 있음.

ES6이전 문법

function multiply(a, b) {
  b = (typeof b !== 'undefined') ?  b : 1
  return a*b
}

multiply(5, 2)   // 10
multiply(5)      // 5

ES6 문법

function multiply(a, b = 1) {
  return a*b
}

multiply(5, 2)          // 10
multiply(5)             // 5
multiply(5, undefined)  // 5

• undefined vs. 다른 거짓같은 값(falsy values) 전달하기

function test(num = 1) {
  console.log(typeof num)
}

test()            // 'number' (num 은 1로 설정됨)
test(undefined)   // 'number' (num 이 역시 1로 설정됨)

// 다른 falsy values로 테스트 하기:
test('')          // 'string' (num 은 ''로 설정됨)
test(null)        // 'object' (num 은 null로 설정됨)

• Default parameter 호출
  Default parameter는 함수가 호출될 때마다 새로운 객체 생성.
  
  

• Default parameter 이후 Default parameter 사용
  

Array and object destructing

비구조화를 통해 배열 또는 객체의 값을 새 변수에 더 쉽게 할당할 수 있음.

// ES5 문법
const contacts = {
	famillyName: '이',
	name: '영희',
	age: 22
};

let famillyName = contacts.famillyName;
let name = contacts.name;
let myAge = contacts.age;

console.log(famillyName);
console.log(name);
console.log(age);
// 출력
// 이
// 영희
// 22

// ES6 문법
const contacts = {
	famillyName: '이',
	name: '영희',
	age: 22
};

let { famillyName, name, age } = contacts;

console.log(famillyName);
console.log(name);
console.log(age);
// 출력
// 이
// 영희
// 22

ES5에서는 각 변수에 각 값을 할당해야 함. ES6에서는 객체의 속성을 얻기 위해 값을 중괄호 안에 넣음.

참고: 속성 이름과 동일하지 않은 변수를 할당하면 undefined가 반환됨. 예를 들어, 속성의 이름이 name이고 username 변수에 할당하면 undefined를 반환됨.

우리는 항상 속성의 이름과 동일하게 변수 이름을 지정해야 함. 그러나 변수의 이름을 바꾸려면 콜론을 :대신 사용할 수 있음.

const contacts = {
	famillyName: '이',
	name: '영희',
	age: 22
};

let { famillyName, name: ontherName, age } = contacts;

console.log(ontherName);
// 영희

배열의 경우 객체와 동일한 구문을 사용함. 중괄호를 대괄호로 바꾸면 됨.

const arr = ['광희', '지수', '영철', 20];

let [value1, value2, value3] = arr;

console.log(value1);
console.log(value2);
console.log(value3);
// 출력
// 광희
// 지수
// 영철

import and export

JavaScript 응용프로그램에서 import 및 export를 사용하면 성능이 향상됨. 이를 통해 별도의 재사용 가능한 구성요소를 작성할 수 있음.

import : 모듈을 우리의 컴포넌트에 사용하기 위해 가져옴.
export : 다른 JavaScript 구성 요소에 사용할 모듈을 내보낼 수 있음.

예를 들어, 두 개의 파일이 있음. 첫 번째 파일 detailComponent.js이고 두 번째 파일은 homeComponent.js.

detailComponent.js에서는 detail 함수를 내보낼 예정

// ES6
export default function detail(name, age) {
	return `안녕 ${name}, 너의 나이는 ${age}살 이다!`;
}

그리고 homeComponent.js에서 이 기능을 사용하려면 import만 사용

import detail from './detailComponent';

console.log(detail('영희', 20));
// 출력 => 안녕 영희, 너의 나이는 20살 이다!

둘 이상의 모듈을 가져오려는 경우, 중괄호에 넣기만 하면 됨.

import { detail, userProfile, getPosts } from './detailComponent';

console.log(detail('영희', 20));
console.log(userProfile);
console.log(getPosts);

Promise

비동기 코드를 쓰는 방법.
ex) API에서 데이터를 가져오거나 실행하는데 시간이 걸리는 함수를 가지고 있을 때 사용.

Rest parameter and Spread Oprator

Rest parameter
매개변수 이름 앞에 세개의 점 ...을 붙여서 정의한 매개변수를 의미
Rest 파라미터는 이름 그대로 먼저 선언된 파라미터에 할당된 인수를 제외한 나머지 인수들이 모두 배열에 담겨 할당됨. 따라서 Rest 파라미터는 반드시 마지막 파라미터이어야 함.

function foo(param, ...rest) {
  console.log(param); // 1
  console.log(rest);  // [ 2, 3, 4, 5 ]
}

foo(1, 2, 3, 4, 5);

function bar(param1, param2, ...rest) {
  console.log(param1); // 1
  console.log(param2); // 2
  console.log(rest);   // [ 3, 4, 5 ]
}

bar(1, 2, 3, 4, 5);

function foo( ...rest, param1, param2) { }

foo(1, 2, 3, 4, 5);
// SyntaxError: Rest parameter must be last formal parameter

Rest 파라미터는 함수 정의 시 선언한 매개변수 개수를 나타내는 함수 객체의 length 프로퍼티에 영향을 주지 않음.

function foo(...rest) {}
console.log(foo.length); // 0

function bar(x, ...rest) {}
console.log(bar.length); // 1

function baz(x, y, ...rest) {}
console.log(baz.length); // 2

Spread 문법
대상을 개별 요소로 분리. Spread 문법의 대상은 이터러블

// ...[1, 2, 3]는 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3)
console.log(...[1, 2, 3]) // 1, 2, 3

// 문자열은 이터러블이다.
console.log(...'Hello');  // H e l l o

// Map과 Set은 이터러블이다.
console.log(...new Map([['a', '1'], ['b', '2']]));  // [ 'a', '1' ] [ 'b', '2' ]
console.log(...new Set([1, 2, 3]));  // 1 2 3

// 이터러블이 아닌 일반 객체는 Spread 문법의 대상이 될 수 없다.
console.log(...{ a: 1, b: 2 });
// TypeError: Found non-callable @@iterator

Classes

class는 객체 지향 프로그래밍(OOP)의 핵심. 코드를 더욱 안전하게 캡슐화할 수 있음. class를 사용하면 코드 구조가 좋아지고 방향을 유지

class를 만들려면 class 키워드 뒤에 두 개의 중괄호가 있는 class 이름을 사용.

class myClass {
	constructor() {
	
	}
}

이제 new 키워드를 사용하여 class 메서드와 속성에 액세스할 수 있음.

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

const user = new myClass('영희', 22);

console.log(user.name); // 영희
console.log(user.age); // 22

다른 class에서 상속하려면 extends 키워드 다음에 상속할 class의 이름을 사용.

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

	sayHello() {
		console.log(`안녕 ${this.name} 너의 나이는 ${this.age}살이다`);
	}
}

// myClass 메서드 및 속성 상속
class UserProfile extends myClass {
	userName() {
		console.log(this.name);
	}
}

const profile = new UserProfile('영희', 22);

profile.sayHello(); // 안녕 영희 너의 나이는 22살이다.
profile.userName(); // 영희

for...of문

특정 행위를 반복시켜 결과값을 얻어야할때 반복문을 사용

const iterable = [10, 20, 30];

//es5
for (let i = 0; i < iterable.length; i++) {
  console.log(value);
}

//es6
for (const value of iterable) {
  console.log(value);
}

객체 리터럴

=====ES5=====
var helloFunc = function() {
  console.log('Hello');
};

var name = 'J';

var obj = {
  insideFunc: function() {
    console.log('객체 안에서 함수를 선언');
  },
  helloFunc: hello,
};

obj[name + 'ook'] = '내이름';

obj.insideFunc(); // (출력값) 객체 안에서 함수를 선언
obj.helloFunc();  // (출력값) Hello
console.log(obj.Jook); // (출력값) 내이름


=====ES6=====
const helloFunc = function() {
	console.log('Hello');
};

const name = 'J';

const obj = {
  insideFunc() {
    console.log('객체 안에서 함수를 선언');
  },
  helloFunc,
  [name + 'ook']: '내이름',
};

obj.insideFunc(); // (출력값) 객체 안에서 함수를 선언
obj.helloFunc(); // (출력값) Hello
console.log(obj.Jook); // (출력값) 내이름

insideFunc함수에는 콜론(:)을 붙이지 않아도 됨.
객체 프로퍼티를 동적으로 생성가능. ([name + 'ook']을 바깥에서 선언할 필요없이 ES6부터는 바로 속성으로 사용가능)

참고

https://wormwlrm.github.io/2018/10/03/What-is-the-difference-between-javascript-and-ecmascript.html
https://www.howdy-mj.me/javascript/var-let-const/
https://poiemaweb.com/es6-block-scope
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters
https://beomy.tistory.com/17
https://velog.io/@kimhscom/JavaScript-%EC%9E%90%EC%A3%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-ES6-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC
https://poiemaweb.com/es6-extended-parameter-handling
https://hanamon.kr/javascript-es6-%EB%AC%B8%EB%B2%95/
https://share-factory.tistory.com/19