TIL02 | JavaScript 배열

Array API 정리한 포스팅 보러가기 👉️ [JS] Array api 총 정리

 

배열

대괄호 두 개로 이루어져 있으며, 특정한 요소를 담는 데이터 타입

 

배열이 필요한 이유와 선언하는 방법

• 배열을 통해 여러 개의 데이터를 한 곳에 저장할 수 있다.

• 배열 선언

  let array = [1, 2, 3];
  let array2 = new Array(4); // [ , , , ] 빈배열

 

배열의 값을 추가, 수정, 삭제하는 방법

• 추가

  • push()

• 수정

  • splice()

• 삭제

  • splice() pop()

 

배열의 메서드 5가지와 사용 방법

slice(start, end)

• 원본 배열 변형 X => 새로운 변수에 할당해줘야한다.
• 배열 내의 특정한 요소의 index 범위에 따라 새로운 배열을 리턴

let nums = [1,2,3,4,5]
let nums_new = nums.slice(1,4)
let nums_new2 = nums.slice(-2) // 음수는 끝에서부터

console.log(nums) // [ 1, 2, 3, 4, 5 ]
console.log(nums_new) // [ 2, 3, 4 ]
console.log(nums_new2) // [ 4, 5 ]

splice(start, delete, item)

• 원본 배열 변형 O
• 배열 내의 특정한 요소를 삭제하거나, 다른 요소로 대체하거나 새로운 요소를 추가할 때 사용한다.
• 댓글 삭제기능을 구현할 때 많이 활용

let num = [1,2,3,4,5];
num.splice(2,1,10);

console.log(num); // [ 1, 2, 10, 4, 5 ]

function extractOver175(list) {
  //괄호 안은 음수만 들어가야 합니다.
  let extractedPeople = list.splice(-3);
  return extractedPeople;
}

let lane1 = [{'철수':'150cm'}, {'영희': '153cm'}, {'바둑이': '155cm'},{'밍키': '160cm'}, {'살구' : '168cm'}, {'두팔': '175cm'}, {'여름': '180cm'}, {'소헌': '181cm'}];

extractOver175(lane1) 
// [{'두팔': '175cm'}, {'여름': '180cm'}, {'소헌': '181cm'}];

filter(callbackFunction, thisAgr)

• 원본 배열 변형 X, 새로운 배열 반환
• 조건에 맞는 요소들만 모아서 새로운 배열을 반환
  • 만약 리턴되는 요소가 없다면 빈 배열을 반환

let numbers = [10, 4, 32, 17, 5, 2];

// 첫번째 방법 (filter()의 인자에서 바로 함수를 써주는 방법) 
let result = numbers.filter((value)=> value > 10);

console.log(result);      // [ 32, 17 ]

concat()

• 원본 배열 변형 X, 새로운 배열 반환
• 주어진 배열에 기존 배열을 합쳐서 새로운 배열을 반환

let alphabet = ['a', 'b', 'c'];
let hangeul = ['ㄱ', 'ㄴ', 'ㄷ'];

alphabet.concat(hangeul);      // [ 'a', 'b', 'c', 'ㄱ', 'ㄴ', 'ㄷ' ]

• concat() 중복 제거하기

  const concatArray = [1, 2, 3, 3, 4];
  const result = concatArray.filter((el, idx) => concatArray.indexOf(el) === idx);

push() & pop()

• push() 배열의 마지막 요소로 추가.

• pop() 배열의 마지막 요소를 제거하며 제거된 요소를 반환.

shift()

• 배열의 첫번째 요소를 제거

 

TODO

• 배열의 타입이 객체인 이유

• 배열과 반복문을 함께 자주 사용하는 이유