Array Functions
1. 삽입, 삭제, 반환
예제 배열 선언 및 정의
let fruits = ['사과', '배', '오렌지', '수박', '포도'];
1. 배열에 새로운 데이터 삽입
- push() : Array 맨 뒷줄에 데이터를 삽입한다.
사용 :fruits.push('자두')
결과 :['사과', '배', '오렌지', '수박', '포도', '자두'] - unshift() : Array 맨 앞줄에 데이터를 삽입한다.
사용 :fruits.unshift('자두')
결과 :['자두', '사과', '배', '오렌지', '수박', '포도']
2. 배열에 있는 데이터를 삭제
- pop() : Array 맨 뒷줄에 데이터를 삭제한다.
사용 :fruits.pop()
결과 :['사과', '배', '오렌지', '수박'] - shift() : Array 맨 앞줄에 데이터를 삭제한다.
사용 :fruits.shift()
결과 :['배', '오렌지', '수박', '포도'] - splice() : Array 시작 지점과 개수를 지정하여 삭제한다.
파라미터 : splice(시작 Index, 삭제 개수)
사용 :fruits.splice(1, 2)
결과 :['사과', '수박', '포도']
3. 데이터를 수정하고 새로운 배열로 반환
- slice() : 시작지점부터 종료지점-1 까지 잘라내어 새로운 배열로 반환해준다.
파라미터 :slice(시작 Index, 종료 Index + 1)
사용 :fruits.slice(1, 4),console.log(fruits)
결과 :['배', '오렌지', '수박'],['사과', '배', '오렌지', '수박', '포도']
기존 fruits의 데이터는 바뀌지 않은 것 확인 - concat() : 뒷줄에 새로운 데이터를 삽입하고 새로운 배열로 반환해준다.
파라미터 :concat(원하는 값1, 원하는 값2, ...)
사용 :fruits.concat('1'),fruits.concat('1', ['2', '3'])
결과 :['사과', '배', '오렌지', '수박', '포도', '1'],['사과', '배', '오렌지', '수박', '포도', '1', '2', '3']
2. 배열 복제
1. 일반 복제
사용 : let fruits2 = fruits
출력 : console.log(fruits2) , console.log(fruits2 === fruits)
결과 : ['사과', '배', '오렌지', '수박', '포도'] , true
일반 복제의 경우 copy by value로 fruits2 와 fruits가 같은 것을 확인할 수 있다.
2. 참조 복제
- Spread Operator
사용 :
let fruits2 = [
...fruits
];출력 : console.log(fruits2); , console.log(fruits === fruits2)
결과 : ['사과', '배', '오렌지', '수박', '포도'] , false
기존 배열(fruits)와 같은지 확인해본 결과 false가 된 것을 알 수 있다.
이는 참조한 데이터를 새로운 공간에 복제했기 때문이다.
새로운 데이터? 참조?
위 내용에 대해서는 copy by value 와 copy by reference 를 명확하게 알아야 하므로 다음에 정리할 예정이다.
3. 그 외 각종 함수
1. 배열의 값들을 String으로 묶기
- join() : 배열의 값들을 특정 표현으로 묶어서 String 으로 반환해준다.
파라미터 :join(구분지점 표현 값)
사용 :fruits.join();,fruits.join('/');
출력 :fruits.join();,fruits.join('//');
결과 :사과,배,오렌지,수박,포도,사과//배//오렌지//수박//포도
2. 배열의 값들을 정렬하기
- sort() : 배열의 값을 문자열 변환에 따라 비교하여 정렬한 뒤 반환해준다.
a, b를 비교했을 때
1) a를 b 보다 나중에 정렬하려면 (뒤에두려면) 0보다 큰 숫자를 반환
2) a를 b 보다 먼저 정렬하려면 (앞에두려면) 0보다 작은 숫자를 반환
3) 원래 순서를 그대로 두려면 0을 반환파라미터 : sort(비교할 값1, 비교할 값2)
사용 :
오름차순
fruits.sort((a,b) => {
return a > b ? 1 : -1; // a가 b보다 크면 1을 반환 즉 나중에 정렬이기 때문에 오름차순
})내림차순
fruits.sort((a,b) => {
return a > b ? -1 : 1; // a가 b보다 크면 -1을 반환 즉 먼저 정렬이기 때문에 내림차순
})결과 : ['배', '사과', '수박', '오렌지', '포도'] , ['포도', '오렌지', '수박', '사과', '배']
참고로, sort()는 각 요소의 문자열 변환에 따라 각 문자의 유니 코드 코드 포인트 값에 따라 정렬된다.
3. 배열의 값을 변환
- map() : 배열의 모든 값을 순환하면서 새로운 배열로 반환해준다.
파라미터 :map((배열의 값) => 수행코드)
사용 :
앞에 '신선한' 붙여서 변환
fruits.map((x) => `신선한 : ${x}`);앞에 `신선한` 붙이고, 오렌지라면 예외
fruits.map((x) => {
if(x === '오렌지') return x;
else return `신선한 : ${x}`;
});{} 중괄호 안에 있으면 return을 반드시 사용하는 점 잊지않기 (다른 화살표함수에서도)
결과 : [ '신선한 : 사과', '신선한 : 배', '신선한 : 오렌지', '신선한 : 수박', '신선한 : 포도' ] ,
[ '신선한 : 사과', '신선한 : 배', '오렌지', '신선한 : 수박', '신선한 : 포도' ]
4. 배열에서 값 검색
-
filter() : 배열을 순회하며 참/거짓을 확인하고 값을 저장하고 새로운 배열로 반환해준다.
파라미터 :fruits.filter((배열의 값) => 조건식)
사용 :fruits.filter((x) => x === '포도')
결과 :['포도'] -
find() : 배열을 순회하며 참/거짓을 확인하고 첫 번째 값만 저장하고 반환해준다.
파라미터 :fruits.find((배열의 값) => 조건식)
사용 :fruits.find((x) => x === '포도')
결과 :포도 -
findIndex() : 배열을 순회하며 참/거짓을 확인하고 첫 번째 값의 인덱스만 저장하고 반환해준다.
파라미터 :fruits.findIndex((배열의 값) => 조건식)
사용 :fruits.findIndex((x) => x === '포도')
결과 :4
문자열로 해서 잘 와닿지 않을수 있는데 숫자로 하게되면 확실하게 알 수 있다.
let numbers = [1, 3, 7, 2, 4];
console.log(numbers.filter((x) => x%2 === 0));
console.log(numbers.find((x) => x%2 === 0));출력 결과
2
[ 2, 4 ]5. 배열을 순회하며 연산
- reduce() : 배열의 모든 값을 순회하며 p(previous), n(next) 값들로 로직이 작동되며 반환된다.
파라미터 :reduce((p(현재 값), n(다음 값)) => {...}, 초깃값)
사용 :fruits.reduce((p, n) => p+n, '나는초기');
결과 :나는초기사과배오렌지수박포도
작동 원리
1. 초깃값이 p에 입력
2. 배열의 첫번째 값이 n에 입력
3. 초깃값과 첫번째 값 p+n이 수행
4. p+n이 수행된 값이 다시 p에 입력
5. 배열의 두번째 값이 n에 입력
6. 현재값과 두번째 값 P+n이 수행
7. ... Loop
8. 모든 순회가 종료되면 최종 값 반환reduce() 함수는 사칙연산도 가능하지만 추후 이전 값을 토대로 새로운 로직을 주고 싶을 때 사용할 수 있다.
4. 마무리
더 많은 배열 함수가 있지만 실제로 많이 사용되는 함수(강의 참고)를 위주로 공부해보았다.
Array 함수 문서 에서 더 많은 메서드가 있으니 참고해볼만 하다.
또한 내가 설명하지 못한 부분도 자세하게 나와있다.
