[JavaScript] 배열과 메서드

2022.11.04

💡 오늘의 JavaScript 공부

▶️ 배열

배열 : 순서가 있는 값 여기서 순서는 ( index ) 라고 부르며 값은 ( 요소 - element ) 라고 한다.

[ 11. 10일 전체 복습 ]

순서가 있는 값 이라고 하는 것 보다 여러 개의 값을 순차적으로 나열한 자료구조 라고 하는게 더 이해가 쉬운 것 같다.

let myNum = [ 1, 2, 3, 4, 5]
myNum[0] = 1 , myNum[1] = 2, ....
// 여기서 1,2,3,4,5 가 요소 element
// [0],[1]...이 index

📌 그렇다면 배열은 왜 사용할까?

배열을 사용하는 가장 큰 목적은 대용량의 자료를 쉽게 처리하기 위함이다.

📌 주로 사용하는? for문을 통한 배열의 자료 순회구조

for(let i = 0; i < arr.length; i++){
  console.log(arr[i])
}

배열에는 여러 가지 메서드들이 존재한다.

📌 배열 기본 메서드

🙆‍♂️ Array.isArray( )

Array.isArray() 
// ex ) let myNumber = [ 1, 2, 3, 4, 5 ] 
// typeof myNumber => Object 객체로 뜬다 그래서 type을 확인하려면 
Array.isArray(myNumber) // true 로 확인한다. 

**그럼 배열은 객체인가? **

맞다. 하지만 일반 객체와는 구별되는 독특한 특징이 있다.

바로 값의 순서와 length 프로퍼티 이다. 인덱스로 표현되는 값의 순서와 length 프로퍼티를 갖는 배열은 반복문을 통해 순차적으로 값에 접근하기 적합한 자료구조이다.

배열의 장점은 처음부터 순차적으로 요소에 접근할 수 있고, 마지막부터 역순으로 요소에 접근할 수도 있으며, 특정 위치부터 순차적으로 요소에 접근할 수도 있다는 것이다. 이는 배열이 인덱스, 즉 값의 순서와 length 프로퍼티를 갖기 때문에 가능한 것이다.

단점으로는 정렬되지 않은 배열일 경우 모든요소를 처음부터 차례대로 선형검색 해야하기 때문에 시간복잡도가 커진다. 또한 배열에 요소를 삽입하거나 삭제하는 경우 배열의 요소를 연속적으로 유지하기 위해 요소를 이동시켜야 하는 단점도 있다.

이렇듯 자바스크립트의 배열은 일반적인 배열의 동작을 흉내낸 특수한 객체이다.

🙆‍♂️ Array.length

// ex) let myNumber = [ 1, 2, 3, 4, 5 ] 
myNumber.length // 5 
// if myNumber.length === 0  [ 빈 배열 ]  

// 11월 12일 추가 
const arr = [1,2,3,4,5]
// 만약 arr.length 보다 작은 값을 할당하면 어떻게 될까? 
arr.length = 3 // [1,2,3]
// 그렇다면 arr.length 보다 큰 값을 할당하면? 
arr.length = 7 // [1,2,3,4,5,'','']
arr[5], arr[6] // undefined

📌 배열의 mutable 메서드 [ 원본 데이터가 변할 수 있음 ]

변할수 있으며, 참조타입, 해당 데이터 주소를 찾아서 값을 변경

🙆‍♂️ Array.splice( )

// 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경
let month = ['Jan', 'March', 'April', 'June'];
month.splice(1, 0, 'Feb') // 1번째 인덱스에  0(아무것도 삭제안한다) 'Feb'를 추가
// >> Array ["Jan", "Feb", "March", "April", "June"]

🙆‍♂️ Array.push( )

배열의 맨 뒤에 추가

🙆‍♂️ Array.pop( )

배열의 맨 뒤에서 삭제

🙆‍♂️ Array.unshift( )

배열의 맨 앞에 추가

🙆‍♂️ Array.shift( )

배열의 맨 앞에 삭제

---

포스팅 두번째로 나눠야 할듯함

📌 배열의 Immutable 메서드 [ 원본 데이터 변경 X ]

불변, 원시타입, 해당 데이터 주소와 별개의 새로운 주소에 값이 할당

🙆‍♂️ Array.map( )

// 오늘 공부하면서 가장 재밌고 신기했던 메서드 
// 배열의 모든 요소 각각에 대해 콜백함수를 호출하고, 그 반환값을 모은 새로운 배열을 반환한다. 
let fruit = ["apple", "banana", "coconut", "kiwi"];
let newFruit = fruit.map(a => a.length)
newFruit // [5,6,7,4]

🙆‍♂️ Array.slice( )

// 배열 추출하기 arr.slice(시작점,종료점)
let fruit = ["apple", "banana", "coconut", "kiwi"];
fruit.slice(0) // 0번째 인덱스부터 쭉 ["apple", "banana", "coconut", "kiwi"]
fruit.slice(0,2) // 0번째 인덱스부터 2번째 인덱스 전까지  ["apple", "banana"]
fruit.slice(2,2) // 시작점이 종료점과 같거나 	[]
fruit.slice(3,2) // 시작점이 종료점 보다 크다면 []  빈 배열을 추출한다. 

// 배열 복사하기 
let Newfruit = fruit.slice()
Newfruit.push('Orange')
Newfruit = ["apple", "banana", "coconut", "kiwi","Orange"]
fruit = ["apple", "banana", "coconut", "kiwi"]  // 원본 불변

// 만약 mutable 메서드 사용 
let Newfruit = fruit
Newfruit.push('Orange')
Newfruit = ["apple", "banana", "coconut", "kiwi","Orange"]
fruit = ["apple", "banana", "coconut", "kiwi","Orange"]  // 원본 변함

🙆‍♂️ Array.join( )

// 모든 배열의 요소를 연결해 하나의 문자열로 변환
let answer = ["H","E","L","L","O"]
answer.join(); // "H,E,L,L,O"
answer.join(''); // "HELLO"
answer.join('-'); // "H-E-L-L-O"

🙆‍♂️ Array.indexOf( )

// 문자열 인덱스 찾기 
let fruit = ["apple", "banana", "coconut", "kiwi"];
fruit.indexOf("banana"); // 1
fruit.indexOf("kiwi");   // 3
fruit.indexOf("cat");    // -1 :: 없을 경우
// 그래서 if ( fruit.indexOf !== -1) {
//					return true
//			}else if (fruit.indexOf === -1){
//					return false
//			}						로도 활용가능 => 이 식을 한번에 해결하는것이 Array.includes( )

🙆‍♂️ Array.includes( )

// 문자열 포함여부 확인하기 
let fruit = ["apple", "banana", "coconut", "kiwi"];
fruit.includes('apple') // true
fruit.includes('computor') //false

🙆‍♂️ Array.concat( )

// 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환
let arr1 = ['hello', 'my']
let arr2 = ['name', 'is']
arr1.concat(arr2) // ['hello', 'my', 'name', 'is']

🙆‍♂️ Array.filter( )

// 지정한 콜백의 반환 결과가 true인 요소만 모은 새로운 배열을 반환한다. 
let arr = [1,2,3,4,5,6]
let newArr = arr.filter( a => a % 2 === 0)
console.log(newArr) // [ 2, 4, 6 ]

요약

1. 배열은 반복문을 돌리는데에 굉장히 도움이 많이 된다. ( 문제 풀면서 느낌 )
2. 복잡한 반복문도 배열의 여러가지 메소드로 간편하게 해결이 가능하다.
3. mutable vs Immutable 구분은 굉장히 중요하다.
4. 재미있고 굉장히 유용한 메서드가 많다.

🐥 문제를 풀면서 공부를 하다 보니 무작정 반복문으로만 해결하려했던 내가 멍청해졌다. 구글링을 통해 다양한 메소드를 찾을 수 있었고 반복문으로 해결할땐 10줄이 넘던 코드가 배열 메소드를 사용하니 두줄만에 끝나버리는 일도 있었다. 배열은 실무에서 굉장히 많이 사용되기에 오늘 공부한 메소드들을 제외한 다른 유용한 메소드가 있는지 추가적으로 공부할 필요가 있다.

다음에는 내가 재미있게 풀었던 문제들을 몇가지 뽑아서 정리해보려고 한다.