JS의 배열은 객체이다.
배열은 객체이므로 주의가 많이 필요하다.
배열임을 확인하고 싶을때는 Array.isArray(arr); 를 활용하자.
Array.length
length는 배열의 길이보다는, 배열의 마지막 index라고 생각하자.
arr.length = 0; 으로 하면 배열이 초기화된다.
주의해서 사용하자.
배열 요소에 접근하기
[0], [1] 으로 요소에 접근하는 코드를 지양하자.
input[0], input[1] 의 경우
개선코드 예 1)
const [firstInput, secondInput] = input;
개선코드 예2) 함수에서 받을 때부터 분해하기
function operateTime([firstInput, secondInput].. ) {
...
}
operateTime([1, 2],...)
개선코드 예3) 유틸함수 만들어 사용하기. lodash의 _.head(array) // 첫번째 요소 얻기
function head(arr) {
return arr[0] ?? '없을때처리'
}
function formatDate(targetData) {
const date = head(targetDate.toISOString().split('T'));
const [year, month, day] = date.split('-');
return `${year}년 ${month}월 ${day}일`;
}
유사 배열 객체
예 : 함수 내에서 사용하는 arguments, querySelectAll 엘리먼트 리스트
진짜 배열이 아니기때문에 내부 프로토타입에 배열 내장함수가 없다.
배열로 바꿔준 후 사용한다.
Array.from(arguments).map((arg) => ...)
불변성 (immutable)
원본배열의 불변성을 지키기 위해서는
방법 1. 배열을 복사한다.
function copyArray(originArray) {
const newArray = [ ...originArray ];
return newArray;
}
방법 2. 새로운 배열을 반환하는 메서드들을 활용한다.
filter(), map(), slice() 등
push, unshift등의 함수는 원본 배열을 바꾼다.
for문 배열 고차함수로 리팩토링
임시변수 사용코드
const price = [1000,2000,3000];
function getWonPrice(priceList) {
let temp = [];
for (let i = 0; i < priceList.length; i++) {
temp.push(priceList[i] + '원');
}
return temp;
}
map 배열 고차함수를 이용해서 선언, 명시적으로 리팩토링
const price = [1000,2000,3000];
function getWonPrice(priceList) {
return priceList.map((price) => price + '원');
}
배열 메서드 체이닝 활용하기
체이닝 활용 전 코드
const price = [5000,2000,1000,3000,1500];
const suffixWon = (price) => price + '원';
const isOverOneThousand = (price) => price > 1000;
const ascendingList = (a, b) => a - b;
function getWonPrice(priceList) {
const isOverList = priceList.filter(isOverOneThousand);
const sortList = isOverList.sort(ascendingList);
return isOverList.map(suffixWon)
}
메서드 체이닝 활용 : 명시적, 앞으로 계속 코드가 추가되어도 명확하게 작성할 수 있다.
const price = [5000,2000,1000,3000,1500];
const suffixWon = (price) => price + '원';
const isOverOneThousand = (price) => price > 1000;
const ascendingList = (a, b) => a - b;
function getWonPrice(priceList) {
return priceList
.filter(isOverOneThousand)
.sort(ascendingList)
.map(suffixWon);
}
map vs forEach
forEach는 매 요소마다 함수를 실행한다.
map은 매 요소마다 함수를 실행하고 결과값을 저장해 새로운 배열을 반환한다.
즉,
반환값 없이 배열 요소를 순환하면서 함수 실행만 할 경우는 forEach 사용
새로운 배열을 만들때는 map을 사용한다.
