[js] 배열

배열이란 ?

여러 값을 하나의 변수에 담고 싶을 때 사용
들어온 순서대로 저장하는 자료 구조
배열은 대괄호 []로 정의되며, 각 요소는 쉼표로 구분된다.

인덱스

배열에 들어간 아이템에는 모두 인덱스 번호가 부여된다.
인덱스를 사용하여 개별 요소에 접근할 수 있다.
첫 번째 요소는 인덱스 0으로 시작한다.

배열 함수

JavaScript 배열은 동적이다.
이것은 배열의 크기가 미리 정해져 있지 않으며,
필요에 따라 요소를 추가하거나 제거할 수 있다는 것을 의미한다.
배열에 저장된 각 값은 일반적으로 "요소(Element)" 또는 "아이템(Item)"이라고 부른다.

배열 선언/인덱스 예시

let numbers = [1, 2, 3, 4, 5];
let fruits = ['apple', 'banana', 'orange'];
let mixedArray = [1, 'hello', true, { name: 'John' }];

// 배열 호출
console.log(fruits); // [ 'apple', 'banana', 'orange' ]

// 인덱스를 사용해 개별 요소에 접근 
console.log(numbers[0]); // 출력: 1
console.log(fruits[1]);  // 출력: 'banana'

// 인덱스를 사용해 값 변경
fruits[0] = "cherry" 
console.log(fruits) // [ 'cherry', 'banana', 'orange' ]

배열 함수 예시

fruits.pop()
console.log(fruits) // [ 'cherry', 'banana' ]

fruits.push("pineapple")
console.log(fruits) // [ 'cherry', 'banana', 'pineapple' ]

console.log(fruits.includes("cherry")) // true
console.log(fruits.includes("pear")) // false

console.log(fruits.indexOf("cherry")) // 0

// 1부터 잘린 값이 반환됨
console.log(fruits.slice(1)) // [ 'banana', 'pineapple' ]

fruits.push("apple")
console.log(fruits) // [ 'cherry', 'banana', 'pineapple', 'apple' ]

// 1부터 3(미포함)까지를 잘라 반환 - > 끝점 전까지를 자른다 - > 1,2를 잘른 것 !
console.log(fruits.slice(1,3)) // [ 'banana', 'pineapple' ]

// splice() : 시작점으로부터 몇개의 아이템을 제거할 지 정하기 
// 시작점 2 , 개수 1 - > 인덱스 2번에 해당하는 값을 자른다는 의미
fruits.splice(2,1)
// 잘린 후의 배열 확인 
console.log(fruits) // [ 'cherry', 'banana', 'apple' ]
fruits.splice(2,2)  // 2부터 2개의 값을 자름 
console.log(fruits) // [ 'cherry', 'banana' ] 

// numbers = [1,2,3,4,5] 
numbers.slice(1,3)

// 실제로 잘린 게 아님 !
console.log(numbers) // [ 1, 2, 3, 4, 5 ]

// numbers.slice(1,3) 의 값을 출력하고 싶다면 변수에 담아서 출력
let a = numbers.slice(1,3)
console.log(a)  // [ 2, 3 ]

slide/splice 차이

slice는 기존의 배열을 건들이지 않고 잘른 아이템들로 구성된 새로운 배열을 만듦
splice는 실제로 기존 배열이 잘림

기존 배열을 바꿔야 하면 splice,
잘린 값을 빼서 새 배열을 만들고 싶으면 slice 활용

💡 추가로 궁금한 것

배열 문제 중
동물이라는 배열이 있고 이 배열 안에는 영어로 동물명이 잔뜩 들어가 있다.
이 배열에서 "B"로 시작되는 아이템인 "Baboon"부터 "Bison"까지
가져와 새로운 배열에 저장해보는 문제가 있었는데

내가 시도했던 방법은

1. 제시된 아이템의 인덱스 번호 구하기

console.log(animals.indexOf("Baboon")) //8 
console.log(animals.indexOf("Bison"))  //15

2. 제시된 아이템의 시작,끝+1로 slice 후 새로운 변수에 담기

let animals2 = animals.slice(8, 16)
console.log(animals2)

이렇게 풀었고 추가로 궁금했던 건

만약 B로 시작되는 아이템이 뭔지 모를 때 아이템 찾는 방법이었다.

검색해서 찾은 방법

let animalsStartingWithB = animals.filter(item => item.startsWith("B"));
console.log(animalsStartingWithB);

배열에서 "B"로 시작하는 아이템들을 필터링 - > 새로운 배열에 저장 - > 새로운 배열 출력

• 배열을 순회하면서 조건에 맞는 아이템을 찾을 수 있다.
• 배열의 인덱스를 몰라도 같은 결과를 출력한다.

filter 메서드

자바스크립트에서 배열에서 특정 조건을 만족하는 요소를 찾는 가장 간단한 방법

filter 메서드는 배열에서 지정된 함수의 반환 값이
true인 요소만 모아 새로운 배열을 만든다.

예시 ) animals 배열에서 n으로 끝나는 동물 구하기 !

let animals = [
    "Cat",
    "Elephant",
    "Lion",
    "Tiger",
    "Giraffe",
    "Monkey",
    "Zebra",
    "Bear",
    "Dog",
    "Deer",
    "Duck",
    "Dolphin",
    "Penguin",
    "Snake",
    "Kangaroo",
    "Hippopotamus",
    "Owl"
  ];

 let x = animals.filter(item => item.endsWith("n"));
  console.log(x);  // [ 'Lion', 'Dolphin', 'Penguin' ]

코드 설명

• endsWith 메서드를 사용하여 동물 이름이 "n"으로 끝나는지 확인
• 문자열이 지정한 문자열로 끝나면 true를 반환
• filter 메서드를 사용하여 해당 조건을 만족하는 동물들만 새로운 배열에 담는다.

화살표 함수

화살표(=>)는 ES6(JavaScript의 최신 버전)에서 도입된
화살표 함수(arrow function)의 구문으로 함수를 간결하게 정의하는 방법 중 하나이다.

공식 문서 참고하기
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

하드코딩 조심 ... !

++ 내가 처음 풀었던 문제 방식중에 하드코딩을 했던 것이 있었다.

console.log(animals.indexOf("Baboon")) //8 
console.log(animals.indexOf("Bison"))  //15

let animals2 = animals.slice(8, 16)
console.log(animals2)

이렇게 해서 풀었었는데 이 방법으로도 문제에 대한 답은 맞지만
배열에서 변화가 있을 경우에는 깨지는 코드가 된다.
아래와 같이 변경해서 사용하자 !!

let newarr = animals.slice(animals.indexOf("Baboon"),animals.indexOf("Bison")+1)

let start = animals.indexOf("Baboon")
let end = animals.indexOf("Bison")
let newArr = animals.slice(start, end+1)
console.log(newArr)

2번처럼 변수에 담아서 사용하는 방법도 있다.

1,2번처럼 직접 인덱스 값을 쓰지 않고 사용하기 !!!
하드 코딩은 지양하자 .. 얍 !

+++ ⚡ 스터디의 어떤 분께서는 이렇게 푸셨다.

let array = []
for(let i=0; i<animals.length; i++){
    if(animals[i].charAt(0) == "B"){
        array.push(animals[i])
    }
}

다음에 배울 for문을 활용하셔서 푸셨는데
이 방법이 나도 좋다고 느껴서 for문을 익혀서
잘 활용해보자 !!!

스터디하니까 좋은 점이 하나의 문제에서
다양한 답이 도출되니까 한 번 더 생각하게 하고
궁금하게 하고 내가 생각하지 못한 방향으로도
알려주어서 너무 필요했던 시간들인 것 같다 🌞

남은 일정들도 빠이팅 !!!