27장 배열 #24
27장 배열 #24
Conversation
27장 배열 정리본
27장 정리본 markdown 오류 수정
이미지 파일 assets으로 분리
zziglet
requested review from
MinboyKim,
junepil,
Turtle-Hwan,
joeuns,
whddltjdwhd,
songeunseo and
clicelee
|  | ||
|
|
||
| 실제 실행 시간은 이정도 차이가 발생함 |
| console.log(arr) //[1, 2, 3, 4] | ||
| ``` | ||
|
|
||
| 성능 면에서 좋지 않은 메소드 → 마지막 요소로 추가할 요소가 하나뿐일 때는 length로 직접 추가 |
| ES6의 스프레드 문법을 사용하는 것이 더 좋은 방법(31장에서 살펴보도록 하자) | ||
|
|
||
| → 함수 호출 없이 표현식으로 마지막에 요소 추가 가능, 원본 배열 수정되지 않는 장점! |
| `pop`과 `push`를 배웠으니 stack을 구현할 수 있다! | ||
|
|
||
|  | ||
|
|
||
| 1. 생성자 함수로 구현하기 | ||
| 2. 클래스로 구현하기 | ||
|
|
||
| ~~(궁금하신 분들은 딥다이브 교재 512쪽으로..(또는 자료구조 수업으로) 내용이 많아 생략합니다.)~~ |
There was a problem hiding this comment.
Queue Class를 만들어서 객체를 이용해 구현해요!
|
|
||
| → 제거한 요소 반환 | ||
|
|
||
| → 원본 배열을 직접 변경하는 메소드(mutator method) |
There was a problem hiding this comment.
원본배열을 직접 변경하느냐 변경된 배열을 반환하느냐가 꽤 중요한 거 같아요
|
|
||
| ### 27.9.10 `Array.prototype.flatMap` | ||
|
|
||
| ES10에서 도입된 메서드로, 생성된 새로운 배열을 평탄화 |
| for(let i = 0; i < 10000000; i++){ | ||
| arr[i] = i; | ||
| } | ||
| console.timeEnd('Array Performance Test'); |
There was a problem hiding this comment.
벤치마킹을 한 번도 해본적이 없는데 console.time 잘 알아 갑니다
|
|
||
| - 값 없이 비어있는 요소를 위해 메모리 공간 확보 x, 빈 요소를 생성하지도 x | ||
|
|
||
| ### 27.3.3 희소배열 |
There was a problem hiding this comment.
sparse의 의미에 '희소한'이라는 뜻이 있어서 희소 배열이라고 말하는 것 같은데 희소 배열보다는 '흩어진' 배열이 더 와닿네요
| console.log(arr[0]); //1 | ||
| ``` | ||
|
|
||
| 존재하지 않는 요소에 접근 시 undefined가 반환된다. |
There was a problem hiding this comment.
다른 언어들은 Index Out of Bound 오류가 뜨는데 이건 정말 위험하네요
| console.log(arr) //[1, 2, 3, 4] | ||
| ``` | ||
|
|
||
| 성능 면에서 좋지 않은 메소드 → 마지막 요소로 추가할 요소가 하나뿐일 때는 length로 직접 추가 |
| ```jsx | ||
| function sum() { | ||
| //ES5 | ||
| var arr = Array.prototype.slice.call(arguments); |
|
|
||
| **length 프로퍼티** | ||
|
|
||
| `map`이 생성하여 반환하는 새로운 배열의 length 프로퍼티 값 ≤ 호출한 배열의 length 프로퍼티 |
There was a problem hiding this comment.
| `map`이 생성하여 반환하는 새로운 배열의 length 프로퍼티 값 ≤ 호출한 배열의 length 프로퍼티 | |
| `filter`이 생성하여 반환하는 새로운 배열의 length 프로퍼티 값 ≤ 호출한 배열의 length 프로퍼티 |
|
|
||
| 4. 중첩 배열 평탄화 | ||
|
|
||
| ⇒ 그냥 `Array.prototype.flat` 활용하자.. |
| 숫자 요소를 정렬할 때에는 정렬 순서를 정의하는 비교 함수를 인수로 전달해야 한다! | ||
|
|
||
| ```jsx | ||
| const points = [40, 100, 1, 5, 2, 25, 10]; | ||
|
|
||
| points.sort((a, b) => a - b); | ||
| console.log(points); // [1, 2, 5, 10, 25, 40, 100] | ||
|
|
||
| //숫자 배열에서의 내림차순 정렬 | ||
| points.sort((a, b) => b - a); | ||
| console.log(points); // [100, 40, 25, 10, 5, 2, 10] | ||
| ``` |
There was a problem hiding this comment.
TypedArray.prototype.sort()를 이용하면 비교함수 없이 숫자정렬이 가능합니당
const points = [40, 100, 1, 5, 2, 25, 10];
const sortedPoints = new Int32Array(points).sort();
console.log([...sortedPoints]); // [1, 2, 5, 10, 25, 40, 100]
Co-authored-by: Junepil Lee <[email protected]>
Co-authored-by: Junepil Lee <[email protected]>
Co-authored-by: Eunseo Song <[email protected]>
| console.log(arr.length); //3 | ||
| ``` | ||
|
|
||
| 2. js에 배열이라는 타입은 존재하지 않는다. **배열은 객체 타입**이다. |
| - `Array` 생성자 함수와 다른 점? | ||
| - 전달된 인수가 1개 and 숫자 → 그래도 인수를 요소로 갖는 배열 생성 |
There was a problem hiding this comment.
// Array 생성자 함수
let arr1 = Array(3);
console.log(arr1); // 출력: [ <3 empty items> ]
console.log(arr1.length); // 출력: 3
// Array.of
let arr2 = Array.of(3);
console.log(arr2); // 출력: [3]
console.log(arr2.length); // 출력: 1위와 같이 Array 생성자 함수는 인자로 들어온 숫자를 배열의 길이로 인식하고, Array.of는 숫자를 배열의 요소로 인식한다는 점에 있어 차이가 있네요!
|
|
||
| ## 27.7 배열 요소의 삭제 | ||
|
|
||
| 배열은 사실 객체 → 배열의 특정 요소를 삭제하기 위해 `delete` 연산자 사용 가능 |
There was a problem hiding this comment.
delete 연산자는 다음과 같은 한계가 있습니다.
function Person() {
this.name = 'Alice';
}
Person.prototype.age = 25;
const person = new Person();
delete person.name; // 직접 프로퍼티인 name은 삭제됨
delete person.age; // person 객체에는 age가 없으므로, 프로토타입의 age는 삭제되지 않음
console.log(person.name); // 출력: undefined
console.log(person.age); // 출력: 25 (프로토타입에서 상속받음)객체 인스턴스의 프로퍼티만 삭제하고, 해당 객체의 프로토타입 체인 상에 있는 프로퍼티는 삭제가 불가능합니다!
그리고 객체에서 delete 연산자를 통해 프로퍼티를 삭제할 때, 객체 내부의 최적화( hidden class(또는 shape))가 해제되어 이후 속성 접근 성능에 영향을 줄 수 있습니다! (백준에서 이 문제를 겪어 봤었습니다..) 그래서 성능에 아주 민감한 경우에는 프로퍼티에 null 이나 undefined를 할당하는 방식으로 대체할 수 있습니다.
| 1. 원본 배열을 직접 변경하는 메서드(**mutator method**) | ||
| 2. 원본 배열을 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드(**accessor method**) |
There was a problem hiding this comment.
어떤 메서드가 새로운 배열을 반환하는 건지... 헷갈려요ㅠㅠㅠㅠ
| - 중복 요소 여러 개가 존재 → 첫번째로 검색된 요소의 index 반환 | ||
| - 두번째 인수로 검색을 시작할 index 추가 가능 | ||
| - 인수로 전달된 요소가 존재하지 않음 → -1 반환 |
There was a problem hiding this comment.
시간복잡도는 O(n)! - What is the time complexity of javascript's array.indexOf?
| `pop`과 `push`를 배웠으니 stack을 구현할 수 있다! | ||
|
|
||
|  | ||
|
|
||
| 1. 생성자 함수로 구현하기 | ||
| 2. 클래스로 구현하기 | ||
|
|
||
| ~~(궁금하신 분들은 딥다이브 교재 512쪽으로..(또는 자료구조 수업으로) 내용이 많아 생략합니다.)~~ |
There was a problem hiding this comment.
Queue Class를 만들어서 객체를 이용해 구현해요!
| ``` | ||
|
|
||
|
|
||
| for문과 달리 break, continue 사용 불가 → 무조건 배열을 빠짐 없이 다 순회해야 함 |
There was a problem hiding this comment.
let arr = [1, 3, 5, 7, 9];
arr.forEach((num, idx) => {
if (idx == 2) return;
arr[idx] = num ** 2;
});
console.log(arr); // [ 1, 9, 5, 49, 81 ]return문을 써도 마찬가지군요..!
늦어서 죄송합니다..
메소드 예시가 꽤 많았네유..
+내용이 너무 길어서 가독성 바닥일것 같아..더 깔끔한 원본 노션 넣어놓을게유 정신병오면 참고해주셔요~ (26일 새벽)
배열 정리본 Notion 버전