Skip to content

Instantly share code, notes, and snippets.

@BurningDroid
Last active March 10, 2019 15:52
Show Gist options
  • Select an option

  • Save BurningDroid/7b75891f034b4083c3b6e49945f388d5 to your computer and use it in GitHub Desktop.

Select an option

Save BurningDroid/7b75891f034b4083c3b6e49945f388d5 to your computer and use it in GitHub Desktop.
[Study][JavaScript] Learning Javascript - summary

8. Array

8.1 배열의 특징

  • 비균질적 - 배열의 모든 요소가 같은 타입이 아니어도 된다.
  • 배열 길이보다 큰 인덱스를 사용하여 값을 할당하면 자동으로 그 인덱스에 맞게 늘어나며, 빈자리는 undefined로 채워진다.
const arr = [1, 2, 3];
arr[9] = 10;    // arr 사이즈가 10개로 증가하며, 빈 자리는 undefined로 채워짐.

const arr2 = [1, 2, 3];
arr[9]; // 배열 길이보다 큰 인덱스에 접근하는 것만으로는 크기가 늘어나지 않음

8.2 배열 요소 조작

  • 배열 조작 메서드 중 일부는 배열 '자체를' 수정하며, 다른 일부는 새 배열을 반환한다.

    • 메서드 명에 이러한 차이점이 명시되어 있지 않기 때문에 개발자가 숙지하거나 주의 깊게 사용해야 한다.
  • push, pop, shift, unshift, concat, slice, splice, copyWithin, fill

  • push/pop

  • shift/unshift

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

// pop
const arr2 = [1, 2, 3];
arr2.pop();
console.log(arr2); // arr2 == [1, 2]

// shift
const arr3 = [1, 2, 3];
arr3.shift();
console.log(arr3); // arr3 == [2, 3]

// unshift
const arr4 = [1, 2, 3];
arr4.unshift(0);
console.log(arr4); // arr4 == [0, 1, 2, 3]
  • concat
// concat
arr = [1, 2, 3];
let b;
b = arr.concat(4, 5, 6);
console.log(b); // [1, 2, 3, 4, 5, 6]
console.log(arr); // 원본 배열은 수정되지 않는다.

b = arr.concat([4, 5], 6);
console.log(b); // [1, 2, 3, 4, 5, 6] 배열을 분해하여 추가한다.

b = arr.concat([[4, 5], 6, [7, 8]]);
console.log(b); // [1, 2, 3, [4, 5], 6, [7, 8]] 배열 안의 배열은 분해하지 않는다.
  • slice
// slice
arr = [1, 2, 3, 4, 5];
arr.slice(3); // [4, 5]
arr.slice(2, 4); // [3, 4]
arr.slice(-2); // [4, 5]
arr.slice(1, -2) // [2, 3]
arr.slice(-2, -1); // [4]

12. Iterator, Generator

Iterator

  • Java의 iterator와 동일한 개념
  • 배열의 .values() 메서드를 통해 iterator를 얻을 수 있다.
  • iterator.next() 함수를 통해 순회할 수 있다.
  • 마지막 요소에 도달하였더라도 iterator는 끝나지 않으며, 계속해서 next() 함수를 호출할 수 있다.
  • iterator는 모두 독립적이므로 새로운 iterator를 생성할 때마다 항상 처음부터 시작한다.
const nums = ["1", "2", "3", "4", "5"];
const it = nums.values();
console.log(it.next()); // value: 1, done: false
console.log(it.next()); // value: 2, done: false
console.log(it.next()); // value: 3, done: false
console.log(it.next()); // value: 4, done: false
console.log(it.next()); // value: 5, done: false
console.log(it.next()); // value: undefine, done: true

12.1 Iterator Protocol

  • 모든 객체를 iterable 객체로 바꿀 수 있게 한다.
  • 클래스에 심볼 메서드 (Symbol.iterator)를 추가하면 배열처럼 순회할 수 있다.
class MyObj {
  constructor() {
    this.datas = [];
  }
  
  // 심볼 메서드 추가
  [Symbol.iterator]() {
    return this.datas.values();
  }
}

const my = new MyObj();
for (let entry of my) { // 배열처럼 순회 가능
  console.log(entry);
}

12.2 Generator

  • 일반적인 함수이다. (다만 2가지 예외가 있다.)
    • 호출자에게 제어권을 넘길 수 있다.
    • 호출 즉시 실행되지 않는다.
  • 문법:
    • function 뒤에 * 를 붙인다.
function* myFunction() {
  // ...
}
  • Generator의 return은 Generator를 중간에 종료하기 위한 목적이므로 절대 return 문을 통해 중요한 값을 반환하지 않아야 한다.
    • 호출자와의 통신은 yield를 통해서만 해야 한다.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment