[JavaScript] 배열의 이해 및 메서드

1. 배열이란

• 배열(Array)은 순서(index)가 있는 값 (index는 0부터 시작)
• 대괄호(square bracket)을 이용해 만듬
• 각각의 원소(element)는 쉼표(comma)로 구분해 줌

2. 배열의 판별과 조회

1. 배열의 판별
   • typeof 사용 시 배열은 “object” 반환
   • 배열은 Array.isArray(대상)로 판별(T/F 반환)
2. 배열의 조회
   • bracket notation을 이용해 배열의 요소를 조회
   • 만약 배열에 없는 인덱스면 undefined 반환

     array[3] 
     // array라는 배열의 3번째 인덱스 값(4번째 값)을 조회
     

3. 배열의 길이 확인 - 배열의 길이는 배열명.length로 확인

3. 배열 값 핸들링 메서드

1. 배열값 추가/삭제(뒤)
   • 배열명.push(요소) : 배열 뒤 요소 추가(길이 반환)
   • 배열명.pop() : 배열 뒤 요소 삭제(요소 반환)
   • push/pop 모두 원 배열을 수정
2. 배열값 추가삭제(앞)
   • 배열명.unshift(요소) : 배열 앞 요소 추가(길이 반환)
   • 배열명.shift() : 배열 앞 요소 삭제(요소 반환)
3. 배열 내 요소 포함여부
   • 배열명.indexOf(요소) : 배열 내 index 반환 (없을시 -1)
   • 배열명.includes(요소) : 배열 내 포함여부 반환 (IE 불가)
4. 배열의 복사/분리
   • 배열명.slice(s,e) : 원본 배열 복사본 반환

        array.slice(start, end)
     

   1. start : 시작점 (이상)

   start	result
   undefined	0부터 slice
   음수	배열의 끝에서 부터 n개 추출
   배열의 길이 이상	빈 배열

   1. end : 종료점 (미만)

   end	result
   미지정	배열의 마지막 요소까지 추출
   음수	배열의 끝에서 부터 n개 까지
   배열의 길이 이상	배열의 끝까지 추출

   • 배열명.splice(s,d) :원본 배열 수정

      array.splice(start, count, item1, item2,...)
     

     1. start : 시작점 (이상)

     start	result
     음수	start를 끝 index로 설정
     배열의 길이 이상	빈 배열 반환
     절대값이 배열의 길이 이상	start를 0으로 설정

     1. count : 제거할 요소 수

     end	result
     미지정	배열의 마지막 요소까지 추출
     음수	배열의 끝에서 부터 n개 까지
     배열의 길이 이상	배열의 끝까지 추출

   1. item : 배열에 추가할 요소

   end	result
   미지정	요소제거만 수행
   지정	해당 index에 삽입

   1. 반환값
      • 제거한 요소를 담은 배열(없을 시 빈 배열)
5. 기타 관련 메서드
   • concat : 배열 병합

      const 변수명 = 배열1.concat(배열2)
      // 변수명에 배열1, 배열2를 합친 새 배열 반환
     

   • join : 배열내 요소를 문자열로 병합

     const arr = [a, b, c];
     arr.join('')
     // 'abc' 를 반환
     arr.join('-')
      // 'a-b-c' 를 반환
     

   • split : 문자열을 기준에 따라 배열화

     const str = 'The red'
     str.split(' ')
     // ['The', 'red'] 를 반환
     str.split('')
      // ['T', 'h', 'e', ' ', 'r', 'e', 'd'] 반환
      // 띄어쓰기도 요소로 반환함 주의
     

참고자료- slice, splice 차이

JavaScript 카테고리 내 다른 글 보러가기