[JavaScript] 자바스크립트 Array 객체

자바스크립트 Array 객체

---

자바스크립트에서 Array 객체는 순서가 있는 데이터 구조로, 동일한 데이터 타입의 요소를 여러 개 저장할 수 있다. 배열의 요소는 인덱스를 사용하여 접근할 수 있다. 오늘은 Array 객체의 다양한 메서드들에 대해 알아보는 시간을 가져보자.

 

 

toString() 메서드

---

자바스크립트에서 toString() 메서드는 객체를 문자열로 변환하는 데 사용된다. 모든 객체는 toString() 메서드를 가지고 있으며, 기본적으로는 객체의 값을 나타내는 문자열을 반환한다.

 

예제 코드 1

const number = 10;
const string = number.toString();

console.log(string); // "10"

toString() 메서드는 인수를 받지 않는다. 하지만 toString() 메서드를 재정의할 수도 있다. 재정의된 toString() 메서드는 객체를 원하는 방식으로 문자열로 변환할 수 있다.

 

예제 코드 2

class Dog {
  constructor(name) {
    this.name = name;
  }

  toString() {
    return `${this.name} is a dog.`;
  }
}

const dog = new Dog("Lucky");
const string = dog.toString();

console.log(string); // "Lucky is a dog."

toString() 메서드의 return 값을 재정의하여 사용한 예제이다. toString() 메서드는 자바스크립트에서 매우 유용한 메서드이다. 객체를 문자열로 변환해야 하는 경우 toString() 메서드를 사용하자.

 

toString() 메서드의 사용 예

• 숫자, 문자열, 배열, 객체 등 다양한 값을 문자열로 변환하는 데 사용된다.
• 로그를 출력하거나, 값을 비교하거나, 값을 JSON으로 변환하는 등 다양한 용도로 사용될 수 있다.

toString() 메서드의 재정의

• 기본 toString() 메서드를 재정의하여 객체를 원하는 방식으로 문자열로 변환할 수 있다.
• 재정의된 toString() 메서드는 객체의 값을 나타내는 것뿐만 아니라, 객체에 대한 추가 정보를 포함하는 문자열을 반환하는 데 사용할 수 있다.

 

 

push() 메서드

---

자바스크립트에서 push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하는 데 사용된다. push() 메서드는 배열의 길이를 증가시키고, 추가한 요소의 수만큼 배열의 길이를 반환한다.

 

예제 코드 1

array.push(value1, value2, ...);

• array는 push() 메서드를 호출하는 배열이다.
• value1, value2,... 는 추가할 요소이다.

push() 메서드의 인수는 임의의 개수의 값을 사용할 수 있다. 인수는 숫자, 문자열, 배열, 객체 등 다양한 값을 사용할 수 있다.

 

예제 코드 2

const numbers = [1, 2, 3];

numbers.push(4, 5);

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

numbers 배열에 4와 5를 추가해서 numbers 배열의 길이는 5로 증가한다.

 

push() 메서드는 배열을 스택(stack)으로 사용할 때 유용하다. 스택은 마지막에 추가된 요소를 먼저 제거하는 데이터 구조이다. push() 메서드를 사용하여 스택에 요소를 추가하고, pop() 메서드를 사용하여 스택에서 요소를 제거할 수 있다.  push() 메서드는 배열을 큐(queue)로 사용할 때 유용하다. 큐는 먼저 추가된 요소를 먼저 제거하는 데이터 구조이다. push() 메서드를 사용하여 큐에 요소를 추가하고, shift() 메서드를 사용하여 큐에서 요소를 제거할 수도 있다.

 

 

pop() 메서드

---

자바스크립트에서 pop() 메서드는 배열의 마지막 요소를 제거하는 데 사용된다. pop() 메서드는 제거된 요소를 반환하고, 배열의 길이를 하나 감소시킨다.

 

예제 코드 1

array.pop();

• array는 pop() 메서드를 호출하는 배열이다.

 

예제 코드 2

const numbers = [1, 2, 3];

const lastNumber = numbers.pop();

console.log(numbers); // [1, 2]
console.log(lastNumber); // 3

numbers 배열의 마지막 요소인 3을 제거하여 numbers 배열의 길이는 2로 감소한다. pop() 메서드는 배열을 스택(stack)으로 사용할 때 유용하다. 스택은 마지막에 추가된 요소를 먼저 제거하는 데이터 구조이다.

 

 

요소 값 변경과 length 속성

---

• 인덱스를 사용하여 요소 값을 변경

const numbers = [1, 2, 3];

numbers[0] = 10;

console.log(numbers); // [10, 2, 3]

numbers 배열의 첫 번째 요소인 1을 10으로 변경한다.

 

• 비구조화 할당을 사용하여 요소 값을 변경

const numbers = [1, 2, 3];

numbers[0] = { value: 10 };

console.log(numbers); // [{ value: 10 }, 2, 3]

numbers 배열의 첫 번째 요소를 객체로 변경한다.

 

• 메서드를 사용하여 요소 값을 변경

const numbers = [1, 2, 3];

numbers.forEach((number) => {
  number = number * 2;
});

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

numbers 배열의 모든 요소의 값을 2배로 변경한다.

 

 

다음은 자바스크립트에서 length에 대한 예제이다. length 속성은 배열의 요소 수를 나타내고 읽기 전용 속성이다.

 

예제 코드 1

const numbers = [1, 2, 3];

console.log(numbers.length); // 3

numbers 배열의 길이를 출력한다.

 

요소 값을 변경하면 length 속성의 값도 변경된다.

 

예제 코드 2

const numbers = [1, 2, 3];

numbers.push(4);

console.log(numbers.length); // 4

numbers 배열에 4를 추가했더니 length 속성의 값이 4로 출력되는 걸 확인할 수 있다.

 

예제 코드 3

const numbers = [1, 2, 3];

numbers.pop();

console.log(numbers.length); // 3

그 후, 다시 pop()을 사용하여 마지막 요소를 제거하고 length 속성을 출력했을 경우 3이 출력되는 걸 확인할 수 있다.

 

 

splice() 메서드

---

자바스크립트의 splice() 메서드는 배열의 기존 요소를 삭제하거나 교체하거나 새 요소를 추가하여 배열의 내용을 변경하는 메서드이다. splice() 메서드는 배열의 원본을 수정하고, 제거된 요소를 새 배열로 반환한다.

 

예제 코드 1

array.splice(start, deleteCount, item1, item2, ...restItems);

• array는 splice() 메서드를 호출하는 배열이다.
• start는 배열의 변경을 시작할 인덱스를 지정한다. 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정된다. 음수인 경우 배열의 끝에서부터 요소를 새어나간다.(원점 -1, 즉 -n이면 요소 끝의 n번째 요소를 가리키며 array.length -n 번째 인덱스와 같다.)
• deleteCount는 배열에서 삭제할 요소의 개수를 지정한다. 숫자 값이 아니면 1로 간주된다.
• item1, item2,... restItems는 배열에 추가할 요소이다.

 

예제 코드 2

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

// 배열의 처음 두 요소를 삭제합니다.
const result = arr.splice(0, 2);
console.log(result); // [1, 2]
console.log(arr); // [3, 4, 5]

// 배열의 끝에 요소를 추가합니다.
arr.splice(arr.length, 0, 6);
console.log(arr); // [3, 4, 5, 6]

// 배열의 중간에 요소를 교체합니다.
arr.splice(2, 1, "hello");
console.log(arr); // [3, 4, "hello", 5]

splice() 메서드의 특징

• splice() 메서드는 배열의 원본을 수정한다.
• splice() 메서드는 제거된 요소를 새 배열로 반환한다.
• splice() 메서드는 음수 인덱스를 사용할 수 있다.
• splice() 메서드는 숫자 값이 아닌 인덱스를 사용할 수 있다.

splice() 메서드의 활용

위에서 splice() 메서드는 배열의 요소를 삭제하거나 교체하거나 추가할 때 유용하다고 하였다. 다음은 splice() 메서드를 활용한 몇 가지 예이다.

• 배열의 중복된 요소를 제거한다.
• 배열의 순서를 변경한다.
• 배열에 새로운 요소를 추가한다.
• 배열을 분할한다.

splice() 메서드의 단점

splice() 메서드는 배열의 원본을 수정하기 때문에, 원본 배열을 유지하고 싶다면 splice() 메서드의 반환값을 별도의 변수에 저장해야 한다.

 

 

splice() 메서드

---

자바스크립트 slice() 메서드는 배열의 일부를 얕게 복사한 새로운 배열을 반환한다. 원본 배열은 바뀌지 않는다. slice() 메서드는 두 개의 파라미터를 받는다.

• start : 시작 인덱스이다. 0부터 시작한다.
• end : 종료 인덱스이다. end를 포함하지 않는다(end - 1까지만 포함)

예제 코드 1

const arr = [1, 2, 3, 4, 5];
const newArr = arr.slice(0, 3); // [1, 2, 3]

 

예제 코드 2

const arr = [1, 2, 3, 4, 5];
const newArr = arr.slice(-2, -1); // [4]

음수 인덱스를 사용하여 배열의 끝에서부터 요소를 추출할 수도 있다. -1부터 배열의 가장 끝을 의미한다.

 

 

sort() 메서드

---

자바스크립트 sort() 메서드는 배열의 요소를 정렬한다. 원본 배열을 직접 변경하여 정렬된 배열을 반환한다. sort() 메서드는 기본적으로 문자열의 유니코드 코드 포인트를 기준으로 오름차순으로 정렬하고 숫자 배열을 정렬하면 숫자 비교 함수를 제공해야 한다.

 

예제 코드 1

array.sort([compareFunction]);

• array : 정렬할 배열이다.
• compareFunction : (a, b) => number의 형태로 정의된 비교 함수이다. a와 b는 정렬할 두 요소이다. 함수는 두 요소의 정렬 순서를 결정하는 정수를 반환해야 한다.

compareFunction 함수의 반환 값은 다음과 같은 의미를 갖는다.

• -1 : a가 b보다 작다.
• 0 : a와 b가 같다.
• 1 : a가 b보다 크다.

만약 compareFunction 함수를 생략하면 기본 정렬 순서가 적용된다.

 

예제 코드 2

const arr = ['a', 'c', 'b'];

arr.sort();

console.log(arr); // ['a', 'b', 'c']

 

예제 코드 3

const arr = [1, 3, 2];

arr.sort((a, b) => a - b);

console.log(arr); // [1, 2, 3]

• const arr = [1,3,2] : arr라는 새로운 상수 배열을 생성하고 1,3,2를 순서대로 할당한다.
• arr.sort((a, b) => a - b) : arr 배열에 sort() 메서드를 호출하고 sort() 메서드는 비교 함수를 인자로 받는다. 비교 함수는 배열의 두 요소를 비교하여 먼저 올 요소를 결정하는 데 사용된다.

위의 예제에서 비교 함수는 매우 간단하다. 두 요소를 빼고 결과를 반환한다. 결과가 음수이면 첫 번째 요소가 두 번째 요소바다 작다. 결과가 양수이면 첫 번째 요소가 두 번째 요소보다 크다. 결과가 0이면 두 요소가 같다. sort() 메서드는 배열의 모든 요소를 비교할 때까지 비교 함수를 반복적으로 호출한다. sort()  메서드는 그런 다음 오름차순 순으로 정렬된 배열을 반환한다.

 

 

읽어주셔서 감사합니다.