Array

배열은 값의 목록으로 값마다 번호가 매겨져 있다.
자바스크립트의 배열은 Array 객체이며 객체로 배열의 기능을 가상으로 흉내 낸 것이다. Array 객체는 배열의 인덱스를 문자열로 변환하여 그것을 프로퍼티로 이용한다.

배열에서 가장 중요한 것은 메서드! 매서드에 익숙해질수록 코드는 간결하고 이해가 쉬워진다! 메서드에 익숙해지자!

배열의 선언

배열 리터럴

const evens = [2,4,6,8];

[...]부분이 배열 리터럴이며 배열 값 하나를 배열 요소라고 부른다.
배열 요소에 왼쪽부터 순서대로 0,1,2,...이라는 번호가 매겨져있는데, 이 번호를 인덱스라고 부른다

Array생성자

const evens = new Array(2,4,6,8);

lenght프로퍼티

배열의 lenght프로퍼티에는 배열 요소의 최대 인덱스 값 + 1이 담겨있다.

const evens = [2,4,6,8];
console.log(evens.lenght); // 4
console.log(evens[5]) // undefind

배열 메서드

수정 메서드는 원본 배열을 수정한다.
접근자 메서드는 배열을 다른 형태로 가공한 새로운 배열을 반환하며, 원본배열은 수정하지 않는다. (별표 오백개⭐️⭐️⭐️⭐️⭐️⭐️)

둘의 차이점을 잘 비교하여 공부하자!!!!

push 메서드 (수정메서드)

배열 마지막에 하나 이상의 요소를 추가한 다음 그 배열의 길이를 반환한다.

const a = ["a","b","c"];
a.push("d");

console.log(a) // a ["a","b","c","d"]

pop 메서드 (수정메서드)

배열의 마지막 요소를 잘라내어 반환한다.

const a = ["a","b","c"];
a.pop();

console.log(a) // a ["a","b"]

shift 메서드 (수정메서드)

배열의 첫 번째 요소를 제거한 후 모든 인덱스를 왼쪽으로 이동시킨다.
반환값은 삭제된 인덱스의 값이다

const a = ["a","b","c"];
a.shift();

console.log(a) // a ["b","c"]

unshift 메서드 (수정메서드)

배열 앞부분에 요소를 한 개ㅣ 이상 추가한 후 모든 인덱스를 오른쪽으로 이동시킨다.

const a = ["a","b","c"];
a.unshift("x");

console.log(a) // a ["x","a","b","c"]

splice 메서드 (수정메서드)

let arr = ["I", "go", "home"];

delete arr[1]; // "go"를 삭제합니다.

console.log( arr[1] ); // undefined

// delete를 써서 요소를 지우고 난 후 배열 --> arr = ["I",  , "home"];
console.log( arr.length ); // 3

delete를 통해 배열의 요소를 지웠지만 배열의 길이는 여전히 3이다.
그럼 배열의 요소를 지운만큼 배열의 길이가 짧아지려면 어떻게 할까?

splice를 사용하면 된다!

arr.splice(index,deleteCount,"elem1"..."elemN")

• index : 배열을 수정하기 시작할 위치를 가르키는 인덱스. 이 값이 배열길이보다 크면 배열 마지막을 시작위치로 간주한다. 이 값이 음수이면 이 값에 배열 길이를 더한 값을 시작위치로 간주한다.
• deleteCount : 배열에서 삭제할 요소의 개수. 0을 넘기면 어떠한 요소도 삭제하지 않는다. 이때 인수로 새로운 요소를 반드시 한 개는 넘겨야한다.
• elem : 삽입할 요소의 값을 쉼표로 구분해서 넘긴다.

const arry = [1, 2, 3, 4];
arry.splice(0, 2, "A", "B");
console.log(arry); // ["A", "B", 3, 4]

또한, splice는 삭제된 요소로 구성된 배열을 반환한다.

const arry = [1, 2, 3, 4];
const removed = arry.splice(0, 2, "A", "B");

console.log(arry); // ["A", "B", 3, 4]
console.log(removed); // [1,2]

sort 메서드 (수정메서드)

split 메서드 (접근자 메서드, 문자열 -> 배열)

문자열을 일정한 구분자로 잘라 각각의 문자열을 배열로 저장한다

let names = "A, B, C";
let arr = names.split(", ");

console.log(arr); // ["A", "B", "C"]

빈문자열을 구분자로 지정하면 문자열을 글자 단위로 구분 할 수도 있다.

let str = "test";

console.log(str.split('')); // [t,e,s,t]

join 메서드 (접근자 메서드, 배열 -> 문자열)

split와 반대로 배열의 모든 요소값을 문자열로 바꾼 후에 인수로 받은 문자로 연결해 반환한다.

let numbers = [1, 2, 3, 4, 5];
const result = numbers.join("");

console.log(result); // 12345

concat 메서드 (접근자 메서드, 배열 -> 배열)

인수로 받은 값을 그 배열의 요소로 추가해 새로운 배열을 생성한다.

let arr = [1, 2];

// arr의 요소 모두와 [3,4]의 요소 모두를 한데 모은 새로운 배열이 만들어진다.
console.log(arr.concat([3, 4])); // 1,2,3,4

// arr의 요소 모두와 [3,4]의 요소 모두, [5,6]의 요소 모두를 모은 새로운 배열이 만들어진다.
console.log(arr.concat([3, 4], [5, 6])); // 1,2,3,4,5,6

// arr의 요소 모두와 [3,4]의 요소 모두, 5와 6을 한데 모은 새로운 배열이 만들어진다.
console.log(arr.concat([3, 4], 5, 6)); // 1,2,3,4,5,6

// 배열은 한 번만 펼쳐서 추가한다
console.log(arr.concat([3, 4], [5, [6, 7]]); // 1,2,3,4,5,[6,7]

slice 메서드 (접근자 메서드, 배열 -> 배열)

splice메서드와 반대 개념!
배열의 삭제되어진 요소를 새로운 배열을 반환한다.

arr.slice(begin,end,"elem1"..."elemN")

• 첫 번째 인수(begin) : 요소를 꺼낼 시작 위치를 뜻하는 인덱스
• 두 번째 인수(end) : 요소를 꺼낼 마지막 위치를 뜻하는 인덱스. end가 가르키는 요소의 바로 이전 요소까지 잘라낸다

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

console.log(arry.slice(0, 2)); // [1,2]
console.log(arry); // [1, 2, 3, 4]

indexOf와 lastIndexOf 메서드 (배열탐색 메서드)

배열 안에서 인수로 지정한 값을 검색해서 가정 먼저 찾은 요소의 인덱스를 반환한다. 찾지 못했을 때는 -1을 반환한다.

• indexOf메서드는 인덱스가 작은 쪽부터 순서대로 검색하고
• lastIndexOf메서드는 인덱스가 큰 쪽부터 역순으로 검색한다.

indexOf or lastIndexOf (searchValue,startIndex)

• 첫 번째 인수 : 검색 할 값
• 두 번째 인수 : 검색을 시작할 인덱스, 생략하면 0으로 간주한다

const arry = ["A", "B", "C", "C", "D"];

console.log(arry.indexOf("C")); // 2
console.log(arry.lastIndexOf("C")); // 3

find와 findIndex 메서드 (배열탐색 메서드)

객체로 이루어진 배열에서 특정 조건에 부합하는 객체를 배열내에서 찾을 수 있다.

let result = arr.find(function(item, index, array) {
   // true가 반환되면 반복이 멈추고 해당 요소를 반환합니다.
   // 조건에 해당하는 요소가 없으면 undefined를 반환합니다.
});

• item - 함수를 호출 할 요소
• index - 요소의 인덱스
• array - 배열 자기 자신

let users = [
  { id: 1, name: "John" },
  { id: 2, name: "Pete" },
  { id: 3, name: "Mary" }
];

let user = users.find((item) => item.id === 1);

console.log(user); // {id:1, name:"John"}
console.log(user.name); // John

• findIndex는 find와 동일한 일을 하나, 조건에 맞는 요소를 반환하는 대신 해당 요소의 인덱스를 반환한다는 점이 다릅니다. 조건에 맞는 요소가 없으면 -1이 반환된다.

filter 메서드 (배열탐색 메서드)

find메서드는 함수의 반환 갑을 true로 만드는 단 하나의 요소만을 찾는다.
조건을 충족하는 요소가 여러개라면 filter를 사용하면 된다.
find와 문법이 유사하지만, 조건에 맞는 요소 전체를 담은 배열을 반환한다는 점이 차이점이다

let results = arr.filter(function(item, index, array) {
   // 조건을 충족하는 요소는 results에 순차적으로 더해집니다.
   // 조건을 충족하는 요소가 하나도 없으면 빈 배열이 반환됩니다.
});

let users = [
  { id: 1, name: "John" },
  { id: 2, name: "Pete" },
  { id: 3, name: "Mary" }
];

// 앞쪽 사용자 두 명을 반환한다.
let someUsers = users.filter((item) => item.id < 3);

console.log(someUsers.length); // 2
console.log(someUsers); // [Object,Object]

forEach 메서드(반복 메서드)

• 첫 번째 인수 (value) : 현재 처리하고 있는 배열 요소의 값
• 두 번째 인수 (index) : 현재 처리하고 있는 배열 요소의 인덱스
• 세 번째 인수 (array) : 메서드가 적용되는 배열의 참조

const arry = [1, 2, 3, 4, 5];
let result = 0;
arry.forEach((v) => (result += v));

console.log(result); // 15

forEach는 return이 없다. 즉, callback 함수에 의해서 어떤 결과물을 내놓고 싶으면 함수 밖의 변수를 사용해야한다.

map 메서드 (반복 메서드)

인수로 받은 함수를 배열의 요소로 한 번씩 실행하며, 마지막에는 그 함수가 반환한 값으로 새로운 배열을 생성한다. map 메서드의 인수로 넘기는 함수는 반드시 값을 반환해야 한다

const arry = [1, 2, 3, 4, 5];
const arrydouble = arry.map((x) => x * 2);

console.log(arrydouble);
console.log(arry);

reduce메서드 (반복 메서드)

배열의 첫 번째 요소부터 마지막 요소까지의 합성 곱을 처리한다.
여기서 합성 곱 처리란 배열 요소 하나를 함수로 처리한 후에 그 반환값을 다음 번 요소를 처리할 때 함수의 입력 값으로 사용하는 처리방법이다

😿 그렇다 정의를 정리해놨지만 무슨말인지 모르겠다!
차근차근 하나씩 살펴보자!
절대 쉬운개념이 아니다!

const a = [1,2,3,4,5];

a.reduce((prev,cur)=>{
  return prev+cur
},0)

⭐️ prev 을 누적(계산)값, cur을 현재값이라고 생각하자!
또 0은 초기값이다
0을 생략할 경우 배열의 첫번째 인덱스가 초기값이 된다!⭐️

계산값 = 0 (초기값으로 선언해준 값) , 현재값 = 1 ,누적값 1
계산값 = 1, 현재값 = 2, 누적값 = 3
계산값 = 3, 현재값 3, 누적값 = 6
계산값 = 6, 현재값 4, 누적값 = 10
누적값 = 10, 현재값 = 5, 누적값 = 15

만약에, 초기값을 100으로 설정할 경우 초기값으로 선언해준 값이 100이기 떄문에 총 누적값은 115가 나온다!

이제, 좀 더 실용적인 예제를 알아보자!
reduce는 정말정말 많은 곳에서 쓰일 수 있다!

다음 배열에서 성인만 뽑아 새로운 배열을 만들어보자

let userList =  [
  {name: "hojung", age:19},
  {name:"jjung", age:22},
  {name:"choi", age:17},
  {name:"hoo", age:25}
]

let result = userList.reduce((prev, cur) => {
  if (cur.age >= 20) {
    prev.push(cur.name);
  }
  return prev;
}, []);

console.log(result);

초기값 = [], 현재값의 age가 19이므로 조건충족 X
계산값 = [] , 현재값의 age가 22이므로 조건충족O psuh
계산값 = ["hojung"] , 현재값의 age가 17이므로 조건충족X
계산값 = ["hojung"], 현재값의 age가 25이므로 조건충족O push

📌 TMI

생각보다 많은 시간이 걸렸던 배열 메서드 정리...😵
어느정도는 외워야할거같고 어느정도는 많이 써봐야 할 것 같다
알고리즘을 푸는데, 리액트에서 굉장이 많이 쓰인다고 해서 시간이 오래걸려도 메서드 하나씩 온전히 이해하려고 노력했다! 시간이 많이 걸린만큼 얻는게 많겠지 👍🏻