자바스크립트를 다시 한 번 톺아보면서 자료구조 대해 리마인딩 하는 시간을 가져봤다. 객체의 집합체를 자료구조라고 하는데, 배열 또한 자료구조다. 그리고 배열을 만들 때는 왠만하면 동일한 데이터들을 넣을 것을 유의하자 ⭐️
🙂 배열 생성하는 방법
// (1) Array 클래스로 생성
let arr = new Array(3);
console.log(arr) // 라고 입력할 시, 3개의 비어있는 아이템이 있다는 결과값을 볼 수가 있다.
// (2) Static 함수
arr = Array.of(1,2,3,4,5);
// (3) 배열 리터럴 방식
const arrs = [1,2,3,4,5]
// (4) 이터러블 방식
arr = Array.from('hello')
console.log(arr) // 결과값 ---> ['h','e','l','l','o']🔺 배열 추가,삭제 시 유의할 점
- 추가할 때
color[3] = '노랑' - 삭제할 때
delete color[1]
배열을 추가할 때, 나는 맨 뒤로 보내고 싶을 경우 인덱스로 추가하게 되면 그 인덱스 값에 이미 다른 아이템이 들어있다면 그 값이 새로 덮어지게 된다. 그리고 하드코딩 식으로 삭제하게 될 경우엔 그 배열의 인덱스에 빈 값의 아이템이 남아있게 된다. 이렇게 수동적으로 배열을 만들면 굉장히 안좋은 방식이다. 그러니 지금부터 유용하게 사용될 배열의 함수들을 알아보자
배열 함수 (=메서드)
- isArray : 특정 오브젝트가 배열인지 체크해준다.
console.log(Array.isArray(color)); // 결과값 : true- indexOf : 특정한 아이템의 위치를 찾고자 할 때
color.indexOf('노랑')- includes : 배열 안, 특정한 아이템이 있는지 체크
color.includes('노랑')- push : 제일 뒤에 추가
color.push('빨강')- unshift : 제일 앞에 추가
color.unshift('보라')- pop : 제일 뒤에 있는 아이템 제거
color.pop()- shift : 제일 앞에 있는 아이템 제거
color.shift()- splice(자릿수, n개 삭제) : 중간에 추가하거나 삭제
color.splice(1, 1) // [1]의 1개 삭제
color.splice(1, 0, '파랑', '주황') 하나도 삭제하지 않고 추가를 원할 때는 2번째 인자에 0과 그 뒤에 인자에 추가하고 싶은 아이템들을 추가해주면 된다.
splice 하나로 삭제도 되고, 추가도 되고 다양하게 이용할 수 있다.
- slice(시작 자릿수, 끝낼 자릿수) : 잘라진 새로운 배열을 만든다.
color.slice(0, 2); // 0부터 2까지
color.slice(-1); // -는 뒤에서부터가 시작이다- concat : 여러개의 배열을 붙여준다.
const arr1 = [1,2,3];
const arr2 = [4,5,6];
arr1.concat(arr2); // [1,2,3,4,5,6]- reverse() : 순서를 거꾸로 해준다.
const arr4 = arr3.reverse();- flat(배열 풀어줄 수) : 중첩 배열을 하나의 배열로 쫙 펴주기
let arr = [[1,2,3],[4,[5,6]]]
console.log(arr.flat(2)); // [1,2,3,4,[5,6]]
console.log(arr.flat(3)); // [1,2,3,4,5,6]- fill(채울값, 시작, 끝) : 특정한 값으로 배열을 채우기. 시작점만 있을 경우 시작부터 끝까지 다 채워준다.
arr.fill('딸기',0,5);
console.log(arr);- join() : 배열을 문자열로 합쳐준다.
['a','b','c','d','e'] ---> a,b,c,d,e만일에 join(|) 이렇게 할 경우 a | b | c | d | e 이런식으로 출력된다.
📍 배열의 고차함수란 ? (Higher-order function)
- 인자를 함수로 받거나 함수를 반환하는 함수를 고차함수라고 한다.
전달받은 인자를 통해서 함수의 특정한 연산이나 일을 수행한 다음 새로운 값을 리턴해준다. 이것을 함수 내부에서 사이드 이펙트를 없게 만들어 낸다는 뜻이다. 함수 내부에서는 외부에 상태를 변경하지 않으며, 이렇게 순수 함수로 만들어짐으로써 에러를 줄이고 가독성을 높일 수 있다.
🔴 장점
- 데이터를 변경하지 않아도됨
- 변수 사용 x
- 조건문과 반복문을 사용 안해도됨
🌀 배열에서 사용할 수 있는 고차함수
만약 고차함수가 없었더라면 배열의 어떠한 값을 추출하기 위해 for문을 사용해서 조건문과 필요에 따라 또 반복문을 작성해야 했을 것이다. 그런데 이것을 간편하게 해주는 것이 '함수형 프로그래밍 = 고차함수'이다.
- forEach() : 들어있는 모든 요소들의 배열을 순회해주고 이 함수의 인자에는 콜백함수를 정의한다. (콜백함수란 ? 다른 함수의 인자로써 이용되어 실행 가능한 코드를 의미하고, 어떤 이벤트에 의해 호출되는 함수)
fruits.forEach((value) => {
console.log(value)
})
// 한줄밖에 없다면 { } 중괄호 생략 가능
fruits.forEach((value) => console.log(value))- find() : 제일 먼저 조건에 맞는 아이템을 찾을 때 사용한다.
이거와 비슷한 고차함수로는findIndex가 있다.
findIndex는 제일 먼저 조건에 맞는 인덱스를 반환 시켜준다.
const item1 = { name: '우유', price: 2000 }
const item2 = { name: '쿠키', price: 3000 }
const item3 = { name: '김밥', price: 1000 }
const product = [item1, item2, item3]
// 전달받은 인자의 이름이 쿠키인지 ??
const found = product.find((value) => {
return value.name === '쿠키';
})
console.log(found)우리가 찾고자 하는 조건이 맞으면 이에 해당하는 아이템을 바로 반환해주는 형식이다. 한줄 코드는 아래와 같이 심플하게 표현할 수 있다.
const found = product.find((value) => value.name === '쿠키')- some() : 배열의 아이템들이 부분적으로 조건(콜백함수)에 맞는지 확인하는 함수
const result = products.some((item) => item.name === '쿠키');답은 true/false 중 하나로 boolearn 형태로 나온다.
- every() : 배열의 아이템들이 전부 조건(콜백함수)에 맞는지 확인하는 함수
const result = products.every((item) => item.name === '쿠키');답은 true/false 중 하나로 boolearn 형태로 나온다.
- filter() : 조건에 맞는 모든 아이템들을 새로운 배열로 반환
const result = products.filter((item) => item.name === '쿠키');- map : 배열의 아이템들을 각각 다른 아이템으로 매핑하여 변환해서 새로운 배열로 생성해주는 함수
const nums = [1,2,3];
const result = nums.map((item) => item * 2);정말 자주 사용하는 고차함수 map을 이용하여 특정한 요소를 다른 요소로 변환할 수가 있다.
- flatmap : 중첩된 배열을 쫙 펴준다.
result = nums.flatMap((item) => [1, 2]);- sort : 배열의 아이템들을 정렬해준다. 문자열 형태의 오름차순으로 요소를 정렬하고 기존의 배열을 변경해준다. 주의 해야할 점이 숫자도 리턴할 때 문자열로 취급해서 정렬된다.
👇 그래서 숫자를 정렬 할 때는 ?
const numbers = [0,6,12,9];
numbers.sort((a,b) => a - b); // 숫자는 이런식으로 해줘야 한다.리턴값이 0보다 작다면 a가 앞으로 정렬 - 오름차순
리턴값이 0보다 크다면 b가 앞으로 정렬 - 내림차순
- reduce : 배열의 요소들을 결론적으로 하나의 값으로 만들어준다.
[1,2,3,4,5].reduce((sum, value) => {
sum += value;
return sum;
}, 0)reduce((sum, value) ---> 첫 번째 인자는 계속 더해질 값을 저장할 값과, 두 번째 인자로는 각각의 요소마다 전달받을 인자로 콜백함수를 만든다. 콜백함수를 만들었다면! 첫 번째 인자의 초기값을 두 번째에 기입할 수 있다. (0을 의미)
