[JS] 4. 표준 내장 객체(2)

Shy·2023년 9월 14일

NodeJS(Express&Next.js)

목록 보기

30/39

배열

주요 메서드

length

length는 배열의 속성(Property)이다. 배열에 포함된 요소의 수를 반환하며, 배열의 크기를 동적으로 변경하는 데도 사용된다.

const fruits = ['apple', 'banana', 'cherry'];
console.log(fruits.length);  // 3 출력

// length 속성을 이용하여 배열 크기를 변경하기
fruits.length = 2;
console.log(fruits);  // ['apple', 'banana'] 출력

at()

at() 메서드는 주어진 인덱스에 해당하는 배열 요소를 반환한다. 음수 인덱스를 전달할 경우 배열의 끝에서부터 역순으로 요소에 접근한다. 이 메서드는 ES2021(또는 ES12)에서 추가되었다.

const fruits = ['apple', 'banana', 'cherry'];

console.log(fruits.at(0));  // 'apple' 출력
console.log(fruits.at(-1)); // 'cherry' 출력
console.log(fruits.at(10)); // undefined 출력 (인덱스가 배열 범위를 벗어났기 때문)

기존에 배열의 끝에서 요소에 접근하기 위해 fruits[fruits.length - 1]와 같은 방식을 사용했었는데, at() 메서드를 사용하면 이보다 더 간결하게 코드를 작성할 수 있게 되었다.

concat

concat 메서드는 배열의 메서드로써, 두 개 이상의 배열 또는 값을 연결하여 새로운 배열을 반환한다. 원본 배열은 변경되지 않는다.

arr.concat(value1, value2, ..., valueN)
// value1, value2, ... valueN: 배열과/또는 값을 나열하여 연결할 수 있다.

예제

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = arr1.concat(arr2);

console.log(arr3); // [1, 2, 3, 4, 5, 6]

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = arr1.concat(arr2, [7, 8], 9);

console.log(arr3); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

주의할 점

concat 메서드는 얕은 복사(shallow copy)로 연결한다. 따라서, 배열의 요소로 객체가 포함되어 있을 경우, 그 객체의 참조가 반환된 배열로 복사된다.
원본 배열은 변경되지 않습니다. 변경된 내용이 반영된 새로운 배열을 반환한다.

ES6의 스프레드 연산자를 사용하면 concat과 유사한 작업을 수행할 수 있다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2, 7, 8, 9];

console.log(arr3); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

every

every 메서드는 배열의 모든 요소가 주어진 함수에 대해 테스트를 통과하는지 여부를 확인하여 true 또는 false 값을 반환하는 배열의 메서드이다.

arr.every(callback(element[, index[, array]])[, thisArg])

callback: 배열의 각 요소에 대해 실행할 함수. 이 함수가 참 값을 반환하지 않으면 every 메서드는 즉시 false를 반환한다.
- element: 처리할 현재 요소.
- index (선택적): 처리할 현재 요소의 인덱스.
- array (선택적): every 메서드가 호출된 배열.
thisArg (선택적): callback 함수에서 사용될 this의 값.

반환 값

만약 배열의 모든 요소가 callback 함수의 테스트를 통과하면 true를 반환하고, 그렇지 않으면 false를 반환한다.

예제

const numbers = [2, 4, 6, 8, 10];

const isEven = (number) => number % 2 === 0;

console.log(numbers.every(isEven)); // true

위의 예제에서는 배열 numbers의 모든 요소가 짝수인지 검사하고 있다. 모든 요소가 짝수이므로 true가 출력된다.

만약 배열에 홀수가 포함되어 있으면 false가 반환될 것이다.

const numbers = [2, 3, 6, 8, 10];
console.log(numbers.every(isEven)); // false

주의할 점

every 메서드는 빈 배열에 대해 항상 true를 반환한다.
배열의 요소가 하나라도 테스트를 통과하지 않으면 즉시 false를 반환한다. 따라서 테스트를 통과하지 않는 첫 번째 요소를 찾으면 해당 메서드는 즉시 종료된다.

filter

.filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열을 생성하는 배열 메서드이다.

arr.filter(callback(element[, index[, array]])[, thisArg])

callback: 배열의 각 요소에 대해 실행할 함수. 참 값을 반환하면 해당 요소가 결과 배열에 포함된다.
- element: 처리할 현재 요소.
- index (선택적): 처리할 현재 요소의 인덱스.
- array (선택적): filter 메서드가 호출된 배열.
thisArg (선택적): callback 함수에서 사용될 this의 값.

반환 값

callback 함수를 만족하는 (즉, 참 값인) 요소들로 이루어진 새로운 배열을 반환한다. 어떤 요소도 테스트를 통과하지 못할 경우 빈 배열을 반환한다.

예제

const numbers = [1, 2, 3, 4, 5, 6];

const evens = numbers.filter(number => number % 2 === 0);

console.log(evens); // [2, 4, 6]

위의 예제에서 filter 메서드는 짝수인 모든 요소를 찾아 새로운 배열을 만들었다.

주의할 점

원래의 배열은 변경되지 않습니다.
filter 메서드는 원본 배열의 요소를 조건에 따라 필터링하여 새로운 배열을 반환한다. 따라서 filter를 호출한 원본 배열에는 아무런 영향을 미치지 않는다.

.find()

.find()메서드는 주어진 테스트 함수를 만족하는 배열의 첫 번째 요소의 값을 반환한다. 만족하는 요소가 없으면 undefined를 반환한다.

arr.find(callback(element[, index[, array]])[, thisArg])

callback: 배열의 각 요소에 대해 실행할 테스트 함수. 이 함수가 참 값을 반환하면 .find() 메서드는 즉시 그 요소의 값을 반환한다.
- element: 처리할 현재 요소.
- index (선택적): 처리할 현재 요소의 인덱스.
- array (선택적): find 메서드가 호출된 배열.
thisArg (선택적): callback 함수에서 사용될 this의 값.

반환 값

callback 함수의 테스트를 통과하는 첫 번째 요소의 값. 만약 어떤 요소도 테스트를 통과하지 못할 경우 undefined를 반환한다.

예제

const numbers = [1, 2, 3, 4, 5, 6];

const firstEven = numbers.find(number => number % 2 === 0);

console.log(firstEven); // 2

위의 예제에서 .find() 메서드는 짝수인 첫 번째 요소를 찾았고, 그 값인 2를 반환했다.

주의할 점

원래의 배열은 변경되지 않는다.
.find() 메서드는 배열의 각 요소에 대해 조건을 테스트하고, 첫 번째로 조건을 만족하는 요소를 반환한다. 만약 조건을 만족하는 요소가 없으면 undefined를 반환한다.

findIndex

.findIndex() 메서드는 배열에서 주어진 테스트 함수를 만족하는 첫 번째 요소의 인덱스를 반환한다. 만족하는 요소가 없으면 -1을 반환한다.

arr.findIndex(callback(element[, index[, array]])[, thisArg])

callback: 배열의 각 요소에 대해 실행할 테스트 함수. 이 함수가 참 값을 반환하면 .findIndex() 메서드는 해당 요소의 인덱스를 반환한다.
- element: 처리할 현재 요소.
- index (선택적): 처리할 현재 요소의 인덱스.
- array (선택적): findIndex 메서드가 호출된 배열.
thisArg (선택적): callback 함수에서 사용될 this의 값.

반환 값

callback 함수의 테스트를 통과하는 첫 번째 요소의 인덱스. 만약 어떤 요소도 테스트를 통과하지 못할 경우 -1을 반환한다.

예제

const numbers = [1, 2, 3, 4, 5, 6];

const firstEvenIndex = numbers.findIndex(number => number % 2 === 0);

console.log(firstEvenIndex); // 1

위의 예제에서 .findIndex() 메서드는 짝수인 첫 번째 요소의 인덱스를 찾아, 그 값인 1을 반환했다.

주의할 점

원래의 배열은 변경되지 않습니다.
.findIndex() 메서드는 배열의 각 요소에 대해 조건을 테스트하고, 첫 번째로 조건을 만족하는 요소의 인덱스를 반환한다. 만약 조건을 만족하는 요소가 없으면 -1을 반환한다.

flat()

flat() 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어 붙여 새로운 배열을 생성한다. 주로 중첩된 배열을 펼치기 위해 사용된다.

var newArray = arr.flat([depth]);

depth (선택적): 배열의 내부 요소를 얼마나 깊게 평평하게 만들 것인지를 지정하는 정수이다. 기본값은 1이다.

예제

기본

const nestedArray = [1, 2, [3, 4, [5, 6]]];
const flattenedArray = nestedArray.flat();
console.log(flattenedArray); // [1, 2, 3, 4, [5, 6]]

깊이 지정

const deeplyNestedArray = [1, 2, [3, 4, [5, 6]]];
const flattenedArray = deeplyNestedArray.flat(2);
console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]

더 깊게 중첩된 배열

const veryDeeplyNestedArray = [1, [2, [3, [4, [5]]]]];
console.log(veryDeeplyNestedArray.flat(3)); // [1, 2, 3, 4, [5]]

주의할 점

원래의 배열은 변경되지 않습니다. 새로운 배열이 반환된다.
flat() 메서드는 깊이를 기준으로 배열을 평평하게 만든다. 주어진 깊이보다 더 깊게 중첩된 배열은 그대로 유지된다.

만약 배열을 완전히 평평하게 만들려면 깊이를 예측할 수 없기 때문에 .flat(Infinity)와 같은 방식으로 무한대의 깊이 값을 지정할 수 있다.

forEach

forEach() 메서드는 배열의 각 요소에 대해 주어진 함수를 실행한다. 이 메서드는 배열 자체를 변경하지 않는다. 주로 배열의 각 요소에 대해 작업을 수행할 때 사용된다.

arr.forEach(callback(currentValue[, index[, array]])[, thisArg]);

callback: 배열의 각 요소에 대해 실행할 함수. 다음 세 가지 인수를 취한다.
- currentValue: 처리 중인 현재 요소.
- index (선택적): 처리 중인 현재 요소의 인덱스.
- array (선택적): forEach가 호출된 배열.
thisArg (선택적): callback 함수 내에서 this로 사용될 값.

예제

const fruits = ["apple", "banana", "cherry"];

fruits.forEach(function(fruit, index) {
  console.log(`index ${index}: ${fruit}`);
});

// 출력:
// index 0: apple
// index 1: banana
// index 2: cherry

혹은 화살표 함수를 사용해서 더 간결하게 표현할 수 있다.

fruits.forEach((fruit, index) => {
  console.log(`index ${index}: ${fruit}`);
});

주의할 점:

forEach()는 중간에 break 문을 사용해서 루프를 종료할 수 없다. 루프 중간에 종료하려면 일반적인 for 루프나 for...of 루프를 사용해야 한다.
forEach()는 배열을 수정하지 않지만, callback 함수 내에서 배열의 요소를 변경할 수는 있다.

forEach()는 배열의 각 요소에 대해 작업을 수행할 때 주로 사용되며, 새로운 배열을 생성하거나 기존 배열을 변형하지 않는 경우에 유용하다.

includes()

includes() 메서드는 배열이 특정 요소를 포함하고 있는지 확인하여, 포함되어 있으면 true를, 그렇지 않으면 false를 반환한다.

arr.includes(valueToFind[, fromIndex])

valueToFind: 배열에서 찾을 요소.
fromIndex (선택적): 검색을 시작할 인덱스. 기본값은 0이다. 이 값이 배열의 길이보다 크거나 같은 경우 false가 반환된다. 값이 음수인 경우, 배열의 끝에서부터의 길이로 계산되어 검색을 시작한다.

예제

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

console.log(arr.includes(2));       // true
console.log(arr.includes(7));       // false
console.log(arr.includes(2, 2));    // false (2번째 인덱스부터 검색을 시작하므로 2를 찾을 수 없음)
console.log(arr.includes(2, -4));   // true (배열 끝에서부터 4번째 위치에서 검색을 시작하므로 2를 찾을 수 있음)

주의할 점

includes() 메서드는 배열 요소의 값이 NaN(Not a Number)인지 확인할 수 있다. (즉, arr.includes(NaN)는 배열에 NaN이 포함되어 있으면 true를 반환한다.)
includes() 메서드는 문자열에도 사용할 수 있으며, 문자열에서 특정 문자나 문자열의 포함 여부를 확인한다.
이 메서드는 값의 존재만을 확인하며, 위치나 중복된 요소의 개수 등에 대한 정보는 제공하지 않는다.

참고
includes()와 비슷한 기능을 제공하는 메서드로 indexOf()가 있지만, includes()는 명시적으로 포함 여부만을 확인하고, NaN 값을 올바르게 처리하기 때문에 사용하기 더 직관적이다.

join

join() 메서드는 배열의 모든 요소를 연결하여 하나의 문자열을 생성한다. 각 요소 사이에는 지정된 구분자를 넣을 수 있다. 지정하지 않으면 기본 구분자인 쉼표(,)가 사용된다.

arr.join([separator])

separator (선택적): 요소 간에 삽입될 문자열로, 기본값은 쉼표(,)이다.

예제

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());        // 'Fire,Air,Water'
console.log(elements.join(''));      // 'FireAirWater'
console.log(elements.join('-'));     // 'Fire-Air-Water'
console.log(elements.join(' + '));   // 'Fire + Air + Water'

주의할 점

join() 메서드는 원래 배열을 변경하지 않습니다. 대신 연결된 문자열을 반환한다.
배열에 undefined나 null 값이 있으면 빈 문자열로 처리된다.

사용 사례

join() 메서드는 배열의 요소를 하나의 문자열로 결합할 때 유용하다. 예를 들어, 배열의 요소를 하나의 문자열로 결합하여 파일에 저장하거나 화면에 표시하는 경우, 요소 간에 특정 문자나 문자열을 넣어야 하는 경우에 사용할 수 있다.

map

map() 메서드는 배열의 모든 요소에 대해 제공된 함수를 호출하고, 그 결과로 구성된 새로운 배열을 반환한다.

arr.map(callback(currentValue[, index[, array]])[, thisArg])

callback: 배열의 각 요소에 대해 실행할 함수이다. 다음 세 가지 인수를 받는다.
- currentValue: 처리할 현재 요소이다.
- index (선택적): 처리할 현재 요소의 인덱스다.
- array (선택적): map이 호출된 배열이다.
thisArg (선택적): callback을 실행할 때 this로 사용되는 값이다.

예제

const numbers = [1, 2, 3, 4];
const squared = numbers.map(num => num * num);
console.log(squared);  // [1, 4, 9, 16]

이 예제에서는 배열의 각 숫자를 제곱하는 함수를 map()에 제공하여 결과 배열 squared를 생성한다.

주의할 점

map() 메서드는 호출한 배열의 값을 변경하지 않는다. 대신 새 배열을 반환한다.
원래 배열의 길이와 map()에 의해 반환된 배열의 길이는 항상 같다. 하지만 반환된 배열의 요소 값은 callback 함수의 결과에 따라 다를 수 있다.
배열의 빈 항목에는 callback 함수가 호출되지 않는다.

사용 사례

배열의 각 요소에 연산을 적용할 때.
배열의 요소를 다른 형태나 구조로 변환할 때.
객체로 구성된 배열에서 특정 속성만 추출하여 새로운 배열을 생성할 때.

map() 메서드는 변환, 재구조화, 데이터 추출 등의 작업을 배열의 모든 요소에 적용하려는 경우에 매우 유용하다.

pop

pop() 메서드는 배열에서 마지막 요소를 제거하고 그 요소를 반환한다. 이 메서드는 배열의 길이를 변경한다.

arr.pop()

반환값

배열에서 제거된 마지막 요소이다. 배열이 비어 있으면 undefined를 반환한다.

let fruits = ["apple", "banana", "cherry"];
let lastFruit = fruits.pop();

console.log(lastFruit);  // "cherry"
console.log(fruits);     // ["apple", "banana"]

주의할 점

pop() 메서드는 원래 배열을 수정하고, 배열의 길이를 1만큼 줄인다.
배열이 비어 있을 때 pop() 메서드를 호출하면, 배열은 변경되지 않고 undefined가 반환된다.

pop() 메서드는 주로 스택 데이터 구조에서 사용되는 연산과 유사한 기능을 수행한다. 스택의 최상단 요소를 제거하고 그 값을 반환하는 것과 같은 동작을 한다.

push

push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 변경된 배열의 새로운 길이를 반환한다.

arr.push([element1[, ...[, elementN]]])

element1, ..., elementN: 배열의 끝에 추가할 요소들이다.

반환값

push() 메서드가 호출된 후의 배열의 새 길이다.

예제

let fruits = ["apple", "banana"];
let newLength = fruits.push("cherry", "date");

console.log(fruits);     // ["apple", "banana", "cherry", "date"]
console.log(newLength);  // 4

주의할 점

push() 메서드는 원래 배열을 수정한다.
추가할 요소를 직접 제공하지 않으면 배열은 변경되지 않고 현재 배열의 길이만 반환된다.

push() 메서드는 주로 동적으로 배열에 요소를 추가할 때 사용되며, 스택 데이터 구조의 푸시 연산과 유사한 기능을 수행한다.

reduce

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다. reduce()는 배열 내의 연속된 값들을 결합하거나 누적하는 데 유용하게 사용될 수 있다.

array.reduce(callback( accumulator, currentValue[, index[, array]] )[, initialValue])

callback: 배열의 각 요소에 대해 실행할 함수이다.
- accumulator: 누산기. 이전 호출의 반환값 또는 initialValue다.
- currentValue: 현재 처리 중인 배열의 요소다.
- index (optional): 현재 처리 중인 배열 요소의 인덱스이다.
- array (optional): reduce()가 호출된 배열이다.
initialValue (optional): accumulator의 초기값이다.

예제

숫자의 배열을 합산하기

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 10

객체의 배열에서 속성 값 합산하기

const items = [
  { name: 'apple', price: 0.5 },
  { name: 'banana', price: 0.8 },
  { name: 'cherry', price: 0.9 }
];
const totalPrice = items.reduce((acc, item) => acc + item.price, 0);
console.log(totalPrice); // 2.2

주의할 점

initialValue를 제공하지 않으면 배열의 첫 번째 요소를 accumulator의 초기값으로 사용하고, 순회는 두 번째 요소부터 시작한다.
만약 배열이 비어 있거나 initialValue를 제공하지 않았을 때 배열의 요소가 하나밖에 없다면, 그 하나의 요소가 반환된다.
배열이 비어 있고 initialValue도 제공되지 않았을 경우, TypeError가 발생한다.

reduce() 메서드는 매우 유연하며 다양한 연산을 수행하기 위해 사용될 수 있다.

reverse

reverse() 메서드는 배열의 요소 순서를 반대로 변경한다. 첫 번째 요소는 마지막 요소가 되고 마지막 요소는 첫 번째 요소가 된다. 그리고 reverse() 메서드는 원본 배열을 변경하며, 변경된 배열을 반환한다.

array.reverse()

예제

기본적인 배열의 요소 순서 반대로 변경하기

const arr = [1, 2, 3, 4, 5];
const reversed = arr.reverse();
console.log(reversed); // [5, 4, 3, 2, 1]
console.log(arr);      // [5, 4, 3, 2, 1] (원본 배열도 변경됨)

문자열 배열의 요소 순서 반대로 변경하기

const fruits = ['apple', 'banana', 'cherry'];
fruits.reverse();
console.log(fruits); // ['cherry', 'banana', 'apple']

주의할 점

reverse() 메서드는 원본 배열을 변경한다. 원본 배열을 변경하지 않고 순서를 반대로 한 새 배열을 얻고자 할 경우, slice() 메서드와 함께 사용하여 복사본을 만든 후에 reverse()를 호출해야 한다.

const arr = [1, 2, 3, 4, 5];
const reversedCopy = arr.slice().reverse();
console.log(reversedCopy); // [5, 4, 3, 2, 1]
console.log(arr);          // [1, 2, 3, 4, 5] (원본 배열은 변경되지 않음)

이렇게, reverse() 메서드는 배열의 요소를 쉽게 반대 순서로 바꾸는 데 사용된다.

shift

shift() 메서드는 배열에서 첫 번째 요소를 제거하고, 그 요소를 반환한다.
이 연산은 배열의 길이를 변경한다.

arr.shift()

예제

let fruits = ['apple', 'banana', 'cherry'];
let firstFruit = fruits.shift();

console.log(firstFruit);  // 'apple'
console.log(fruits);      // ['banana', 'cherry']

slice()

slice() 메서드는 배열의 start 인덱스부터 end 인덱스 전까지의 모든 요소를 새 배열 객체로 반환한다.
원본 배열은 수정되지 않는다.

arr.slice([start[, end]])

start: 추출 시작점에 대한 인덱스.
end (선택적): 추출을 종료할 인덱스. end는 포함되지 않는다.

예제

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

let subset1 = numbers.slice(2);
console.log(subset1);  // [3, 4, 5]

let subset2 = numbers.slice(1, 4);
console.log(subset2);  // [2, 3, 4]

console.log(numbers);  // [1, 2, 3, 4, 5]  (원본 배열은 변경되지 않음)

some

some() 메서드는 배열에 대해 주어진 함수를 사용해 적어도 하나의 요소가 테스트를 통과하는지를 확인한다. some() 메서드는 불리언 (true 또는 false) 값을 반환한다.

배열 내의 일부 요소가 주어진 함수에 의해 충족되는지 확인하기 위해 사용된다.
콜백 함수가 배열의 어느 요소라도 참 값을 반환하면 some() 메서드도 참 값을 반환하며, 검사를 즉시 중지한다.

arr.some(callback(element[, index[, array]])[, thisArg])

callback: 각 요소를 테스트하는 함수.
- element: 처리하는 현재 요소.
- index (optional): 처리하는 현재 요소의 인덱스.
- array (optional): some()을 호출한 배열.
thisArg (optional): callback 함수 내부에서 사용할 this의 값.

예제

const numbers = [1, 3, 5, 7, 9];

// 배열 내에 4보다 큰 숫자가 존재하는지 검사
const hasBigNumber = numbers.some(num => num > 4);
console.log(hasBigNumber);  // true

const fruits = ['apple', 'banana', 'cherry'];

// 배열 내에 'pear'라는 문자열이 포함되어 있는지 검사
const hasPear = fruits.some(fruit => fruit === 'pear');
console.log(hasPear);  // false

some() 메서드는 배열의 요소 중 하나라도 주어진 테스트 함수를 만족하면 true를 반환하고, 그렇지 않으면 false를 반환한다.

sort

sort() 메서드는 배열의 요소들을 적절한 위치에 정렬한 후 그 배열을 반환한다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 기반으로 한다.

배열의 요소를 문자열로 변환하고 이 문자열들의 유니코드 코드 포인트에 따라 정렬된다.
숫자들의 배열을 기대했던 정렬로 하려면, 비교 함수를 제공해야 한다.

arr.sort([compareFunction])

compareFunction (optional): 두 요소를 비교하는 함수.
- 첫 번째 요소 < 두 번째 요소일 경우 -값 반환
- 첫 번째 요소 = 두 번째 요소일 경우 0 반환
- 첫 번째 요소 > 두 번째 요소일 경우 +값 반환

문자열 정렬

const fruits = ['apple', 'banana', 'cherry', 'apple'];
fruits.sort();
console.log(fruits); // ['apple', 'apple', 'banana', 'cherry']

숫자 정렬

const numbers = [10, 5, 8, 1, 6];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 5, 6, 8, 10]

numbers.sort((a, b) => b - a);
console.log(numbers); // [10, 8, 6, 5, 1]

주의

sort()는 원본 배열을 수정한다. 정렬되지 않은 원본 배열을 유지하려면 배열을 복사한 후 정렬해야 한다.
sort() 메서드가 반환하는 값은 정렬된 배열이다. 하지만 이것은 원본 배열이 정렬되었음을 나타내기 때문에 원본 배열도 변경된다.

요약

sort() 메서드는 배열의 요소를 정렬하고 원본 배열을 변경한다. 기본적으로 문자열의 유니코드 코드 포인트를 기반으로 정렬되므로, 다른 유형의 데이터(예: 숫자)를 정렬하려면 비교 함수를 제공해야 한다.

splice

splice()는 자바스크립트 배열에서 아주 유용한 메서드이다. 이 메서드를 사용하면 배열의 특정 위치에서 요소를 추가, 삭제, 또는 교체할 수 있다.

array.splice(index, deleteCount, item1, ..., itemX)

index: 배열에서 변경을 시작할 위치다. 음수 값을 전달하면 배열 끝에서부터 위치를 카운트한다.
deleteCount: index에서 시작하여 제거할 요소의 수이다. 이 값이 0인 경우 요소는 삭제되지 않는다.
item1, ..., itemX: 배열에 추가될 요소들이다. deleteCount가 0이고 이 값들이 지정된 경우, 지정된 위치에 요소가 추가된다.

splice() 메서드는 제거된 요소들의 배열을 반환한다. 만약 요소를 제거하지 않은 경우, 빈 배열을 반환한다.

let fruits = ["apple", "banana", "cherry", "date"];

// banana와 cherry를 제거하고 "blackberry", "blueberry"를 추가
let removed = fruits.splice(1, 2, "blackberry", "blueberry");
console.log(fruits);  // ["apple", "blackberry", "blueberry", "date"]
console.log(removed);  // ["banana", "cherry"]

// blueberry 앞에 "berry" 추가
fruits.splice(2, 0, "berry");
console.log(fruits);  // ["apple", "blackberry", "berry", "blueberry", "date"]

splice() 메서드는 배열을 직접 수정한다. 따라서 원본 배열이 변경되므로 주의가 필요하다.

unshift

unshift()는 자바스크립트 배열의 메서드 중 하나로, 배열의 시작 부분에 하나 이상의 요소를 추가하고 새로운 배열의 길이를 반환한다.

unshift() 메서드의 문법은 다음과 같다.

array.unshift(item1, item2, ..., itemX)

item1, item2, ..., itemX: 배열의 시작 부분에 추가될 요소들이다.

let fruits = ["apple", "banana", "cherry"];
let newLength = fruits.unshift("avocado", "almond");

console.log(fruits);  // ["avocado", "almond", "apple", "banana", "cherry"]
console.log(newLength);  // 5

이 메서드를 사용하면 원본 배열이 수정된다. 따라서 원본 배열에 영향을 주지 않고 요소를 추가하려면 다른 방법을 사용해야 한다.

Array.from

Array.from() 메서드는 배열과 유사한 객체 또는 반복 가능한 객체(예: 문자열, Set, Map 등)를 얕은 복사하여 새로운 배열 인스턴스를 생성한다.

Array.from()의 주요 용도는 배열과 유사한 형태의 객체를 실제 배열로 변환하는 것이다.

Array.from(object, mapFunction, thisValue)

object: 배열로 변환될 객체 또는 반복 가능한 구조.
mapFunction (선택사항): 배열의 모든 요소에 대해 호출되는 함수.
thisValue (선택사항): mapFunction에서 사용될 this의 값.

예제

문자열을 배열로 변환

let str = 'hello';
let arr = Array.from(str);
console.log(arr); // ['h', 'e', 'l', 'l', 'o']

Set을 배열로 변환

let mySet = new Set(['apple', 'banana', 'cherry']);
let arr = Array.from(mySet);
console.log(arr); // ['apple', 'banana', 'cherry']

mapFunction을 사용하여 배열 요소 수정

let numbers = [1, 2, 3, 4];
let doubled = Array.from(numbers, x => x * 2);
console.log(doubled); // [2, 4, 6, 8]

Array.from()은 특히 DOM API와 함께 사용할 때 유용하다. 예를 들어, 문서에서 특정 클래스를 가진 모든 요소를 선택하려면 document.querySelectorAll() 메서드를 사용할 수 있다. 이 메서드는 NodeList(배열과 유사한 객체)를 반환하는데, 이를 실제 배열로 변환하려면 Array.from()을 사용할 수 있다.

Array.isArray

Array.isArray() 메서드는 주어진 값이 배열인지 판별한다. 배열이면 true를 반환하고, 그렇지 않으면 false를 반환한다.

이 메서드는 배열을 확인하는 가장 확실한 방법 중 하나이다. 이전에는 객체의 instanceof 연산자나 Object.prototype.toString 메서드를 사용하여 배열을 판별하곤 했지만, Array.isArray()는 더 간결하고 명확하게 배열을 확인할 수 있다.

Array.isArray(obj)

obj: 배열인지 확인할 객체.

예제

console.log(Array.isArray([1, 2, 3]));  // true
console.log(Array.isArray({foo: 123}));  // false
console.log(Array.isArray('hello'));  // false
console.log(Array.isArray(undefined));  // false

특히 다양한 프레임워크나 다른 창의 컨텍스트에서 가져온 객체를 검사할 때, instanceof 방법은 항상 신뢰할 수 없기 때문에 Array.isArray() 메서드가 더욱 유용하다.

객체

주요 메서드

Object.assign

Object.assign() 메서드는 하나 이상의 원본 객체들로부터 모든 열거 가능한 속성을 타겟 객체로 복사하는 데 사용된다. 타겟 객체를 반환한다.

기본적으로 Object.assign()은 얕은 복사를 수행한다. 속성 값이 객체인 경우, 참조를 복사하므로 원본 객체나 대상 객체 중 하나에서 내부 객체를 수정하면 다른 객체도 영향을 받게 된다.

Object.assign(target, ...sources)

target: 속성과 값들을 받을 대상 객체.
...sources: 하나 이상의 원본 객체. 이 객체들의 속성들이 대상 객체로 복사된다.

예제

기본적인 사용

const target = { a: 1, b: 2 };
const source1 = { b: 4, c: 5 };
const source2 = { c: 6 };

const returnedTarget = Object.assign(target, source1, source2);

console.log(target);        // { a: 1, b: 4, c: 6 }
console.log(returnedTarget === target);  // true

얕은 복사에 대한 예

const obj1 = { a: 0, b: { c: 0 }};
const obj2 = Object.assign({}, obj1);
obj2.b.c = 3;

console.log(obj1); // { a: 0, b: { c: 3 }}

위의 예에서 obj2.b.c의 값을 변경하면 obj1.b.c의 값도 변경되는 것을 볼 수 있다. 이는 얕은 복사 때문이다.

Object.assign()은 주로 객체를 병합하거나 기존 객체에 새로운 속성을 추가할 때 사용된다. 하지만 깊은 복사나 복잡한 객체 조작을 위해서는 다른 방법이나 라이브러리를 사용하는 것이 좋다.

Object.entries

Object.entries() 메서드는 주어진 객체의 [key, value] 쌍의 배열을 반환한다. 이를 통해 객체의 키와 값을 쉽게 반복할 수 있게 된다.

Object.entries()의 기본 문법은 다음과 같다.

Object.entries(obj)

obj: 키와 값을 배열로 변환할 객체.

const obj = {
  foo: 'bar',
  baz: 42
};

const result = Object.entries(obj);
console.log(result);
// [["foo", "bar"], ["baz", 42]]

Object.entries()의 반환 값은 주로 for...of 루프와 함께 사용되어 객체의 키와 값에 동시에 접근할 때 유용하다.

예제

const obj = {
  a: 5,
  b: 7,
  c: 9
};

for (let [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}

// 출력:
// a: 5
// b: 7
// c: 9

이 메서드를 사용하면 객체를 배열과 유사하게 쉽게 순회할 수 있다. 그러나 객체의 속성 순서는 자바스크립트에서 보장되지 않으므로 (ES2015+에서는 특정 조건 하에 순서가 보장되긴 한다) 특정 순서를 기대하는 용도로는 사용하지 않는 것이 좋다.

Object.keys

Object.keys() 메서드는 객체의 자신의 열거 가능한 속성의 이름들을 배열로 반환한다. 배열의 순서는 일반적인 루핑에 의해 제공되는 순서와 동일하다.

Object.keys(obj)

obj: 속성 이름을 나열할 객체.

const obj = {
  foo: 'bar',
  baz: 42,
  qux: 'hello'
};

const keys = Object.keys(obj);
console.log(keys);  // ["foo", "baz", "qux"]

Object.keys()는 객체의 키만 필요할 때 유용하며, 주로 객체의 속성 수를 세거나 객체의 속성을 순회할 때 사용된다.

예제

const person = {
  name: 'Alice',
  age: 30,
  city: 'Paris'
};

console.log(Object.keys(person).length);  // 3

for (let key of Object.keys(person)) {
  console.log(`Key: ${key}, Value: ${person[key]}`);
}

// 출력:
// Key: name, Value: Alice
// Key: age, Value: 30
// Key: city, Value: Paris

Object.keys()를 사용하면 객체의 속성 이름만을 쉽게 얻을 수 있으며, 필요에 따라 값에도 접근할 수 있다.

Object.values

Object.values() 메서드는 주어진 객체의 자신의 열거 가능한 속성의 값들을 배열로 반환한다. 이 반환된 배열의 순서는 객체의 속성의 순서와 일치하며, 이 순서는 일반적인 루핑을 통해 제공되는 것과 동일하다.

Object.values(obj)

obj: 속성 값들을 나열할 객체.

예제

const obj = {
  foo: 'bar',
  baz: 42,
  qux: 'hello'
};

const values = Object.values(obj);
console.log(values);  // ["bar", 42, "hello"]

Object.values()는 객체의 속성 값들만을 얻고자 할 때 유용하다.

const person = {
  name: 'Alice',
  age: 30,
  city: 'Paris'
};

for (let value of Object.values(person)) {
  console.log(value);
}

// 출력:
// Alice
// 30
// Paris

Object.keys()가 객체의 키들만 반환하는 것에 비해, Object.values()는 해당 키들의 값들만 반환한다. 이 메서드는 객체의 값에 대한 순회나 처리를 할 때 유용하게 사용된다.

JSON

JSON (JavaScript Object Notation)은 경량의 데이터 교환 형식이다. JSON은 사람이 읽고 작성하기 쉽고, 기계가 파싱하고 생성하기에도 적합하게 디자인되었다. 초기에는 JavaScript에서 객체를 문자열로 표현하기 위한 방식으로 사용되었지만, 현재는 많은 프로그래밍 언어에서 데이터 교환 형식으로 널리 사용된다.

JSON의 기본 특징

단순함: JSON은 간단한 문법을 가지고 있어서 사람이 읽고 쓰기 쉽다.
자료형: JSON은 문자열, 숫자, 배열, 불린값 및 객체를 지원한다.
언어 독립성: JSON은 JavaScript와 밀접하게 연관되어 있지만, 대부분의 현대 프로그래밍 언어에서 지원된다.

JavaScript에서는 JSON이라는 전역 객체를 통해 JSON 데이터를 처리할 수 있다. 이 객체는 두 가지 주요 메서드를 제공한다.

JSON.stringify(): JavaScript 객체나 값을 JSON 문자열로 변환한다.

const obj = {name: "John", age: 30, city: "New York"};
const myJSON = JSON.stringify(obj);
console.log(myJSON);  // '{"name":"John","age":30,"city":"New York"}'

JSON.parse(): JSON 문자열을 JavaScript 객체로 변환한다.

const jsonStr = '{"name":"John","age":30,"city":"New York"}';
const obj = JSON.parse(jsonStr);
console.log(obj.name);  // 'John'

이 두 메서드는 웹 개발에서 매우 자주 사용됩니다. 특히 웹 API와 통신할 때, 대부분의 경우 데이터는 JSON 형식으로 교환된다.

JSON은 그 자체로는 데이터만을 표현하는 형식이므로, 실행 가능한 코드나 함수, 특정한 객체 생성자와 같은 복잡한 데이터 구조를 나타내기 위해서는 사용되지 않는다.

Shy

초보개발자. 백엔드 지망. 2024년 9월 취업 예정

이전 포스트

[JS] 4. 표준 내장 객체(1)

다음 포스트