7일차 - 2022.03.07

오늘 공부한 내용 요약

( 모던 JavaScript 튜토리얼 학습 )

1. 배열과 메서드

• splice
  arr.splice(start) 이 메서드를 사용하면 요소 추가, 삭제, 교체가 모두 가능합니다.

let arr = ["I", "study", "JavaScript"];

arr.splice(1, 1); // 인덱스 1부터 요소 한 개를 제거

alert( arr ); // ["I", "JavaScript"]

let arr = ["I", "study", "JavaScript"];

arr.splice(2, 0, "complex", "language");

alert( arr ); // "I", "study", "complex", "language", "JavaScript"

• slice

let arr = ["t", "e", "s", "t"];

alert( arr.slice(1, 3) ); // e,s (인덱스가 1인 요소부터 인덱스가 3인 요소까지를 복사(인덱스가 3인 요소는 제외))

alert( arr.slice(-2) ); // s,t (인덱스가 -2인 요소부터 제일 끝 요소까지를 복사)

• concat
  기존 배열의 요소를 사용해 새로운 배열을 만들거나 기존 배열에 요소를 추가하고자 할 때 사용할 수 있습니다.

let arr = [1, 2];

alert( arr.concat([3, 4]) ); // 1,2,3,4

alert( arr.concat([3, 4], [5, 6]) ); // 1,2,3,4,5,6

• 배열 탐색하기

indexOf, lastIndexOf와 includes

1) arr.indexOf(item, from)는 from부터 시작해 item을 찾습니다. 발견하면 해당 요소의 인덱스를 반환하고, 발견하지 못했으면 -1을 반환합니다.
2) arr.lastIndexOf(item, from)는 위 메서드와 동일한 기능을 하는데, 검색을 끝에서부터 시작한다는 점만 다릅니다.
3) arr.includes(item, from)는 인덱스 from부터 시작해 item이 있는지를 검색하는데, 해당하는 요소를 발견하면 true를 반환합니다.
예시:

let arr = [1, 0, false];

alert( arr.indexOf(0) ); // 1
alert( arr.indexOf(false) ); // 2
alert( arr.indexOf(null) ); // -1

alert( arr.includes(1) ); // true

• find와 findIndex

arr.find(function(item, index, array) // item만 주로 사용됨
원하는 조건을 찾지 못했으면 undefined가 반환됨

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

let user = users.find(item => item.id == 1);

alert(user.name); // John

arr.findIndex는 find와 동일한 일을 하나, 조건에 맞는 요소를 반환하는 대신 해당 요소의 인덱스를 반환한다는 점이 다릅니다.
조건에 맞는 요소가 없으면 -1이 반환됩니다.

배열을 변형하는 메서드

map은 배열 요소 전체를 대상으로 함수를 호출하고, 함수 호출 결과를 배열로 반환

let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
alert(lengths); // 5,7,6

sort는 배열의 요소를 재정렬하는데 요소는 문자열로 취급되어 재정렬된다.

let arr = [ 1, 2, 15 ];

// arr 내부가 재 정렬됩니다.
arr.sort();

alert( arr );  // 1, 15, 2       (문자열로 취급되어 15가 2보다 먼저)

• reverse
  역순으로 정렬시켜줌

let arr = [1, 2, 3, 4, 5];
arr.reverse();

alert( arr ); // 5,4,3,2,1

• split
  입력받은 문자열을 배열로 바꾸기

let names = 'Bilbo, Gandalf, Nazgul';

let arr = names.split(', ');

for (let name of arr) {
  alert( `${name}에게 보내는 메시지` ); // Bilbo에게 보내는 메시지
}

let str = "test";

alert( str.split('') ); // t,e,s,t

• reduce와 reduceRight
  배열을 기반으로 값 하나를 도출할 떄 사용
  (대개 2개의 인수만 받음)
  예시

let arr = [1, 2, 3, 4, 5];

let result = arr.reduce((sum, current) => sum + current, 0);

alert(result); // 15 

과정
sum ->0 / current -> 1(처음값) = 1
sum -> 0+1 / current -> 2 = 3
sum -> 3 / current-> 3 = 6

이전 호출의 결과가 다음 호출의 첫 번째 인수로 전달되는 원리

• Array.isArray로 배열 여부 알아내기

자바스크립트에서 배열은 독립된 자료형으로 취급되지 않고 객체형에 속한다
따라서 typeOf로 객체와 배열의 구별이 불가하다
Array.isArray(value)는 이럴 때 사용할 수 있는 유용한 메서드입니다.

value가 배열이라면 true를, 배열이 아니라면 false를 반환해주죠.

alert(Array.isArray({})); // false

alert(Array.isArray([])); // true

• thisArg
  thisArg는 선택적으로 사용할 수 있는 마지막 인수

2. iterable 객체

iterable(반복가능한) 이라는 개념을 이용하면 어떤 객체든 for..of 반복문을 사용가능하다

obj[Symbol.iterator]의 결과는 이터레이터라고 부릅니다. 이터레이터는 이어지는 반복 과정을 처리한다.

range를 iterable로 만들려면(for..of가 동작하도록 하려면)
Symbol.iterator(특수 내장 심볼)라는 반드시 메서드를 추가해야함. 그러면

1. for..of가 시작되자마자 Symbol.iterator를 호출합니다
(Symbol.iterator가 없으면 에러가 발생)
Symbol.iterator는 반드시 이터레이터(iterator, 메서드 next가 있는 객체) 를 반환해야 합니다.
2. for..of는 반환된 객체(이터레이터)만을 대상으로 동작합니다
3. for..of에 다음 값이 필요하면, for..of는 이터레이터의 next()메서드를 호출합니다.
4.next()의 반환 값은 {done: Boolean, value: any}와 같은 형태이어야 합니다. done=true는 반복이 종료되었음을 의미합니다. done=false일땐 value에 다음 값이 저장됩니다.

• 무수히 많은 이레이터도 가능, 무수히 많은 의사 난수를 생성하는 이터러블 객체를 만드는 것도 가능합니다. 이 방법이 유용하게 쓰이는 경우도 있습니다.

• 이레이터를 명시적으로 호출하기

let str = "Hello";

// for (let char of str) alert(char);

let iterator = str[Symbol.iterator]();

while (true) {
  let result = iterator.next();
  if (result.done) break;
  alert(result.value); // 글자가 하나씩 출력됩니다.
}

• 이터러블은 메서드 Symbol.iterator가 구현된 객체입니다.
  유사 배열은 인덱스와 length 프로퍼티가 있어서 배열처럼 보이는 객체입니다

이터러블 객체라고 해서 유사 배열 객체는 아닙니다.
유사 배열 객체라고 해서 이터러블 객체인 것도 아닙니다.

let arrayLike = { // 인덱스와 length프로퍼티가 있음 => 유사 배열
  0: "Hello",
  1: "World",
  length: 2
};

// Symbol.iterator가 없으므로 에러 발생
for (let item of arrayLike) {}

위 예시는 유사 배열 객체이지만 이터러블 객체는 아님

명세서를 보면 대부분의 메서드는 진짜 배열이 아닌 이터러블이나 유사 배열을 대상으로 동작한다고 쓰여 있는걸 볼 수 있습니다 이 방법이 더 추상적이기 때문입니다.

Array.from(obj[, mapFn, thisArg])을 사용하면 이터러블이나 유사 배열인 obj를 진짜 Array로 만들 수 있습니다.
이렇게 하면 obj에도 배열 메서드를 사용할 수 있죠.
선택 인수 mapFn와 thisArg는 각 요소에 함수를 적용할 수 있게 해줍니다.

공부사이트

코어 자바스크립트

---

위의 내용은 공부중 본인이 이해한 내용으로 몇몇 틀린 내용이 있을 수 있습니다.
회독중 발견시 수정하겠습니다