HwangSee

221215 TIL

  • 2022년 12월 15일

오늘 한 일

  • 자바스크립트 완벽가이드 7장 배열 정리
  • 제로초님 NodeBird 만들기 강의 실습 (3)

배열 길이

  • 모든 배열에는 length 프로퍼티가 있으며 이 프로퍼티는 일반적인 자바스크립트 객체와 배열을 구분하는 특징이다.
  • 자바스크립트 배열의 특별한 동작 두 가지
    1. 배열의 길이 이상인 i 인덱스에 값을 할당할 때 length 프로퍼티를 i + 1으로 갱신
    2. 배열의 length 프로퍼티를 현재 값보다 작은 양의 정수 n으로 지정할 때 n 이상인 배열 요소는 모두 삭제

배열 요소 추가와 삭제

  • 새 인덱스에 값을 할당하는 방법
a[0] = "zero";
  • push() 메서드 사용하여 요소 추가
// 배열 마지막에 값 추가
a.push("one");
a; // ["zero", "one"]
  • delete 연산자로 배열 요소 삭제
let a = [1, 2, 3];
delete a[2];
2 in a // => false: 배열 인덱스 2는 정의되지 않음
a.length // => 3: delete는 배열 길이에 영향을 주지 않음
  • 배열 요소를 삭제하는 것은 그 요소에 undefined를 할당하는 것과 비슷하다.
  • delete 연산자를 사용해도 length 프로퍼티는 변하지 않고 빈 공간을 메우기 위해 요소가 이동하지 않는다.
    • 요소 삭제 시 그 배열은 성긴 배열이 된다.

배열 순회

  • for/of 루프 사용
let letters = [..."Hello world"]; // 글자로 이루어진 배열
let string = "";
for(let letter of letters) {
	string += letter;
}
string // => "Hello world" 원래 텍스트를 새로 만듬
  • for/of의 내장 이터레이터는 오름차순으로 요소를 반환하고, 성긴 배열같이 존재하지 않는 요소는 undefined를 반환
  • 각 요소의 인덱스가 필요하다면 entries() 메서드와 분해 할당을 사용
let everyother = "";
for(let [index, letter] of letters.entries()) {
	if (index % 2 === 0) everyother += letter; // 짝수 번째 인덱스의 글자
}
everyother // => Hlowrd
  • forEach() 사용
    • 전달받은 함수를 각 배열 요소에서 호출한다.
let uppercase = "";
letters.forEach(letter => {
	uppercase += letter.toUpperCase();
});
uppercase // => "HELLO WORLD"

💡  forEach()는 배열을 순서대로 순회하며 배열 인덱스를 함수의 두번째 인자로 전달한다. for/of 루프와 달리 forEach()는 성긴 배열을 인식하고 존재하지 않는 요소에 대해서는 호출하지 않는다.

  • 성긴 배열을 인식하고 빈 자리에 아무 일도 하지 않는 forEach
let a = [1, 2, 3];
delete a[1];
a.forEach(n => console.log(n))
// 출력
1
3
  • undefined를 할당하면 성긴 배열이 아니고 forEach 함수 또한 호출한다.
let a = [1, 2, 3];
a[1] = undefined;
a.forEach(n => console.log(n))
// 출력
1
undefined
3
  • 성긴 배열을 인식하지 못하는 for/of
let a = [1, 2, 3];
delete a[1]
for(let itm of a) {
    console.log(itm);
}
// 출력
1
undefined
3

배열 메서드

배열 메서드는 다음과 같이 분류할 수 있다.

  • 배열 요소를 순회하는 이터레이터 메서드
    • 일반적으로 각 요소에 대해 함수를 호출한다.
  • 배열의 앞이나 뒤에 요소를 추가하거나 제거하는 스택, 큐 메서드
  • 큰 배열의 추출, 삭제, 삽입, 충당(fill), 복사하는 하위 배열 메서드
  • 배열을 검색하고 정렬하는 메서드

1) 배열 이터레이터 메서드

  • 배열 요소를 순서대로 함수에 전달하는 방식으로 요소를 순회, 변환, 필터, 체크, 축소(reduce)할 수 있다.
  • 대부분의 이터레이터 메서드는
    • 첫번째 인자로 함수를 받으며 각 배열 요소(또는 일부 요소)에 함수를 한번씩 호출한다.
    • 성긴 배열이라면 존재하지 않는 값에는 함수를 호출하지 않는다.
    • 함수는 배열 요소의 값, 인덱스, 배열 자체 세 가지 인자를 받는다. (첫번째 인자만 사용하고 2, 3번째 무시될 때 많음)
    • 이터레이터 메서드는 선택 사항으로 두 번째 인자를 받는데, 첫번째 인자인 함수는 자신이 그 두번째 인자의 메서드인 것처럼 호출된다. (두번째 인자가 함수의 this가 된다.)
검색