자바스크립트 배열 메소드 JavaScript Array Methods

자바스크립트 배열에서 사용되는 메소드에 대해 알아보도록 하겠습니다.

 

1. 배열을 문자열로 변환

 

자바스크립트 배열을 문자열로 바꾸려면, toString 또는 join 메소드를 사용합니다. 아래의 예문과 같이 확인해보도록 하겠습니다. toString과 join은 거의 비슷하지만, join 메소드의 경우, 인자로 구분 기호를 지정할 수 있습니다.

const weather = ["봄", "여름", "가을", "겨울"];
weather.toString();
console.log(weather) // 봄, 여름, 가을, 겨울

const weather = ["봄", "여름", "가을", "겨울"];
weather.join("|");
console.log(weather) // 봄|여름|가을|겨울

배열의 요소를 쉼표로 구분한 경우, 해당 배열의 요소들은 문자열로 자동 변환됩니다.

 

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits; <- fruits.toString(); 와 같습니다.
console.log(fruits) // Banana,Orange,Apple,Mango

 

2. 배열 요소 추가 및 삭제

 

배열에서 가장 자주 사용되는 메소드는 push와 pop 메소드입니다. 해당 메소드는 꼭 기억해두시기 바랍니다!

Pop 메소드는 배열 요소를 삭제할 때 사용되며, 배열의 마지막 요소가 삭제됩니다. 그리고, 이를 변수에 담아서 출력해보면, 삭제된 요소를 리턴하게 됩니다.

 

Push 메소드는 배열의 마지막에 새로운 요소를 추가합니다. 이를 변수에 담아서 출력해보면, 추가된 이후의 배열 길이값을 리턴하게 됩니다.

1. pop
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();  // "Mango" 삭제
let item = fruits.pop();
console.log(item) // "Mango" 리턴

2. push
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");   // "Kiwi" 추가
let item = fruits.push("Kiwi"); 
console.log(item) // 배열 길이(5) 리턴

 

이와 비슷한 메소드로 shift 와 unshift가 존재합니다.

pop 및 push 메소드는 배열의 마지막 요소를 지우거나 마지막에 요소를 추가한다면, shift 및 unshift 메소드는 배열의 첫 번째 요소를 삭제하거나, 첫 번째에 요소를 추가합니다. 그리고 이들을 변수에 담아 출력하면, 배열에서 삭제된 첫 번째 요소, 배열 요소가 추가된 총 길이를 출력합니다.

1. shift
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();  // "Banana" 삭제
let item = fruits.shift();
console.log(item) // "Banana" 리턴

2. unshift
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Plum");   // "Plum" 추가
let item = fruits.unshift("Plum"); 
console.log(item) // 배열 길이(5) 리턴

 

자바스크립트 연산자 중 하나인 delete 키워드로 배열 요소를 삭제할 수도 있으나, 삭제된 요소의 자리가 undefined로 바뀌게 되므로, 왠만해서는 사용하지 않는 것이 좋습니다.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[2]; // "Apple" 삭제
console.log(fruits) // ["Banana", "Orange", empty, "Mango"];

 

length 프로퍼티를 통해서도 배열에 요소를 추가할 수 있습니다. 이렇게 하는 경우, 배열의 맨 뒤에 요소가 추가되는 것을 볼 수 있습니다.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi"; // ['Banana', 'Orange', 'Apple', 'Mango', 'Kiwi']

배열에 요소를 추가하는 메소드로 concat( ), 추가하거나 삭제하는 메소드로 splice( )도 사용될 수 있는데, 이는 조금 있다가 설명하겠습니다.

 

참고로 배열 요소를 변경할 때는 인덱스를 이용하면 됩니다.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";  // ['Kiwi', 'Orange', 'Apple', 'Mango']

 

3. slice & splice( ) 메소드

 

slice 및 splice 메소드 또한 배열에서 자주 사용되는 함수입니다.

먼저, slice 메소드는 배열의 일부를 잘라 새로운 배열로 만들어 냅니다. slice 안의 인자로는 잘라 내려는 요소의 갯수를 적으면 됩니다. 그럼 첫 번째부터 순서대로 요소가 없어지고, 나머지 요소들로 새로운 배열이 생성됩니다.

slice 메소드에 인수 두 개를 지정하면, 시작 인수에서 끝 인수까지(포함하지 않음) 요소를 선택하여 잘라냅니다.

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const new_fruits = fruits.slice(2);
console.log(new_fruits) // ['Lemon', 'Apple', 'Mango']
console.log(fruits) // ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']

 

splice 메소드는 배열에 새로운 요소를 추가하거나 삭제할 때 사용됩니다.

첫 번째 인자는 새 요소의 위치를 정의합니다. 두 번째 인자는 제거하려는 요소의 수를 정의합니다. 나머지 인자("Lemon" , "Kiwi")는 추가하려는 새 요소를 정의합니다.

splice 메소드로 배열의 요소를 삭제할 때, 2개의 인수가 오게 됩니다. 먼저 삭제하려는 위치, 다음 인자로는 삭제하려는 요소의 갯수가 옵니다.

1.요소 추가
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi"); //  ['Banana', 'Orange', 'Lemon', 'Kiwi', 'Apple', 'Mango']

2. 변수에 할당했을 때 출력되는 값
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const new_splice = fruits.splice(2, 2, "Lemon", "Kiwi");
console.log(new_splice); // ['Apple', 'Mango'] <- splice 메소드는 삭제된 항목이 있는 배열을 반환.

3. 요소 삭제
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1); // ['Orange', 'Apple', 'Mango']

4. 배열끼리 합치기

 

두 개의 배열을 합치는데 사용하는 메소드는 concat 입니다. concat 메소드는 새로운 배열을 리턴하며, 여러 개의 배열을 합치는데 이용이 가능합니다. 배열뿐만아니라 어떤 요소를 추가할 수 있습니다.

1. 배열끼리 합치기
const myFav = ["봄", "가을"];
const myWorst = ["여름", "겨울"];
const myPlace = ["해변", "스키장"]
const myWeather = myFav.concat(myWorst, myPlace); 
// ["봄", "가을", "여름", "겨울", "해변", "스키장"]

2. 배열에 요소 추가하기
const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter");
// ['Emil', 'Tobias', 'Linus', 'Peter']

 

5. 배열 정렬하기

 

sort 메소드는 이전에도 설명했듯이, 배열의 요소를 알파벳 순서 대로 정렬하는 메소드입니다. reverse 메소드는 배열의 요소를 역순서대로 정렬합니다.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort(); // ['Apple', 'Banana', 'Mango', 'Orange']
fruits.reverse(); // ['Mango', 'Apple', 'Orange', 'Banana']

sort 메소드 사용 시 주의점, 기본적으로 값을 문자열로 정렬하는 부분입니다. 숫자로 이루어진 요소의 배열에서, 숫자가 문자열로 정렬될 때 "2"가 "1"보다 크기 때문에 "20"가 "100"보다 크게 인식합니다. 이 때문에 sort() 메소드는 숫자를 정렬할 때 잘못된 결과를 생성할 수 있습니다.

 

6. 배열 요소의 반복

 

배열 안의 요소를 반복할 때 다양한 메소드를 사용할 수 있습니다. 먼저 forEach 메소드는 각 배열 요소에 대해 한 번씩 콜백 함수를 호출합니다. 이때, 콜백함수의 인자로는 값, 인덱스, 배열이 올 수 있습니다. 예문은 아래와 같습니다.

1. 값
const numbers = [45, 4, 9, 16, 25];
let number_again = "";
numbers.forEach(myFunction);

function myFunction(value, index, array) {
  number_again += value + " ";
}

console.log(number_again) // 45, 4, 9, 16, 25

2. 인덱스
const numbers = [45, 4, 9, 16, 25];
let index_again = "";
numbers.forEach(myFunction);

function myFunction(value, index, array) {
  index_again += index + " ";
}

console.log(index_again) // 0 1 2 3 4 

3. 배열
const numbers = [45, 4, 9, 16, 25];
let array_again = "";
numbers.forEach(myFunction);

function myFunction(value, index, array) {
  array_again += array + " "; <- 대소문자 주의! Array가 아닌 array입니다.
}

console.log(array_again) 
// 45,4,9,16,25 | 45,4,9,16,25 | 45,4,9,16,25 | 45,4,9,16,25 | 45,4,9,16,25 |

4. 값, 인덱스, 배열
const numbers = [45, 4, 9, 16, 25];
let all_again = "";
numbers.forEach(myFunction);

function myFunction(value, index, array) {
  all_again += value + " | " + index + " |  " + array + " | "; 
}

console.log(all_again)
45 | 0 |  45,4,9,16,25 | 
4 | 1 |  45,4,9,16,25 | 
9 | 2 |  45,4,9,16,25 | 
16 | 3 |  45,4,9,16,25 | 
25 | 4 |  45,4,9,16,25 |

반응형

map() 메소드는 각 배열 요소에 대해 함수를 수행하여 새 배열을 만들며, 값이 없는 배열 요소에 대한 함수를 실행하지 않습니다. 이 메소드는 원래 배열을 변경하지 않는 점을 기억하시기 바랍니다. forEach와 마찬가지로, 콜백함수의 인자로는 값, 인덱스, 배열이 올 수 있습니다!

const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
} 

console.log(number2) // [90, 8, 18, 32, 50]

filter() 메소드는 조건을 통과한 배열 요소들로 새 배열을 리턴합니다. 조건에 해당하는 내용은 콜백 함수 안에 작성해줍니다. 콜백함수의 인자로는 값, 인덱스, 배열이 올 수 있습니다.

const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

console.log(over18) // [45, 25]

reduce() 메소드는 다양한 경우에 사용이 가능합니다. 콜백 함수의 인자로 배열 요소의 축적된 총 값, 값, 인덱스, 배열을 받기 때문에 이런 부분을 활용해서 다양한 함수 프로그래밍 구현이 가능합니다. 아래와 같이, 인자로 들어오는 total은 축적되어 계산된 값 99를 리턴합니다.

 

만약에 초깃값을 지정하면, 초기된 값부터 시작해서 축적된 값을 계산하게 됩니다.

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);

function myFunction(total, value, index, array) {
  console.log(total, value, index, arra);
  return total + value;
}

//콘솔에 찍히는 값
45 4 1 [45, 4, 9, 16, 25]
49 9 2 [45, 4, 9, 16, 25]
58 16 3 [45, 4, 9, 16, 25]
74 25 4 [45, 4, 9, 16, 25]

//리턴 값
99

const numbers = [45, 4, 9, 16, 25];
result = numbers.reduce((total, value, index) => {
  console.log(total, value, index);
  return total + value;
}, 10);

//콘솔에 찍히는 값
10 45 0
55 4 1
59 9 2
68 16 3
84 25 4

//리턴값
109

reduceRight( )는 오른쪽에서 왼쪽의 순서대로 축적된 값을 계산하기 시작합니다.

 

7. every( ) 와 some( ) 메소드

 

every 메소드는 모든 배열 값이 테스트를 통과하는지 확인하며, some 메소드는 일부 배열 값이 테스트를 통과하는지 확인합니다. 두 메소드 모두 콜백 함수에서 3개의 인자(value, index, itself)를 받습니다.

1. every
const age = [50, 14, 19, 12, 21];
let allOver18 = numbers.every(myFunction);

function myFunction(value) {
  return value > 18;
}

console.log(allOver18) // false

2. some
const age = [50, 14, 19, 12, 21];
let allOver18 = numbers.some(myFunction);

function myFunction(value) {
  return value > 18;
}

console.log(allOver18) // some <- 일부 요소만 조건을 콜백 함수 조건을 충족하면 됨.

 

8. 배열 요소 찾기

 

배열에서 요소 값을 검색하고 해당 위치를 찾는 메서드는 여러 가지가 존재합니다. 예문에 맞게 쓰임새 정도만 기억해두시면 좋을 것 같습니다.

 

indexOf( ) : 배열 요소를 왼쪽에서 처음부터 찾은 후 해당 인덱스 값을 반환.

const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple"); // 0 반환

lastIndexOf( ) : 배열 요소를 오른쪽 제일 마지막부터 찾은 후 해당 인덱스 값을 반환.

const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple"); // 2 반환

includes( ) : 배열에 요소가 있는지 확인하는 메서드로 indexOf와 달리 NaN 또한 확인이 가능함.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.includes("Mango"); // is true

find( ) : 콜백 함수를 통과한 첫 번째 배열 요소의 값을 반환. 함수의 인자로는 value, index, itself 3개가 올 수 있음.

const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 10;
}

console.log(first); // 16 반환

 

findIndex( ) : 콜백 함수를 통과한 첫 번째 배열 요소의 인덱스 값을 반환. 마찬가지로 함수의 인자로는 value, index, itself 3개가 올 수 있음.

const numbers = [4, 9, 16, 25, 29];
let first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 10;
}

console.log(first); // 2 반환

from( ) : 문자열을 배열로 바꿔주는 메서드입니다.

Array.from("ABCDEFG")   // Returns [A,B,C,D,E,F,G]

keys( ) : 배열의 키 값을 포함하는 Array Iterator 객체를 만듭니다.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();

for (let x of keys) {
  text += x + "<br>";
}

//출력값
0
1
2
3