Array

✅ Array

배열은 여러 개의 변수를 한 번에 선언해 다룰 수 있는 객체타입으로 순서가 있는 리스트이다. [] 대괄호를 사용해 생성하고 내부의 값을 ,(쉼표)로 구분해 입력해야한다. 배열 안의 값을 요소(element)라고 한다. 또한 배열안에는 문자형, 숫자형, 불린형 심지어 객체, 함수 까지 포함할 수 있다.

const fruit = ['apple', 'banna', 'orange']; 
const num = [10, 20, 30];

 

 

✅ 배열 요소에 접근

📍 arr[ index ]

배열의 요소들은 앞에서부터 순서대로 고유 번호가 부여되는데 이를 인덱스(index) 라고 부른다. 순서를 호출 하는것은 인덱싱(indexing) 이라고 하며 인덱스는 0 부터 시작하게 되고 배열을 탐색할때 사용하게 된다.

const fruit = ['apple', 'banna', 'orange'];
const arr = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
]

fruit[0] // 'apple'
furit[3] // undefined

// 8을 호출하고 싶을때
arr[0] // [1, 2, 3]
arr[2][1] // 8

📍 arr.length

배열 내부에 들어 있는 요소의 개수를 확인 할 떄는 length 속성을 사용합니다. length는 '길이' 이기 때문에 index와 다르게 1 부터 시작합니다. length는 문자 이기 때문에 대괄호 안에 따옴표로 묶어서도 사용할 수 있는것

const fruit = ['apple', 'banna', 'orange']; 

fruit.length // 3
fruit['length'] // 3

// 맨 마지막 요소에 접근하고 싶을때
fruit[fruit.length - 1] //  fruit[2] 'orange'

📍 arr.indexOf( element )

괄호 안에 요소를 넣으면 해당 요소의 인덱스를 알 수 있는 메서드이다. 만약 요소가 존재하지 않는다면 -1을 반환한다.

const fruit = ['apple', 'banna', 'orange']; 

fruit.indexOf('banna') // 1
fruit.indexOf('peach') // -1

 

✅ 배열의 특징

1. let arr = [] 

let arr = [10, 20 ,30]

 

2. Arrya() 생성자로 새로운 배열을 만들 수 있다.

• 숫자형 인수가 하나일 경우 그 수만큼의 요소 생성
• 숫자형, 문자형 인수가 여러개일 경우 그 인수를 요소로 전환
• 문자형 인수가 하나일 경우 그 인수를 요소로 전환 (숫자형 외에 모든 원시타입형, 객체 다 동일)

let arr = Array(5)
console.log(arr) // [empty × 5]

lett arr2 = Array(3, 4, 5)
console.log(arr2) // [3, 4, 5]

let arr3 = Array('true')
console.log(arr3) // [true]

 

3. Array(n).fill(n2) n2 가 n개인 배열 생성

let arr = Array(30).fill(10)
console.log(arr)
// (30) [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 
// 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10,
//  10, 10, 10, 10, 10, 10, 10, 10]

 

4.  기존 배열에 요소 추가

let arr = [10, 20, 30]

// length로 추가
arr.length = 10
console.log(arr) // (10) [10, 20, 30, empty × 7]

// 인덱스를 이용한 추가
arr[100] = 'add'
console.log(arr) // (101) [10, 20, 30, empty × 97, 'add']

5. 프로퍼티를 추가하기

let arr = [10, 20, 30]
arr['add'] = 100
console.log(arr) // [10, 20, 30, add: 100] add:100 프로퍼티 생성

arr.add = 100
console.log(arr) // [10, 20, 30, add: 100] add:100 프로퍼티 생성

❗️여기서 의문점 이상태에서 arr.length를 하면 4가 아닌 3이 아님 객체는 length가 세지 못하나?

 

 

✅  배열 메서드

📍 .push()

배열 맨 뒤 요소를 추가

const arr = [1, 2, 3]
arr.push(4)
console.log(arr) //[1, 2, 3, 4]

📍 .pop()

마지막 값을 꺼내고 꺼낸 값을 반환

const arr = [1, 2, 3]
arr.pop() // 3
console.log(arr) // [1, 2]

arr.pop(2) // 2
console.log(arr) // [1]

🤔 그냥 사라지는거 같은데 값이 반환된다는 것은 뭘까? 아래 예시를 보자

const arr = [10, 20 , 30]
let result = arr.shift()

console.log(arr) = [20,30]
console.log(result) = 10 // 사라지지 않고 반환된 값

 

📍 .unshift()

배열 맨 앞 요소를 추가

const arr = [1, 2, 3]
arr.unshift(4)
console.log(4) // [4, 1, 2, 3]

📍 .shift()

첫번째 값을 꺼내고 꺼낸 값을 반환

const arr = [1, 2, 3]
arr.shift()
console.log(arr) // [2, 3]

🤔 배열안의 요소가 계속 변하는데 어떻게 const 상수로 선언할 수 있나? 배열 자체가 변하는게 아니라 배열 안의 요소만 변하기 때문에 가능하다 배열을 회사 요소를 직원들이라 생각하면 쉽다. 직원이 교체된다고 해서 회사가 바뀌는게 아니기 때문이다.

 

 

📍 .splice(start, deleteCount, items)

.splice 메서드는 배열의 기존 요소를 삭제, 교체 또는 새요를 추가하여 배열의 내용을 변경한다

const arr = [1, 2, 3]
arr.splice(1, 0, 4) // 아무것도 삭제하지 않고 인덱스 1에서, 아무것도 삭세하지 않고 4를 넣음
console.log(arr)// [1, 4, 2, 3]

const arr2 = [1, 2, 3];
arr2.splice(1, 0, [10, 20, 30]); //  아무것도 삭제하지 않고 인덱스 1에서 [10, 20, 30]를 넣겠다.
console.log(arr2) // [1, Array(3), 2, 3]

const arr3 = [1, 2, 3];
arr4.splice(1, 0, 10, 20, 30); // 아무것도 삭제하지 않고 인덱스 1에서 10, 20 30를 넣겠다.
consoel.log(arr3) //  [1, 10, 20, 30, 2, 3]

const arr4 = [1, 2, 3];
arr4.splice(1, 0, ...[10, 20, 30]); // 아무것도 삭제하지 않고 인덱스 1에서 10, 20 30를 넣겠다.
consoel.log(arr4) //  [1, 10, 20, 30, 2, 3


// 인수가 2개만 있는 경우
const arr5 = [1, 2, 3, 4, 5]
arr5.splice(2, 2) // 인덱스 2 부터 2개 요소를 삭제, 삽입되는 요소는 없음
console.log(arr5) // [1, 2, 5]

// 인수가 1개만 있는 경우
const arr6 = [1, 2, 3, 4, 5]
arr6.splice(2) // 인덱스 2부터 뒤에 있는 모든걸 삭제
console.log(arr6) // [1, 2]

💡 문제

// 1. 원하는 값 = [10, 1, 2, 3, 20, 30, 40, 1, 2, 3, 50]
const arr = [10, 20, 30, 40, 50]
const x = [1, 2, 3]

//답
arr.splice(1, 0, ...x)
arr.splice(7, 0, ...x)

 

📍 .slice(start, end)

.splice 메서드는 인수로 전달된 범위의 요소들을 복사하여 배열로 반환한다. 원본 배열은 변경되지 않는다.
(splice는 원본 배열을 변경함) slice의 범위는 start ~ end 전 까지

const arr = [10, 20, 30, 40, 50]
let arr2 = arr.slice(1,3) // 인덱스 1 부터 3전까지 반환

console.log(arr) // [10, 20, 30, 40, 50] // 원본파일은 변경되지 않음
console.log(arr2) // [20, 30]

// 인수가 1개인 경우
const arr = [10, 20, 30, 40, 50]
let arr2 = arr.slice(2) // 인덱스 2부터 모두 반환
coonsole.log(arr2) // [30, 40, 50]

// start 인수가 음수인 경우 (음수 값이 있는 경우 인수는 하나만 인수가 2개 입력되면 빈 배열 반환)
const arr = [10, 20, 30, 40, 50]
let arr2 = arr.slice(-1) // 제일 마지막 인덱스 요소 반환
console.log(arr2) // [50]

let arr3 = arr.slice(-3) // 제일 마지막 요소부터 3개 반환
console.log(arr3) // [30, 40, 50]

// 인수를 모두 주지 않았을경우
const arr = [10, 20, 30, 40, 50]
let arr2 = arr.slice() // 인수를 모두 주지 않음
console.log(arr2) // [10, 20, 30, 40, 50] 모든 요소를 복사

 

✅  배열 고차함수

📍 .forEach( 함수 )

forEach() 메소드는 배열의 각 요소에 대해 주어진 함수를 실행합니다. 이 때, 함수는 인자로 배열 요소, 인덱스를 받습니다. forEach() 메소드는 배열의 요소를 순환하면서 해당 요소를 함수로 전달하고, 이 함수가 각 요소에 대해 실행됩니다.

 

for문을 대체하기도 함

const num = [1, 2, 3, 4]
const num2 = []

// for문
for (i = 0; i < num.length; i++){
    num2.push(num[i]);
}

// forEach
num.forEach(function(item){
    num2.push(item)
})

console.log(num2) // [1, 2, 3, 4]

.forEach() 메서드는 주어진 함수를 배열 요소 각각(값, 인덱스, 순회중인 배욜)에 대해 실행하며 순회

const arr = [1, 2, 3, 4, 5]
const arr2 = []

// 값만

arr.forEach(function(item){
    arr2.push(item)
}) 

console.log(arr2) // [1, 2, 3, 4, 5]

// 값과 인덱스
arr.forEach(function(item, index){
    arr2.push(index, item)
}) 

console.log(arr2) // [0, 1, 1, 2, 2, 3, 3, 4, 4, 5]

//값과 인텍스, 배열
arr.forEach(function(item, index, arr){
    arr2.push(index, item, arr)
}) 

console.log(arr2) 
//[0, 1, Array(5), 1, 2, Array(5), 2, 3, Array(5),
3, 4, Array(5), 4, 5, Array(5)

 

📍 .map( 함수 )

map 메서드는 자신이 호출한 모든 요소를 순회하면서 인수로 전달받은 콜백함수를 반복 호출한다. 그리고 콤백함수의 반환값들로 구성된 새로운 배열을 반환한다.

 

🧨 map 사용시 주의 점은 return 이라는 값고 함께 필수로 사용해야함 새로운 값을 반환해줘야 하기 때문에 만약 return 이라는 값을 사용하지 않으면 아무것도 반환하지 않았기 때문에 undefined 만 반환됨

const arr = [1, 2, 3];
const newArr = arr.map(function(item, index) {
  return item * index;
});

console.log(newArr); // [0, 2, 6]

const tip11 = Array(100).fill(0).map((v, i) => i + 1)
console.log(tip11)
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15,
// 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28,
// 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41,
// 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54,
// 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67,
// 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80,
// 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93,
// 94, 95, 96, 97, 98, 99, 100]

🤔 forEach 메서드와 map메서드의 공통점과 차이점은?
     공통점: 배열의 각 요소에 대해 주어진 함수를 실행
     차이점: forEach 메소드의 경우 반환값이 없지만 map 메소드는 새로운 배열을 반환

 

📍 .sort( 함수 )

sort 메서드는 배열의 요소를 정렬한다.  원본 배열을 직접 병경하며 정렬된 배열을 반환한다.

기본적으로 오름차순으로 요소를 배열한다. 또한 원본 배열에 영향을 끼친다. 문자열 같은 경우엔 사전식 정렬을 따른다.

const num1 = [3, 1, 8, 6];
num1.sort()
console.log(num1) // [1, 3, 6, 8]

const avengers = ['아이언맨', '스파이더맨', '헐크', '토르'];
avengers.sort()
console.log(avengers) // ['스파이더맨', '아이언맨', '토르', '헐크']

+) 내림차순으로 하고 싶을땐? 아래 내림차순 공식을 활용

// (a, b) => b - a

const num1 = [3, 1, 8, 6];
num1.sort((a, b) => b - a)
console.log(num1) // [8, 6, 3, 1]

 

📍 .filter( 함수 )

filter 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백함수를 반복 호출한다. 그리고 콜백 함수의 반환값이 true인 요소만 새로운 배열을 반환한다.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
arr.filter(function (el) {
    return el % 2 !== 0
}) //  [1, 3, 5, 7, 9]


Array.from('hello world').filter(v => !["a", "e", "i", "o", "u"].includes(v))
// ['h', 'l', 'l', ' ', 'w', 'r', 'l', 'd']

 

📍 .reduce( 함수 )

reduce 메서드는 자신을 호출한 배열의 보든 요소를 순회하며 인수로 전달받은 콜백함수를 반복 호출한다. 그리고 콜백 함수의 반환값을 다음 순회 시에 콜백 함수의 첫번째 인수로 전달하면서 콜백 함수를 호출하여 하나의 결과값을 만들어 반환한다.

이때 원본 배열은 변경되지 않는다.

const arr10 = [1, 2, 3, 4, 5]
arr10.reduce((a, c) => a + c, 0)

const arr11 = []
arr11.reduce((a, c) => a + c)

const arr14 = [1]
arr14.reduce((a, c) => a + c)

// 0을 항상 넣어주세요.
const arr13 = []
arr13.reduce((a, c) => a + c, 0)