JS - Array

Taehee Kim·2022년 5월 7일

JavaScript

목록 보기

5/17

배열 특징

1. 배열의 타입

const cafe = ['coffee', 'cake', 'tea', 'cookie']
typeof cafe
typeof(cafe)
// expected output: 'object'

2. 프로퍼티 dir

프로퍼티와 매소드 값을 알 수 있다.
프로퍼티: 단순 속성값 출력
매소드: 배열에 속한 기능 단위 출력

const cafe = [ 'coffee', 'cake' ]
console.dir(cafe)

3. length 프로퍼티

요소의 갯수를 알려줌
희소 배열 (요소 앞, 뒤, 중간이 비어 있는 배열) 만들기 가능

📌 메소드

자료형에 포함된 함수
빌트인 메소드
원본 배열을 수정하는 메소드와 아닌 메소드 구분 중요
--> 파괴적 처리 vs 비파괴적 처리
Array.메소드 : Array.메소드 형태로 사용, 여기서 ‘Array’는 문자 그대로 Array
Array.prototype.메소드 : 배열.메소드 형태로 사용, 여기서 ‘배열’은 정의된 배열, 예를 들어 [1, 2, 3].pop();

1. unshift: 맨 앞 요소 추가 ⭐

2. shift: 맨 앞 요소 삭제 ⭐

삭제될 요소 반환 가능
요소가 없거나 length가 0이면 undefined

3. pop() : 맨 뒤 삭제 ⭐

제거 요소 반환 가능

4. push(): 맨 뒤 추가 ⭐

5. reverse()

원본 배열 변형

7. indexOf(): 요소의 인덱스 찾기

없는 요소를 찾으면 -1
indexOf(탐색하고자 하는 요소 ,찾는 시작 위치)

8. isArray(): 배열인지 확인

9. join(): 요소를 하나로 연결

String으로 받겠다는 의미
전화번호에 많이 사용

10. fill(요소, 채우기 시작점,끝 인덱스): 똑같은 요소로 채우기 ⭐

원본 배열 변형
(-)로 역순으로 사용 가능

10-1. String.repeat(반복할 수)

Array(숫자) --> 지정 숫자 개수만큼 빈 요소를 갖는 배열을 만든다.

10-2. split(): String 쪼개기

split(쪽갤 기준 값, limit)

참고) https://hianna.tistory.com/377

10-3. Array.from(): 유사배열객체 만들기

완전한 배열로서 성격을 갖도록 해준다.
Array.isArray(); 속성으로 확인한 결과 true값으로 반환함

Array.from('hello world');
//expected output: ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']

Array.from([1, 2, 3], x => x ** 2);
//expected output: [1, 4, 9]

Array.from([{'value':100}, {'value':200}, {'value':300}], x => x.value);
//expected output: [100, 200, 300]

11. flat(): 배열 평탄화

안 쪽부터 배열 풀기
infinity: 한 번에 평탄화

12. include: 배열에 요소의 유무 확인

include(찾는 값, 탐색을 시작하고자 하는 인덱스)
true. false로 반환

13. find ⭐⭐⭐

find는 조건에 맞는, 하나만 찾는 경우!!
ex) 사용자 ID/PW 찾기에 사용
부하가 생기지 않음, 가장 좋은 이점

14. findIndex

조건에 부합하는 배열의 맨 첫 번째 요소의 인덱스 반환
첫번째 요소만 반환
length는 1부터 시작임

15. map ⭐⭐⭐

map은 데이터를 추출하기 위한 것, 원본을 건들이지 않음!
열 내에 있는 요소에 오름차순으로 접근해서 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환
기존의 값을 재정의할 수도 있지만 새로운 형태의 값을 정의하는 것 또한 가능
-객체나 json 형태의 데이터를 탐색하는 용도로 사용할 수 있기도 하며 이 과정에서 새로운 형태의 값을 정의하는 경우가 많음
--> find, filter, forEach에서도 가능