[JavaScript] Ch06. 표준 내장 객체(2)

06. 배열

1.

// 배열의 길이(숫자)를 반환 (그 배열 데이터가 가지고 있는 아이템의 개수)

const arr = ['A', 'B', 'C']
console.log(arr.length)  //3

// .at()
// 대상 배열을 인덱싱한다
// 음수 값을 사용하면 뒤에서부터 인덱싱한다. 

const arr = ['A', 'B', 'C', 'D']
console.log(arr[0])  // A
console.log(arr.at(0)) // A

console.log(arr[arr.length-1])
console.log(arr.at(-1))

// .concat()
// 대상 배열과 주어진 배열을 병합해 새로운 배열을 반환
 
const arr1 = ['A', 'B', 'C']
const arr2 = ['D', 'E', 'F']
const arr3 = arr1.concat(arr2)
const arr4 = [...arr1, ...arr2] // 전개 연산자와 concat과 동일 

console.log(arr1)
console.log(arr2)
console.log(arr3)

// .every()
// 대상 배열의 모든 요소가 콜백(하나의 함수데이터, 함수의 인수로 사용되는 또 다른 함수) 테스트에서 참(Truthy)을 반환하는지 확인

const arr = [1,2,3,4]
const isValid = arr.every(item  => item < 5)

console.log(isValid)

// .filter()
// 주어진 콜백 테스트를 통과(참(Truthy)을 반환)하는 모든 요소(베열 안에 있는 들어있는 각각의 아이템)를 새로운 배열로 반환
// 모든 요소가 테스트를 통과하지 못하면 빈 배열을 반환

const numbers = [1,20,7,9,104,0,58]
const filteredNumbers = numbers.filter(number => number <30)

console.log(filteredNumbers) 

const users = [
    {name : 'Neo', age:85},
    {name : 'Amy', age:22},
    {name : 'Lewis', age:11}
]

const adults = users.filter(user => {
    return user.age >= 19
})
console.log(adults) // Neo와 Amy 객체 데이터가 출력된다. 

2.

// .find()
// 대상 배열에서 콜백 테스트를 통과하는 첫 번째 요소를 반환

const arr = [5,8,130,12,44]
const foundItem = arr.find(item => item > 10)

console.log(foundItem) // 130

const users = [
    {name:'Neo', age:85},
    {name:'Amy', age:22},
    {name:'Lewis', age:11}

]

const foundUser = users.find(user => user.name ==='Amy')
console.log(foundUser)

// .findIndex()
// 대상 배열에서 콜백 테스트를 통과하는 첫 번째 요소의 인덱스를 반환

const arr = [5,8,130,12,44]
//           0 1 2   3  4
const index = arr.findIndex(item => item > 10)
print(index) // 2

// .flat()
// 대상 배열의 모든 하위 배열을 지정한 깊이(Depth)까지 이어붙인 새로운 배열을 생성
// 길이의 기본값은 '1'입니다

const arr = [1, 2, [3,4]]
console.log(arr.flat()) // [1,2,3,4] (하위 배열까지 이어붙임)
// 만약 원본 배열에 배열데이터가 2개있다. -> flat(2)


console.log(arr.flat(Infinity)) // 모두 배열을 합침

console.log(arr) // 원본 그대로

// .forEach()
// 대상 배열의 길이만틈 주어진 콜백을 생성한다

const arr = ['A', 'B', 'C']

arr.forEach(item => console.log(item))

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

• forEach는 중간에 반복을 종료하고 싶더라도 종료할 수 없으며, 꼭 콜백을 아이템의 개수만큼 실행해야 한다.
• for 반복문은 중간에 종료할 수 있다.
  --> 반복문 내부에서 조건문을 추가하여 break

// .includes()
// 대상 배열이 특정 요소를 포함하고 있는지 확인

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

js에서의 데이터

--> 참조형 데이터는 생긴 모양이 같더라도 서로 다른 데이터일 수 있다.

---> 모양이 아닌 , 변수로 같은지 다른지 . 포함되어 있는지 확인해야 한다.

3.

// .join()
// 대상 배열의 모든 요소를 구분자로 연결한 문자를 반환

 const arr = ['Apple', 'banana', 'Cherry']
 console.log(arr.join()) // Apple,banana,Cherry
 console.log(arr.join(', ')) // Apple, banana, Cherry
 console.log(arr.join('/')) // Apple/banana/Cherry

 // map()
 // 대상 배열의 길이만큼 주어진 콜백을 실행하고, 콜백의 반환 값을 모아 새로운 배열을 반환

 const numbers = [1,2,3,4]
 const newNumbers = numbers.map(item => item * 2)

 console.log(newNumbers)  // [2,4,6,8]
 console.log(numbers)  // [1,2,3,4]

 // .pop()
 // 대상 배열에서 마지막 요소를 제거하고 그 요소를 반환
// 대상 배열 원본이 변경!!!!
const fruits = ['Apple', 'Banana', 'Cherry']

console.log(fruits.pop()) // ['Apple', 'Banana']
console.log(fruits) // ['Apple', 'Banana']

// .push() (밀어넣다.)
// 대상 배열의 마지막 위치에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환
// 대상 배열 원본이 변경된다.

const fruits = ['Apple', 'Banana', 'Cherry']
const newLength = fruits.push('Orange')

console.log(newLength) // 4 (새로운 Length 값)
console.log(fruits) //  ['Apple', 'Banana', 'Cherry', 'Orange']

fruits.push('Mango', 'Strawberry')
console.log(fruits)

// .reduce()
// 대상 배열의 길이만큼 주어진 콜백을 실행하고, 마지막에 호출되는 콜백의 반환 값을 반환한다.
// 각 콜백의 반환 값은 다음 콜백으로 전달

const numbers = [1,2,3]
const sum = numbers.reduce((acc, cur) => {
    return acc + cur
    }, 0)

    console.log(sum) // 6

4.

// .reverse()
// 대상 배열의 순서를 반전
// 대상 배열 원본 변경

const arr = ['A', 'B', 'C']
const reversed = arr.reverse()

console.log(reversed) // ['C', 'B', 'A']
console.log(arr)   // ['C', 'B', 'A']

// .shift()
// 대상 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환
// 대상 배열 원본 변경

 const arr1 = ['A', 'B', 'C']
 
 console.log(arr1.shift())   // A
 console.log(arr) // ['B', 'C']

 // .slice() 
// 대상 배열의 일부를 추출해 새로운 배열을 반환
// 두 번째 인수 직전까지 추출하고, 두 번째 인수를 생략하면 대상 배열의 끝까지 추출

const arr2 = ['A', 'B', 'C', 'D', 'E', 'F', 'G']

console.lof(arr2.slice(0,3)) // ['A', 'B', 'C']
console.lof(arr2.slice(4,-1)) // ['E', 'F']
console.lof(arr2.slice(4)) //['E', 'F', 'G']
console.lof(arr2.slice(arr)) //  ['A', 'B', 'C', 'D', 'E', 'F', 'G']

// .sum()
// 대상 배열의 어떤 요소라도 콜백 테스트를 통과하는지 확인
 
const arr = [1,2,3,4]
const isvalid = arr.some(item => item >3)

console.log(isvalid) // true (4 데이터 하나 통과)
// 모든 테스트를 통과하지 못 한다면, false 반환
// every 메소드는 모든 콜백 테스트가 통과하는지 확인. 

// .sort()
// 대상 배열을 콜백의 반환 값(음수, 양수, 0)에 따라 정렬
// 콜백을 제공하지 않으면, 요소를 문자열로 변환하고 유니코드 코드 포인트 순서로 정렬
// 대상 배열 원본이 변경

 const numbers = [4,17,2,103,3,1,0]
 numbers.sort()
 console.log(numbers) 

 numbers.sort((a,b)  => a-b ) // -가 나오면 a가 더크다고 생각하고 정렬
 console.log(numbers)

 numbers.some((a,b) => b -a) // 큰 숫자부터 정렬 
console.log(numbers)

• 반환되는 값이 0이라면 a,b가 같다고 판단하고 정렬을 보류하고 다른값을 확인해서 정렬의 상태를 만든다.
• a -b : 작은 값부터 정렬
• b -a : 큰 값부터 정렬

// .splice()
// 대상 배열에 요소를 추가하거나 삭제하거나 교체합니다
// 대상 배열 원본이 변경

const arr = ['A', 'B', 'C']
arr.splice(2,0,'X') // 요소를 추가삭제교체하고자하는 인덱스 번호, 아이템을 삭제하고자 하는 개수, 세번째 인수로 들어가는 X
// 'C'문자가 밀려나고 그 자리에 'X'가 추가된다.

// 삭제
arr.splice(1, 1) 
console.log(arr) // ['A', 'C' ]


// 삭제
arr.splice(1, 2) 
console.log(arr) // ['A']

// .unshift() 
// 새로운 요소를 대상 배열의 맨 앞에 추가하고 새로운 배열의 길이를 반환
// 대상 배열 원본 변경

const arr = ['A', 'B','C']

console.log(arr.unshift('X')) // 4
console.log(arr) // ['X', 'A', 'B','C']
// push()는 배열의 맨 뒤에 아이템 추가

// Array.from()
// 유사 배열(Array-like)을 실제 배열로 반환

const arraylike = {
    0:'A',
    1:'B',
    2: 'C',
    length:3
}

console.log(arraylike.constructor === Array)
console.log(arraylike.constructor === Object)

Array.from(arraylike).forEach(item => console.log(item))

// Array.isArray()
// 배열 데이터인지 확인

const array = ['A', 'B', 'C']
const arraylike = {
    0:'A',
    1:'B',
    2:'C',
    length:3
}

console.log(Array.isArray(array))  // true
console.log(Array.isArray(arraylike)) // false