[JavaScript]배열

자바스크립트 배열의 특징

배열은 자바스크립트에서 사용되는 타입 중 하나로 순서가 있는 형태를 가지고 있습니다. 다른 언어와 다르게 자바스크립트의 배열은 숫자, 문자열, bollean 등 다영한 타입의 자료를 할당할 수 있으며, 선언 시 배열의 길이를 정해주지 않아도 된다는 특징이 있습니다.

배열의 길이가 정해져 있지 않다는 것은 item을 추가하거나 삭제하면 배열의 길이가 유연하게 변경된다는 의미이며, 배열에 반복문과 메서드를 활용하면 많은 데이터를 한 번에 다루는데 효과적입니다.

오늘은 많이 사용되는 메소드를 찾아보고 직접 실행한 결과, 기존 배열이 변경변경되는 메소드와 그렇지 않은 메소드로 구분하여 정리하였습니다.

기존 배열이 바뀌는 메소드

push

배열 뒤쪽으로 item을 추가합니다. (추가 후 배열의 길이를 리턴)

let fruits = ['사과', '딸기', '망고', '오렌지'];
fruits.push('수박');
console.log(fruits) // ['사과', '딸기', '망고', '오렌지', '수박']

pop

배열 가장 마지막 인덱스의 item을 삭제합니다. (삭제한 item을 출력)

let fruits = ['사과', '딸기', '망고', '오렌지'];
fruits.pop();
console.log(fruits) // ['사과', '딸기', '망고']

unshift

배열 앞쪽으로 item을 추가합니다.(추가 후 배열의 길이를 리턴)

let fruits = ['사과', '딸기', '망고', '오렌지'];
fruits.unshift('수박');
console.log(fruits) // ['수박', '사과', '딸기', '망고', '오렌지']

shift

배열 인덱스 0번의 item을 삭제합니다. (삭제한 item을 출력)

let fruits = ['사과', '딸기', '망고', '오렌지'];
fruits.shift();
console.log(fruits) // ['딸기', '망고', '오렌지']

sort

배열을 오름찰순, 내림차순으로 정리합니다.

let fruits = [1, 234, 554, 65, 27];
fruits.sort() // 오름차순, sort((a,b) => a - b)
console.log(fruits) // [1, 27, 65, 234, 554]

fruits.sort((a,b) => b - a) // 내림차순
console.log(fruits) // [554, 234, 65, 27, 1]

splice

특정한 인덱스를 선택하여 item을 삭제한다. 그리고 배열 item 사이에 아이템 추가가 가능합니다.

//slice(시작 인덱스, 삭제할 아이템 개수)  
let fruits = ['사과', '딸기', '망고', '오렌지']
fruits.splice(2) // 인덱스 1번 부터 모두 삭제
console.log(fruits) // ['사과']  
  
let fruits = ['사과', '딸기', '망고', '오렌지']  
fruits.splice(2, 3) // 인덱스 2 ~ 3번 요소 삭제
console.log(fruits) // ['사과', '딸기']
 
let fruits = ['사과', '딸기', '망고', '오렌지']
fruits.splice(1, 0, '+') // ['사과', '+', '딸기', '망고', '오렌지']
  
let fruits = ['사과', '딸기', '망고', '오렌지']  
fruits.splice(1, 0, '+', '-') // ['사과', '+', '-', '딸기', '망고', '오렌지']
  
let fruits = ['사과', '딸기', '망고', '오렌지']
fruits.splice(0, 2, '+', '-') // ['+', '-', '망고', '오렌지']

reverse

배열의 순서를 반대로 바꿉니다.

let fruits = ['사과', '딸기', '망고', '오렌지']
fruits.reverse() // 배열 순서 반대
console.log(fruits) // ['오렌지', '망고', '딸기', '사과']

기존 배열이 바뀌지 않는 메소드

기존 배열이 바뀌지 않는 메소드의 경우 리턴 값을 변수에 할당해서 사용하는 경우가 많습니다.

join

배열의 item들을 합쳐서 문자열로 변환합니다.

let fruits = ['사과', '딸기', '망고', '오렌지'];
fruits.join();
console.log(fruits) // '사과,딸기,망고,오렌지'

indexOf

배열에 특정 item이 있으면 그 item의 인덱스를 반환하고 없으면 '-1' 반환합니다.

let fruits = ['사과', '딸기', '망고', '오렌지']
fruits.indexOf('사과') // 0
fruits.indexOf('딸기') // 1
fruits.indexOf('오렌지') // 3
fruits.indexOf('수박') // -1

includes

배열에 특정 item이 있는지 확인하고 true or false 반환합니다.

let fruits = ['사과', '딸기', '망고', '오렌지']
fruits.includes('사과') // true
fruits.includes('수박') // false

concat

배열에 item이나 배역을 추가합니다.

let fruits = ['사과', '딸기', '망고', '오렌지']
fruits.concat('1') // ['사과', '딸기', '망고', '오렌지', 1]
fruits.concat([1,2,3]) // ['사과', '딸기', '망고', '오렌지', 1, 2, 3]

slice

배열의 특정한 부분을 반환합니다.

//slice(시작 인덱스, 끝 인덱스), 끝 인덱스 요소 미포함
let fruits = ['사과', '딸기', '망고', '오렌지']
fruits.slice(0, 2) ['사과', '딸기']
fruits.slice(1, 3) //  ['사과', '딸기']
fruits.slice(2) //   ['망고', '오렌지'], 2번 인덱스부터 끝까지

find

배열의 모든 요소들을 돌면서 콜백함수를 호출 후 콜백함수가 true를 반환하면 실행을 멈추고 해당 item 반환합니다.

let cats = []
cat = {
  name :'꼬미',
  age : 3 
}
{name: '꼬미', age: 3}

cat2 = {
  name :'쿠키',
  age : 1 
}
cat3 = {
  name :'라떼',
  age : 2
}
cats.push(cat)
cats.push(cat1)
cats.push(cat2)
console.log(cats) // {name: '꼬미', age: 3} {name: '쿠키', age: 1} {name: '라떼', age: 2}
  
cats.find((cats) => cats.age > 1); //{name: '꼬미', age: 3}

filter

배열의 모든 요소들을 돌면서 콜백함수 호출 후 콜백함수가 true를 반환하는 item을 모아 배열로 반환합니다.

// 조건은 위의 코드와 동일
  
cats.filter((cats) => cats.age >1); // [{name: '꼬미', age: 3} {name: '라떼', age: 2}]

map

배열의 모든 요소들을 돌면서 콜백함수 호출 후 콜백함수가 반환된 값을 배열로 반환한다.

// 조건은 위의 코드와 동일

cats.map((cats) => cats.age >1); // [true, false, true]

some

배열의 모든 요소들을 돌면서 콜백함수 호출 후 콜백함수가 반환하는 값이 하나라도 true이면 true를 반환합니다.

// 조건은 위의 코드와 동일

cats.some((cats) => cats.age === 3); // true

every

배열의 모든 요소들을 돌면서 콜백함수 호출 후 콜백함수가 반환하는 값이 모두 true이면 true를 반환합니다.

// 조건은 위의 코드와 동일

cats.every((cats) => cats.age === 3); / /false
cats.every((cats) => cats.age < 4); // true

reduce / reduceRight

배열의 모든 요소를 돌면서 값을 누적한다. reduce는 왼쪽부터 시작하고 reduceRight는 오른쪽부터 시작합니다.

배열.reduce(콜백함수, 누적값의 초기값);
배열.reduceRight(콜백함수, 누적값의 초기값)                                   

// 조건은 위의 코드와 동일

cats.reduce((prev, curr) => {
    return prev + curr.age
}, 0)

// 6