Iterable

Iterable 이라는 것은 일종의 개념입니다. 반복가능하다 라는 개념인데, 이러한 개념을 이용하면

• for ... of 구문의 사용이 가능합니다.
• ... spread 문법의 직접적 사용도 가능합니다. (Iterator가 있기 때문)
  일반객체의 spread 사용은 중괄호 안에서 제한되어있습니다.

다시말하면 for ... of 구문의 사용이 가능한 객체를 Iterable이라 부릅니다.

// Iterable 객체 만들기
let range = {
  from: 1,
  to: 5,
};

//for ... of 호출시 가장처음 [Symbol.iterator] () {} 이 호출됩니다.
range[Symbol.iterator] = function () {
  return {
    current: this.from,
    last: this.to,

    // for ... of 반복문에 의해 반복마다 next()가 호출됩니다.
    // next()함수는 반환형태가 {done: , value: } 입니다.
    // 다음 반복구조가 가능한 상태일 때 {done: false, value: something}
    // 더이상 반복구조가 불가능 할때 {done: true} 를 반환합니다. 
    next() {
      if (this.current <= this.last)
        return { done: false, value: this.current++ };
      else return { done: true };
      // next 함수는 현재
    },
  };
  //Symbol.iterator은 Iterable한 객체를 반환합니다.
};

for (const item of range) console.log(item);

이렇게 Iterable한 자료형에는 next(), Symbol.iterator 형태의 함수가 존재합니다. 이러한 자료형으로서는 문자열, Set, Map, Array가 있습니다.

Iterable 자료형에 대한 loop

for of

const testArr = [1, 2, 3, 4, 5];
for (const item of testArr) {
  console.log(item);
}
//1
//2
//3
//4
//5

.map 과 매우 유사하다. const item은 배열의 원소와 매칭되어진다.
다만 반복문을 돌다가 continue, break, return 같은 것을 넣어 반복중간 코드를 끊을수 없다.

arr.entries()

const testArr = ['one', 'two', 'three', 'four'];
console.log([...testArr.entries()]);
for (const [index, item] of testArr.entries()) {
  console.log(`${index} : ${item}`);
}
//(4) [Array(2), Array(2), Array(2), Array(2)]
//0 : one
//1 : two
//2 : three
//3 : four

배열의 원소와 함께 인덱스를 함께 배열로 묶어주는 함수이다. 배열의 자체 기능이다.

enhanced object literal

// ES2020 enhanced object literal
const talent = 'coding';
const testObj = {
  gender: 'male',
};

const testObj2 = {
  name: 'doodream',
  age: 28,
  ...testObj,
  talent,
  // === 
  // talent : talent
};
console.log(testObj2);

위 코드와 같이 변수의 이름과 객체 속성의 이름을 같게 지을 경우에는 :를 붙여서 중복 코드를 작성할 필요는 없다.

객체 함수 축약형

const testObj = {
  name: 'doodream',
  printName() {
    console.log(this.name);
  },
  /*
  printName: function () {
    console.log(this.name);
  },
  */
};
console.log(testObj.printName());

Optional Chaining

ES2020 부터 생겨난 구문이다.
?. 문구를 쓰는 경우이다. optional chaining 이라는 경우를 보자

const testObj = {
  name: 'doodream',
  printName() {
    console.log(this.name);
  },
};

if (testObj.age) console.log(testObj.age);// 실행 안됨
testObj.age ?? console.log(testObj.age)// undefined
console.log(testObj?.age);// undefined
console.log(testObj?.age?.adult?...)// undefined

• testObj객체에서 age라는 속성을 불러오려면 애초에 해당객체에 age라는 프로퍼티가 있는지 알아보고 해당 속성에 접근을 해야한다. 하지만 Optional Chaining은 해당 객체가 있으면 해당값을 불러오고 없다면 undefined 값으로 반환한다.
• 논리구조는 nullish coalescing과 같다. 다만 그것을 단축한 것이다. 이 optional Chaining은 계속해서 확장시킬수 있다는 점에서 굉장하다.
• if구문 혹은 circuiting도 계속 이어 붙여야 할 코드에서 간결하게 끊을 수있다.
• 객체의 프로퍼티에 대해서 사용이 가능하므로 ['property'] 형태의 접근법으로 리터럴 문자열로서 동적으로 속성에 접근이 가능하고, 함수또한 프로퍼티이므로 해당 함수가 있는지 optionalChaining을 통해 코드를 매우 단축시킬수 있다.

Object.keys(obj) , Object.values(obj)

const game = {
  team1: 'Bayern Munich',
  team2: 'Borrussia Dortmund',
  players: [
    [
      'Neuer',
      'Pavard',
      'Martinez',
      'Alaba',
      'Davies',
      'Kimmich',
      'Goretzka',
      'Coman',
      'Muller',
      'Gnarby',
      'Lewandowski',
    ],
    [
      'Burki',
      'Schulz',
      'Hummels',
      'Akanji',
      'Hakimi',
      'Weigl',
      'Witsel',
      'Hazard',
      'Brandt',
      'Sancho',
      'Gotze',
    ],
  ],
  score: '4:0',
  scored: ['Lewandowski', 'Gnarby', 'Lewandowski', 'Hummels'],
  date: 'Nov 9th, 2037',
  odds: {
    team1: 1.33,
    x: 3.25,
    team2: 6.5,
  },
};

console.log(Object.values(game.odds));//(3) [1.33, 3.25, 6.5]

console.log(Object.keys(game.odds));// (3) ["team1", "x", "team2"]

각 객체에 대하서 순서는 상관없이 각 프로퍼티의 키와 키에 해당하는 값만 따로 추출하여 만든 배열을 의미한다. 함수도 그대로 들어간다.