제수기 - 제발 수업내용을 기억해라

Array

파이썬 list와 유사하다.

배열생성

중첩배열

반복문

Array Method

array metod docs 사이트

단어가 있는지 찾아준다

있으면 0
없으면 -1

거꾸로 센다고 해서 인덱스를 다르게 하지는 않는다.

조건에 맞는 첫번째 요소를 반환

• '멜'이 처음에 오는 걸 찾아주세요
  
• 글자 하나인 거 찾아주세요
  
• findIndex는 인덱스를 반환한다.
  

배열간 연결연산

concat을 쓰면 immutable 연산이 된다. 기존 배열을 바꾸지 않고, 새로운 배열을 주는 것.

배열요소 구분자로 연결(문자열)

sort 정렬

sort는 숫자를 순서대로 정렬해주는데, mutable 연산이다. 기존 배열인 nums까지 바꿔준다.

• [...nums].sort는 immutable 연산이다.

[...nums]는 복사본을 만든다.
sort는 기존 배열을 바꾸니까, 이렇게 복사본을 만든 뒤에 출력하면 복사본만 정렬될 수 있다.

역순정렬

chatCPT//
1. 콜백 함수 사용:
sort 메서드에 전달된 콜백 함수는 배열의 요소를 비교하는 데 사용됩니다.
형식: function(a, b) { return b - a; }
a와 b는 배열의 두 요소입니다.
반환값에 따라 정렬 순서가 결정됩니다:
음수: a가 b보다 앞에 위치.
양수: b가 a보다 앞에 위치.
0: 순서를 변경하지 않음.

2. 내림차순 정렬 구현:
   b - a를 반환하면 큰 값이 앞에 오도록 정렬됩니다.
   예: [5, 4, 3, 2, 1]

3. 전개 연산자([...])의 역할:
   배열 nums를 복사하여 정렬 작업이 원본 배열에 영향을 미치지 않도록 합니다.

4. 코드 동작:

   console.log([...nums].sort(function(a, b) {
   return b - a; // 내림차순
   }));

[...nums]로 복사한 배열을 콜백 함수와 함께 sort()에 전달.
배열이 내림차순으로 정렬된 결과를 반환.

문자열 배열 정렬(사전등재순 정렬)

1. 사전등재순정렬(오름차순)
   sort. 추가 매소드 없으면 기본적으로 오름차순 정렬이다.
   console.log([...arr4].sort());
2. 내림차순 정렬

   console.log([...arr4].sort(function(a, b) {
   if (a > b) return -1;
   if (a < b) return 1;
   return 0;
   }));
   콜백 함수는 두 값을 비교하여 정렬 기준을 정의합니다:
   a > b인 경우, -1을 반환 → a가 b보다 앞에 옵니다.
   a < b인 경우, 1을 반환 → b가 a보다 앞에 옵니다.
   a === b인 경우, 0을 반환 → 순서를 유지합니다.
   문자열의 내림차순을 구현하기 위해 조건문과 반환값을 이용합니다

push | pop | unshift | shift

push : 배열 마지막에 요소 추가
pop : 배열 마지막 요소 제거
unshift : 배열 0번지에 요소 삽입
shift : 배열 0번지 요소 제거

['사과', '딸기', '귤', '멜론', '사과', '아보카도'];

console.log(arr.pop()); : 마지막 요소 '수박' 제거, 제거된 요소 반환
console.log(arr.shift()); // 0번지 요소 '수박' 제거, 제거된 요소 반환

slice

slice : 배열 일부분 잘라내기 (immutable)

splice : 배열 일부분 제거 및 추가 (mutable)

Array Method (Loop) - 반복처리 -

array.forEach(f)
array.filter(f)
array.map(f)
array.reduce(f)

callback 함수 💥

전달된 함수가 다시 내부적으로 호출되는 함수
요소별로 호출되는 함수

arr : 원본 배열에 대한 참조

forEach의 특징:
반환값이 없습니다. 단순히 배열의 요소를 순회하며 작업을 수행합니다.
원본 배열(arr)은 변경되지 않습니다

forEach 메서드
배열의 각 요소에 대해 콜백 함수를 실행
콜백 함수는 다음 세 가지 매개변수를 받을 수 있습니다:
1. item: 현재 처리 중인 배열의 요소.
2. index: 현재 요소의 인덱스(위치).
3. arr: forEach가 호출된 배열 자체(원본 배열).

출력예시

a 0 ['a', 'b', 'c', 'd', 'e']
b 1 ['a', 'b', 'c', 'd', 'e']
c 2 ['a', 'b', 'c', 'd', 'e']
d 3 ['a', 'b', 'c', 'd', 'e']
e 4 ['a', 'b', 'c', 'd', 'e']

• forEach를 사용한 배열 순회
  배열의 각 요소(item)를 확인하면서 조건에 따라 nums 또는 strs배열에 요소를 추가합니다.

조건: typeof item === 'number'

item이 숫자이면 nums 배열에 추가.
아니면 strs 배열에 추가.

최종적으로 두 배열이 출력됩니다:
nums: 숫자로만 구성된 배열.
strs: 문자열로만 구성된 배열.

filter

콜백함수의 반환값이 true인 요소만 새배열로 반환

map

배열의 각요소에 대해 변환결과를 새배열로 반환

map 메서드
map은 배열의 각 요소를 순회하면서 콜백 함수의 결과값으로 새로운 배열을 생성합니다.
반환값이 필수이며, 원본 배열을 변경하지 않고 새로운 배열을 반환합니다.

콜백 함수의 역할

function(item, index, arr) {
return item * item;}

매개변수:
1. item: 현재 처리 중인 배열의 요소.
2. index: 현재 요소의 인덱스(0부터 시작).
3. arr: map 메서드가 호출된 배열(원본 배열).

return 구문:
현재 요소를 제곱한 값을 반환합니다.
반환된 값들이 모여 새로운 배열이 생성됩니다

실행 결과
1. 입력 배열(arr2): [1, 2, 3, 4, 5]
2. 각 요소를 제곱하여 새로운 배열 생성:

최종출력

 const squares = arr2.map(function(item, index, arr){
      return item * item;
    });
    console.log(squares);

reduce

배열 각 요소에 대한 연산을 거친후 딱 하나의 결과값을 반환

• 콜백함수의 첫번째 매개변수 agg: 누적값
• reduce함수의 두번째 매개변수: 초기값

const result = arr2.reduce(function(agg, item, index, arr){
    console.log(agg, item);
    return agg + item;
    }, 0); 
    console.log(result);

reduce를 이용해서 최대값 구하기
const numbers = [12, 34, 3, 5, 100, 74, 98, 204, 99];
초기값을 생략하면, 배열 0번지요소가 초기값이 된다.

    console.log(max_, item);
    return max_ > item ? max_ : item;
    });
    console.log(max);

유사배열

배열과 유사한 객체.
배열이 아니므로 배열메소드 사용불가
부모객체가 Array.prototype이 아닌 경우 (HTMLCollection, NodeList)
- document.getElementsByXXX()
- document.querySelectorAll()

유사 배열(Nodelist)은 배열처럼 보이지만 배열 메서드를 사용할 수 없습니다.
이를 해결하기 위해 Array.from() 또는 Spread Operator(...)를 사용하여 진짜 배열로 변환할 수 있습니다.
변환 후에는 배열의 모든 기능을 사용할 수 있습니다.

1. 유사배열생성

const $buttons = document.querySelectorAll('button');
console.log($buttons);

• document.querySelectorAll은 HTML 문서에서 지정된 선택자('button')에 해당하는 모든 요소를 반환합니다.
• 반환된 결과는 유사 배열(Nodelist) 형태이며, 이는 배열처럼 보이지만 실제로는 배열이 아닙니다.
• 예를 들어, 유사 배열은 배열 메서드(indexOf, map, forEach 등)를 직접 사용할 수 없습니다.
  2.유사배열을 진짜 배열로 변환

const $buttons1 = Array.from($buttons);
const $buttons2 = [...$buttons]; // Spread Operator 사용
console.log($buttons1);
console.log($buttons1.indexOf('zzzz'));

• Array.from():
  유사 배열 또는 이터러블 객체를 배열로 변환합니다.
  이 메서드를 통해 Nodelist를 진짜 배열로 변경할 수 있습니다.

• 전개 연산자(Spread Operator):
  ...는 이터러블 객체의 요소를 개별적으로 분해하여 배열로 생성합니다.
  동일하게 Nodelist를 배열로 변환할 수 있습니다.

변환 후에는 배열 메서드(indexOf, map, filter 등)를 사용할 수 있습니다.
예제에서는 indexOf('zzzz')로 특정 요소의 인덱스를 찾으려 하지만, 배열에 존재하지 않으므로 -1이 출력됩니다.