자바스크립트 딥 다이브 27장 배열 part-3

houndhollis·2024년 5월 9일
0

오늘은 목요일인데 조금 확실히 주4일제가 시간이 빨리 가는것 같다.

unshift

unshift 인수로 전달받은 모든 값을 원본 배열의 선두에 추가하고 변경된 length 프로퍼티 값을 반환한다.

const arr = [1, 2];

let result = arr.unshift(3, 4);

console.log(result); // 4

// unshift 메서드는 원본 배열을 직접 변경한다.
console.log(arr); // [3, 4, 1, 2]

shift

shift 메서드는 원본 배열에서 첫 번째 요소를 제거한다. 원본 배열이 빈 배열이면 undefined를 반환한다. shift 메서드는 원본 배열을 직접 변경한다.

const arr = [1, 2];

let result = arr.shift();
console.log(result); // 1

// shift
console.log(arr); // [2]

concat

concat 메서드는 인수로 전달된 값들을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환한다. 인수로 전달한 값이 배열인 경우 배열을 헤체하여 새로운 배열의 요소로 추가한다. 원본 배열은 변경되지 않는다.

const arr1 = [1, 2];
const arr2 = [3, 4];
// 배열 arr2를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환한다.
let result = arr1.concat(arr2);
console.log(result); // [1, 2, 3, 4]

// 숫자를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환한다. 
result = arr1.concat(3);
console.log(result); // [1, 2, 3]

result = arr1.concat(arr2, 5);
console.log(result); // [1, 2, 3, 4, 5]

// 원본 배열은 변경되지 않는다.
console.log(arr1); // [1, 2]

splice

원본 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거하는 경우 splice 메서드를 사용한다. splice 메서드는 3개의 매개변수가 있으며 원본 배열을 직접 변경한다.

const arr = [1, 2, 3, 4];

// 원본 배열의 인덱스 1부터 2개의 요소를 제거하고 그 자리에 새로운 요소 20, 30을 삽입한다.
const result = arr.splice(1, 2, 20, 30);

// 제거한 요소가 배열로 반환된다.
console.log(result); // [2, 3]

// splice 메서드는 원본 배열을 직접 변경한다.
console.log(arr); // [1, 20, 30, 4]



const arr = [1, 2, 3, 4];

// 원본 배열의 인덱스 1부터 0개의 요소를 제거하고 그 자리에 새로운 요소 100을 삽입한다.
const result = arr.splice(1, 0, 100);

// 원본 배열이 변경된다.
console.log(arr); // [1, 100, 2, 3, 4]
// 제거한 요소가 배열로 반환된다.
console.log(result); // []

slice

slice 메서드는 두 개의 매개변수를 갖는다.
start : 복사를 시작할 인덱스다 음수의 경우 배열의 끝에서의 인덱스를 나타낸다.
end : 복사를 종료할 인덱스다. end는 생략 가능하다.

const arr = [1, 2, 3];
// arr[0] 부터 arr[1] 이전(arr[1] 미포함)까지 복사하여 반환한다.
arr.slice(0, 1); // - [1]

// arr[1]부터 arr[2] 이전(arr[2] 미포함)까지 복사하여 반환한다.
arr.slice(1, 2); // - [2]

// 원본은 변경되지 않는다.
console.log(arr); // [1, 2, 3]

slice 메서드의 인수를 모두 생략하면 원본 배열의 복사본을 생성하여 반환한다. 이때 생성된 복사본은 얕은 복사를 통해 생성된다.


join

join 메서드는 원본 배열의 모든 요소를 문자열로 변환한다.

const arr = [1, 2, 3];

arr.join(); // '1,2,3'

arr.join(''); // '123'

arr.join(':'); // '1:2:3'

flat

flat 메서드는 인수로 전달한 깊이만큼 재귀적으로 배열을 평탄화 한다.

[1, [2,3,4,5]].flat(); // [1,2,3,4,5]

[1, [2, [3, [4]]]].flat(); // [1, 2, [3,[4]]]
[1, [2, [3, [4]]]].flat(1); // [1, 2, [3,[4]]]

// 기본값은 1이다 

[1, [2, [3, [4]]]].flat(2); // [1, 2, 3,[4]]

배열 고차 함수

고차 함수는 함수를 인수로 전달 받거나 함수를 반환하는 함수를 말한다
js의 함수는 일급 객체이므로 함수를 값처럼 인수로 전달할 수 있으며 반환할 수도 있다. 고차 함수는 외부 상태의 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반을 두고있다.

함수형 프로그래밍은 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다.

순수 함수를 통해 부수효과를 최대한 억제하여 오류를 피하고 프로그램의 안정성을 높이려는 노력의 일환이라고 할 수 있다.

const fruits = ['Banana', 'Orange', 'Apple'];

// 오름차순 정렬
fruits.sort();

// sort 메서드는 원본 배열을 직접 변경한다.
console.log(fruits) // ['Apple', 'Banana', 'Orange'];
const points = [40, 100, 1, 5, 2, 25, 10];

// 숫자 배열의 오름차순 정렬. 비교 함수의 반환값이 0보다 작으면 a를 우선하여 정렬한다.
points.sort((a, b) => a - b);
console.log(points); // [1, 2, 5, 10, 25, 40 ,100]

console.log(points); // [100, 40, 25, 10, 5, 2, 1]

다음 내용은 파트4 마지막에서 다룰 예정이다! 오늘도 수고했다~!

profile
한 줄 소개

0개의 댓글