1회차 - 01 ES6 문법 - Babel 표기법. String Literal, 객체, 배열, Spread Operator, for of 문

ES6 연습 사이트

• https://es6console.com/
• https://repl.it/languages/babel

변수 생성

• 자바스크립트는 변수 선언은 var
• ES6는 const와 let을 선호
• let은 변수에 재할당이 가능
• const는 변수 재선언, 재할당 모두 불가능

ES6 문자열

• 문자열 리터럴을 사용할 때 ` 를 사용한다. (따옴표가 아닌 ESC 아래, 1키 옆, Tab키 위에 있는 문자)

const t1 = "hello";
const t2 = "world";

// 일반적인 텍스트 합치기
const t3 = t1 +' , ' +t2;
console.log(t3);

// 리터럴 방식의 텍스트 합치기
const t4 = `${t1} , ${t2}`
console.log(t4);

출력결과

hello , world 
hello , world 

ES6 객체 비구조화 1

• 객체 생성과 필요한 속성만 가져와보는 연습을 해보자.

// 객체 생성
const player = {
  name : 'hero',
  job : 'knight',
  race : 'human',
  lv : 1,
  money : 1000  
};

// 객체 비구조화, Object Destructuring - 객체의 필요한 속성만 가져와보기
const { job } = player;
console.log(job);

const { name, money, noexist } = player;
console.log(`${name} , ${money} , ${noexist}`);

출력결과

// 객체 생성
const player = {
  name : 'hero',
  job : 'knight',
  race : 'human',
  lv : 1,
  money : 1000  
};

// 객체 비구조화, Object Destructuring - 객체의 필요한 속성만 가져와보기
const { job } = player;
console.log(job);

const { name, money, noexist } = player;
console.log(`${name} , ${money} , ${noexist}`);

ES6 객체 비구조화 2

• 속성의 이름 재정의(rename)을 해보기

// 객체 생성
const player = {
  name : 'hero',
  job : 'knight',
  race : 'human',
  lv : 1,
  money : 1000  
};

// 객체 비구조화, Object Destructuring
const job = 'magician'
const race = 'ork'

const { job: nextJob, race:nextRace } = player; // 속성을 가져올 때 변수명을 재정의
console.log(`${nextJob}, ${nextRace}`);

console.log(`----기존변수들-----`);
console.log(player);
console.log(`${job}, ${race}`);

출력결과

knight, human 
----기존변수들----- 
{"name":"hero","job":"knight","race":"human","lv":1,"money":1000} 
magician, ork 

ES6 배열 비구조화

• 배열 생성 및 따로 변수로 분리하는 작업을 해보자.

// 배열 생성 및 비구조화
const [firstJob, secondJob, thridJob] = ['Novice', 'Swordsman', 'Knight'];
console.log(`${secondJob}`);

출력결과

Swordsman

ES6 객체 리터럴 1

• 자바스크립트에선 {key,value}형식을 리터럴이라고 하는데, ES6에선 반대이다. 왜지?
• https://infoscis.github.io/2018/01/25/ecmascript-6-expanded-object-functionality/

// 객체 리터럴 - 자바스크립트의 기존 객체 생성과 비슷하고 기존 리터럴과 반대? 이상한데...
function getPlayer(name,job,race,lv){
  const myPlayer = {name, job, race, lv}; 
  console.log(myPlayer);
}

getPlayer('roto', 'monk', 'goblin', 5);

출력결과

{"name":"roto","job":"monk","race":"goblin","lv":5}

ES6 객체 리터럴 2

• 원래 위의 내용은 아래와 같으며, 추가로 속성을 더 주고 기본값을 정의할 수도 있다.

//위 객체 표현은 원래 다음과 같다.
function getPlayer(name,job,race,lv){
  const myPlayer = {
    name: name,
    job : job,
    race : race,
    lv : lv,
    money : 1000,
  }; 
  console.log(myPlayer);
}

getPlayer('roto', 'monk', 'goblin', 5);

출력결과

{"name":"roto","job":"monk","race":"goblin","lv":5,"money":1000} 

코드가 실행되는 순서

• 자바스크립트의 코드가 실행되는 순서는 다음을 참고
  • https://medium.com/gdana/스크립트-호출순서-d51a4349be71
  • https://rootable.tistory.com/entry/실행-순서-유의-사항
  • https://dydska07.tistory.com/22
• 함수생성이 우선적으로 읽어오고 이후 실행 코드들이 실행되므로 주의

// 객체 리터럴 - 자바스크립트의 기존 객체 생성과 비슷하고 기존 리터럴과 반대? 이상한데...
function getPlayer(name,job,race,lv){
  const myPlayer = {name, job, race, lv}; 
  console.log(myPlayer);
}

getPlayer('roto', 'monk', 'goblin', 5);

//위 객체 표현은 원래 다음과 같다.
function getPlayer(name,job,race,lv){
  const myPlayer = {
    name: name,
    job : job,
    race : race,
    lv : lv,
    money : 1000,
  }; 
  console.log(myPlayer);
}

getPlayer('roto', 'monk', 'goblin', 5);

예상한 출력결과

{"name":"roto","job":"monk","race":"goblin","lv":5} 
{"name":"roto","job":"monk","race":"goblin","lv":5,"money":1000}

실제 출력결과

{"name":"roto","job":"monk","race":"goblin","lv":5,"money":1000}
{"name":"roto","job":"monk","race":"goblin","lv":5,"money":1000}

ES6의 for문

• for of 문법을 사용하자.

let postcodes = [55555, 55556, 55557, 55558];

// es6 권장사항
// 파이썬 for in과 ES6의 for in 과 같다고 보면 되며, 마찬가지로 copy방식이라 원본데이터 수정은 안된다.
for (let pc of postcodes) {
  console.log(pc);
  if (pc==55557){
      break;
  }
}

console.log(`------`)

// for in 문법은 typeof로 확인해보면 전부 str으로 나옴 따라서 for of 문법이 생겨남
// 그리고 value가 아닌 인덱스가 추출된다. 따라서 postcodes[pc]로 접근해야한다.
for (let pc in postcodes) {
  console.log(pc);
  console.log(typeof pc);
}

console.log(`------`)

// es5
// forEach 좋은 문법이지만, 내부에서 break를 사용할 수 없다는 단점이 크다!
postcodes.forEach((pc) => {
  console.log(pc);
});

출력결과

55555 
55556 
55557 
------ 
0 
string 
1 
string 
2 
string 
3 
string 
------ 
55555 
55556 
55557 
55558 

ES6 Spread Operator 1 - 배열

• 펼침 연산자.
• 파이썬은 언패킹연산자(*, **) 정도로 생각하면 된다.
• ES6에선 ... 이다.

// Spread Operator
let years = [2001, 2010, 2015, 2018];
let yearsCopy = [2000, ...years, 2020];

console.log(yearsCopy);

출력결과

[2000,2001,2010,2015,2018,2020] 

ES6 Spread Operator 2 - 객체

• 배열할 때와 똑같이 ...으로 한다.
• 그런데 이건 ES6 Console에서 테스트가 안된다?
• 때문에 여기서 테스트할 수 있다.
  • https://repl.it/languages/babel
  • https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax

let koreanWar = {
  liberate: 1945,
  625: 1950,
};

let worldWar = {
  worldWar1: 1914,
  worldWar2: 1945,
  ...koreanWar,
};

console.log(koreanWar);
console.log(worldWar);

출력결과

{ 625: 1950, liberate: 1945 }
{ 625: 1950, worldWar1: 1914, worldWar2: 1945, liberate: 1945 }

ES6 Spread Operator 3 - 객체 활용

• 주로 초기설정한 객체에 덮어쓰는 용도로 활용할 수 있다.
• 그냥 파이썬 딕셔너리처럼 쓸 수 있다는 것을 왜이리 어렵게 표현할까.

let address1 = {
  country: 'South Korea',
  citiy: 'Seoul',
};

let address2 = {
  ...address1,
  country: 'United State',
};
console.log(address1);
console.log(address2);

출력결과

{ country: 'South Korea', citiy: 'Seoul' }
{ country: 'United State', citiy: 'Seoul' }

일단 ES6 문법만 하니 지루하다. 중간 만들기를 해보고 ES6문법을 재개하자.