javaScript. (9) 배열(Array)

배열에 관한 Method

 

 

1) 배열.length

let array= [1, 2, 3, 4];
array.length;    // 4

배열의 길이를 알려준다.

배열의 요소가 추가/제거 될 때 마다 자동으로 바뀐다.

let array = [1, 2, 3, 4, 5];
array.length;       // 5

array.pop();     // pop : 맨 끝의 요소를 제거
array.length;       // 4

 

 

 

2) 배열.join(구분자)

 

배열의 항목들을 구분자를 기준으로 합친 새 문자열 반환.

구분자를 입력하지 않으면 자동으로 콤마(,)가 된다.

 

let arr = [1, 2, 3];

arr.join();       // "1,2,3"  ㅡ default : 콤마(,)
arr.join(':');    // "1:2:3"

 

 

 

3) 배열.concat(합칠 배열)

 

- 배열을 합친 새 배열을 반환.

배열 + 배열 = 새 배열 

 

❗ 단, push와 같이 맨 끝으로 연결된다. (인수를 순서대로 붙임)

❗ 기존의 배열을 변경하지는 않는다. (this도 변경 ❌)

let arr = [1, 2, 3];
arr = arr.concat(4, 5);  // value 추가 ㅡ [1, 2, 3, 4, 5]
arr.concat([6, 7]);      // array 추가 ㅡ [1, 2, 3, 4, 5, 6, 7)

>> 매개변수로는 배열(array) 또는 값(value)이 올 수 있다.

값(value)가 인수로 오면, 그 자체가 배열에 붙고

배열(array)가 인수로 오면, 그 구성요소가 순서대로 붙는다.

 

const num1 = [1,2,3]
const num2 = [4,5,6]
const num3 = [7,8,9]

num1.concat(num2, num3);
// [1,2,3,4,5,6,7,8,9]

- 위와 같이 배열 여러개를 concat하여 세개(이상)의 배열을 붙일 수도 있다.

 

 

 

4) 배열.reverse()

- 원래의 배열을 뒤집음. (배열 요소의 순서 reverse)

let array = [1,2,3,4,5];
array.reverse();    // [5,4,3,2,1] 반환

array  // [5,4,3,2,1]

- 순서가 반전된 배열을 반환.

❗ reverse()를 하고나면 해당 배열은 순서가 바뀐채로 저장됨. (원본 배열 변형)

 

 

 

5) 배열.push(항목) / 배열.pop()

 

- 배열의 맨 뒤에 요소를 추가 / 제거함.

- 기존의 배열(원본 배열)이 변함.

push	변한 배열의 길이 반환
pop	마지막 요소 제거 후, 그 요소 반환

 

 

6) 배열.unshift(항목) / 배열.shift()

 

- 배열의 맨 앞에 요소를 추가 / 제거함.

- 마찬가지로 각각 변한 배열의 길이 / 제거한 요소를 반환함.

let array = [1,2,3,4,5];

array.push('hello');    // 6 
array.unshift('yjin');     // 7

array.pop();    // 'hello'
array.shift();    // 'yjin'

 

 

 

7) 배열.splice(시작점, 지울 개수, 넣을것)

 

- splice를 이용하면 맨앞, 맨뒤가 아닌 중간의 값도 넣고 뺄 수 있다.

- 넣을것은 여러개면 컴마(,)로 구분해서 계속 쓸 수 있음!

 

• 제거시 : 2번째 인수를 지울갯수로
• 추가시 : 2번째 인수를 0으로. (시작점 = 넣을 위치)

let arr = [1,2,3,4,6];

//// 삭제시
arr.splice(2, 2, 5);   // 3,4 제거하고 5를 넣음
arr;     // [1,2,5,6]

//// 추가시
arr.splice(2, 0, 3);   // 3이 추가됨. ㅡ  index 2 자리에 3을 추가함
arr;        // [1,2,3,5,6]

 

 

8) 배열.map(function(값, 자릿수) {조건})

9) 배열.forEach(function(값, 자릿수) {조건})

 

- 배열의 항목들을 반복하면서 조작하는 함수. 

- map과 forEach의 매개변수로는 함수가 들어간다. (=callback)

 

map   vs   forEach
map	forEach
바뀐 새 배열을 반환. callback 함수의 결과를 모은 배열 반환.	배열을 반환하진 X. undefined

>> forEach()는 배열을 변형하지 못하지만, callback 함수를 변형할수는 있음.

 

 

 

10) 배열.reduce(function(이전값, 현재) {조건})

+) 배열.reduceRight

 

- 배열을 왼쪽부터 조건을 적용해 하나의 값으로 만듬. (리듀서 함수 실행)

- 오른쪽부터 줄여가고싶다면  reducerRight를 사용.

 

const arr = [1,2,3,4];

const reducer = (previous, current) => previous + current;
arr.reduce(reducer);    // 1+2+3+4 = 10;

 

 

11) 배열.filter(function(항목) {조건})

 

let array = [1,2,3,4,5];

array.filter(function(x) {
    return x % 2 === 0;          // 조건
});      // [2,4]

- 특정 조건에 해당하는 배열만을 걸러내 새 배열로 만듬. (=필터링)

 

 

 

12) 배열.sort(function(이전값, 다음값) {조건})

let array = [5,4,3,2,1];

array.sort(function(x, y){
   return x - y;
});        // [1,2,3,4,5]

- 배열을 특정 조건에 따라 정렬한다.

- 복사본이 만들어지는 것이 아닌 원 배열이 정렬됨.

 

- 매개변수 없이 바로 array.sort()를 한다면? = 문자열 정렬(오름차순)

>> 숫자여도 문자열처럼 비교하여 정렬함.

 

 

💡  compareFunction(a, b)

javaScript. Sort() 메서드

숫자 오름차순	sort(a,b => a - b)
숫자 내림차순	sort(a,b => b - a)

** sort 함수의 핵심은 비교함수를 작성하는 것이고,

비교함수에서 a(next)와 b(prev)가 들어오고 무언가 바꾸고 싶을 때 -1을 리턴하는 것. (a < b일때 -1 리턴)

 

 

 

 

13) 배열.indexOf / lastIndexOf

 

- 문자열처럼 배열에서 찾을 값의 인덱스값을 알려줌.

- lastIndexOf는 뒤에서부터 찾음.

 

- 여러개가 있어도, 처음으로 찾은 위치만 알려줌.

- 존재하지 않다면, -1을 반환함.

const animal = ['pig', 'duck', 'hamster', 'cat', 'dog', 'duck'];

animal.indexOf('duck');          // 1  ㅡ 처음으로 찾은 위치만 알려줌
animal.lastIndexOf('duck');       // 5  ㅡ 뒤에서부터 검색

animal.indexOf('duck', 2);     // 5 ㅡ index2부터 검색 시작 

animal.indexOf('goose');      // -1 (없음)

 

14) 배열.every(function(항목) {조건})

15) 배열.some(function(항목) {조건})

- 각 배열의 모든 항목 / 일부 항목이 true이면 true를 반환.

 

- every는 모든 항목이 조건을 만족하면 true

- some은 하나라도 만족하면 true를 반환.

 

>> 어떻게 보면 &&와 ||연산자의 배열 버전이라고 할수도 (!)

 

 

 

16) Array.isArray(값)

Array객체 자체에 속해있는 정적 메소드(static method).

- 배열인지 아닌지 확인해줌.

Array.isArray('array?');       // false
Array.isArray(['array']);      // true

❗  배열인지 확인할 것을 ( )안에 넣어야함 (. 앞에있는 Array는 Array객체를 의미 ㅡ 생략하면 안됨)

 

 

---

REFERENCE

 

https://www.zerocho.com/category/JavaScript/post/57387a9f715202c8679b3af0

(JavaScript) 배열(Array)

이 포스팅은 zerocho님의 javascript 강의를 보고 작성한 글입니다.

공부+기록 용으로 작성한 것이며, 자세한 것은 위 포스팅을 참고하세요!