배열(Array)

💁‍♀️ 배열(Array)이란,
이름과 인덱스로 참조되는 정렬된 값의 집합. 배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 함.

---

👀 배열

1) 배열 리터럴을 통한 생성

자바스크립트의 "모든 값"은 배열의 요소가 될 수 있음

const arr = ['🍌', '🍑', '🥝'];
console.log(arr);

2) 배열 생성자 함수

const arr2 = new Array();
console.log(arr2); // []

[1] 전달된 인자가 숫자이고, 하나만 전달되었다면 배열의 공간 생성으로 인식

const arr3 = new Array(10);
console.log(arr3); // [ <10 empty items> ]

[2] 전달된 인수가 2개 이상이거나 숫자가 아닌 경우 인수를 요소로 갖는 배열 생성

const arr4 = new Array('🍠', '🧀', '🥕', '🍞');
console.log(arr4);

3) Array.of 메소드

[1] 전달 된 인수를 요소로 갖는 배열 생성

console.log(Array.of(10));              // [ 10 ]
console<.log(Array.of(1, 2, 3));         // [ 1, 2, 3 ]
console.log(Array.of("Hi", "there!"));  // [ 'Hi', 'there!' ]

4) 배열의 특징

[1] 배열의 요소는 자신의 위치를 나타내는 인덱스를 가지며 배열의 요소에 접근할 때 사용

console.log(arr[0]);    // 🍌
console.log(arr[1]);    // 🍑
console.log(arr[2]);    // 🥝

[2] 배열은 요소의 개수, 즉 배열의 길이를 나타내는 length 프로퍼티를 가짐

console.log(arr.length);

[3] for문을 통한 요소 순차 접근

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

[4] 배열은 별도의 타입이 존재하지 않으며 객체 타입

console.log(typeof arr); // object

---

👀 일반 배열과의 차이

• 일반적인 배열 : 각 요소가 동일한 데이터 크기를 가지며, 빈틈 없이 연속적으로 이어져 있어 인덱스를 통해 임의의 요소에 한 번에 접근할 수 있는 고속 동작이 장점
• 자바스크립트의 배열 : 일반적인 배열의 동작을 흉내낸 특수한 객체. 각각의 메모리 공간이 동일한 크기를 갖지 않아도 되고 연속적으로 이어져 있지 않을 수도 있음. 인덱스로 배열 요소에 접근하는 경우 일반적인 배열보다 느리지만 요소의 삽입, 삭제의 경우 빠름.

// 자바스크립트의 모든 값이 객체의 프로퍼티 값이 될 수 있으므로
// 모든 값이 배열의 요소가 될 수 있음
const arr = [
    '치즈',
    '2',
    true,
    null,
    undefined,
    NaN,
    Infinity,
    [],             // 배열
    {},             // 객체
    function() {}   // 함수
];

---

👀 length property

[1] length property는 요소의 개수를 나타내는 0이상의 정수를 값으로 가짐

console.log([].length);         // 0
const arr = [1, 2, 3, 4, 5];    
console.log(arr.length);        // 5

[2] length property 값은 배열에 요소를 추가하거나 삭제하면 자동으로 갱신

arr.push(6);
console.log(arr);           // [ 1, 2, 3, 4, 5, 6 ]
console.log(arr.length);    // 6
arr.pop();
console.log(arr);           // [ 1, 2, 3, 4, 5 ]
console.log(arr.length);    // 5

[3] length property에 임의의 숫자 값을 명시적으로 할당 가능

arr.length = 3;
console.log(arr);           // [ 1, 2, 3 ]
console.log(arr.length);    // 3

[4] 현재 length보다 큰 숫자를 할당하면 length 프로퍼티의 값은 변경되지만 배열의 길이가 늘어나지는 않음

arr.length = 10;
console.log(arr);           // [ 1, 2, 3, <7 empty items> ]
console.log(arr.length);    // 10
console.log(Object.getOwnPropertyDescriptors(arr));

[5] 자바스크립트는 배열의 요소가 연속적으로 위치하지 않고 일부가 비어있는 희소 배열을 문법적으로 허용

const sparse = [, 2, , 4];
console.log(sparse);        // [ <1 empty item>, 2, <1 empty item>, 4 ]
console.log(sparse.length); // 4
console.log(Object.getOwnPropertyDescriptors(sparse));

---

👀 배열 메소드

💁‍♀️ Array.prototype은 배열을 위한 빌트인 메소드를 제공

const arr = [];
// 배열의 생성자 함수는 Array
console.log(arr.constructor === Array);                         // true
// 배열의 프로토타입 객체는 Array.prototype
console.log(Object.getPrototypeOf(arr) === Array.prototype);    // true
// Array.prototype이 배열을 위한 빌트인 메소드를 제공하는 것 확인

1) indexOf

indexOf() : 배열에서 요소가 위치한 인덱스를 리턴
lastIndexOf() : 배열의 요소가 위치한 마지막 인덱스를 리턴
includes() : 배열에 해당 요소 포함 여부 리턴

const foodList = ['물회', '삼계탕', '냉면', '수박', '물회'];

console.log(`foodList.indexOf('물회') : ${foodList.indexOf('물회')}`);                  // 0
console.log(`foodList.indexOf('물회', 1) : ${foodList.indexOf('물회', 1)}`);            // 4    // 1 이후부터 찾기
console.log(`foodList.indexOf('삼겹살') :  ${foodList.indexOf('삼겹살')}`);             // -1   // -1 : 인덱스가 없다는 의미

console.log(`foodList.lastIndexOf('물회') : ${foodList.lastIndexOf('물회')}`);          // 4
console.log(`foodList.lastIndexOf('물회', 1) : ${foodList.lastIndexOf('물회', 1)}`);    // 0    // 1 이전부터 거꾸로 찾기
console.log(`foodList.lastIndexOf('삼겹살') : ${foodList.lastIndexOf('삼겹살')}`);      // -1

console.log(`foodList.includes('물회') : ${foodList.includes('물회')}`);                // true
console.log(`foodList.includes('삼겹살') : ${foodList.includes('삼겹살')}`);            // false

2) push & pop

push() : 배열의 맨 뒤에 요소 추가
pop() : 배열의 맨 뒤에 요소 제거

const chineseFood= ['짜장면', '짬뽕', '우동'];

console.log(`push 전 chineseFood : ${chineseFood}`);            // 짜장면,짬뽕,우동

chineseFood.push('탕수육');
chineseFood.push('양장피');
// chineseFood.push('탕수육', '양장피'); // 인자를 나열해서 push도 가능

console.log(`push 후 arr :  ${chineseFood}`);                   // 짜장면,짬뽕,우동,탕수육,양장피

console.log(`chineseFood.pop() : ${chineseFood.pop()}`);        // 양장피   // 요소를 반환하면서 제거
console.log(`chineseFood.pop() : ${chineseFood.pop()}`);        // 탕수육
console.log(`chineseFood.pop() : ${chineseFood.pop()}`);        // 우동

console.log(`pop 후 chineseFood :  ${chineseFood}`);            // 짜장면,짬뽕

3) unshift & shift

unshift() : 배열의 맨 앞에 요소 추가
shift() : 배열의 맨 앞 요소 제거 후 반환

const chickenList = ['양념치킨', '후라이드', '파닭'];

console.log(`unshift 전 chickenList : ${chickenList}`);         // 양념치킨,후라이드,파닭

// 하나하나 넣는 것과 한번에 여러 개를 넣는 것은 순서에서 차이가 있음 (여러 개를 넣으면 한 덩어리로 앞에 삽입)
chickenList.unshift('간장치킨');
chickenList.unshift('마늘치킨');
// chickenList.unshift('간장치킨', '마늘치킨'); // 인자를 나열해서 unshift도 가능

console.log(`unshift 후 chickenList : ${chickenList}`);         // 마늘치킨,간장치킨,양념치킨,후라이드,파닭

console.log(`chickenList.shift() : ${chickenList.shift()}`);    // 마늘치킨
console.log(`chickenList.shift() : ${chickenList.shift()}`);    // 간장치킨
console.log(`chickenList.shift() : ${chickenList.shift()}`);    // 양념치킨

console.log(`shift 후 chickenList : ${chickenList}`);           // 후라이드,파닭

4) concat

concat() : 두 개 이상의 배열을 결합

const idol1 = ['아이브', '오마이걸'];
const idol2 = ['트와이스', '에스파'];
const idol3 = ['블랙핑크', '레드벨벳'];

// 배열명.concat(배열명1, 배열명2, ...)
const mix = idol1.concat(idol2);
const mix2 = idol3.concat(idol1, idol2);

console.log(`idol1 기준으로 idol2 배열을 concat : ${mix}`);            // 아이브,오마이걸,트와이스,에스파
console.log(`idol3 기준으로 idol1, idol2 배열을 concat : ${mix2}`);    // 블랙핑크,레드벨벳,아이브,오마이걸,트와이스,에스파

5) slice & splice

slice() : 배열의 요소 선택 잘라내기
splice() : 배열의 index 위치의 요소 제거 및 추가

const front = ['HTML', 'CSS', 'JavaScript', 'jQuery'];

// slice(시작인덱스, 종료인덱스)
console.log(`front.slice(1, 3) : ${front.slice(1, 3)}`);                        // CSS,JavaScript
console.log(`front : ${front}`);                                                // HTML,CSS,JavaScript,jQuery

// splice(index, 제거수, 추가값1, 추가값2, ...)
console.log(`front.splice(3, 1, "React") : ${front.splice(3, 1, "React")}`);    // jQuery
console.log(`front : ${front}`);                                                // HTML,CSS,JavaScript,React

6) join

join() : 배열을 구분자로 결합하여 문자열로 반환

const snackList = ['사탕', '초콜렛', '껌', '과자'];
console.log(`snackList.join() : ${snackList.join()}`);          // 사탕,초콜렛,껌,과자
console.log(`snackList.join('/') : ${snackList.join('/')}`);    // 사탕/초콜렛/껌/과자 // 원하는 구분자('/') 전달

7) reverse

reverse() : : 배열의 순서를 뒤집음 (원본 변화)

console.log(`[1, 2, 3, 4, 5].reverse() : ${[1, 2, 3, 4, 5].reverse()}`);    // 5,4,3,2,1

---

👀 배열 고차 함수

💁‍♀️ 고차 함수란,
함수를 인수로 전달 받거나 함수를 반환하는 함수

1) sort

sort() : 배열을 정렬 기준으로 정렬

let numbers = [];

for(let i = 0; i < 10; i++) {
    numbers[i] = Math.floor(Math.random() * 100) + 1; // Math.floor : 내림처리
}

console.log(`정렬 전 numbers : ${numbers}`)

// 오름차순 정렬이 기본이며 정렬 후 정렬 순서를 유지
// 배열은 기본적으로 문자열 정렬이 되므로 한 자리수, 세자리 수가 올바르지 않게 정렬되는 모습을 보임
// => 다른 정렬 기준을 사용하려면 compare 함수를 인수로 전달해야함
numbers.sort();
console.log(`정렬 후 numbers : ${numbers}`)

// 숫자 오름차순 정렬
function compare(a, b) {
    if(a > b) return 1; // 1 : 앞, 뒤 자리를 바꿔야한다는 의미
    if(a == b) return 0;
    if(a < b) return -1;
}

numbers.sort(compare);
console.log('매개변수로 compare 함수 전달하여 숫자 오름차순 정렬');
console.log(numbers);

// 숫자 내림차순 정렬 (함수를 인수로 바로 전달)
numbers.sort(function(a, b) { return b - a});
numbers.sort((a, b) => b - a);

console.log('숫자 내림차순 정렬');
console.log(numbers);

2) forEach

forEach() : for를 대체할 수 있는 고차함수

배열.forEach(function(item, index, array){
        // 배열 요소 각각에 실행할 기능 작성
    });

numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(item, index, array){
    console.log(`item : ${item}`)
    console.log(`index : ${index}`)
    console.log(`array : ${array}`)
});

// 각 요소 별로 * 10한 값을 콘솔에 출력
numbers.forEach(item => console.log(item * 10));

3) map

map() : 배열 요소 전체를 대상으로 콜백 함수 호출 후 반환 값들로 구성된 새로운 배열 반환

배열.map(function(item, index, array){
        // 배열 요소 각각에 반환할 새로운 값
    }) 

const types = [true, 1, 'text'].map(item => typeof item); // item들의 데이터 타입을 배열로
console.log(types);  // [ 'boolean', 'number', 'string' ]

const lengths = ['apple🍎', 'banana🍌', 'cat🐱', 'dog🐶', 'egg🍳'].map(item => item.length);
console.log(lengths); // [ 7, 8, 5, 5, 5 ] => 이모지는 length가 2 !

// Array.prototype.filter : 배열 요소 전체를 대상으로 콜백 함수 호출 후 반환 값이 true인 요소로만 구성 된 새로운 배열 반환
const odds = numbers.filter(item => item % 2); // 1이라는 값만 true?
console.log(odds); // [ 1, 3, 5 ] => 홀수로만 구성된 배열 출력

4) reduce

reduce() : 배열을 순회하며 각 요소에 대하여 이전의 콜백 함수 실행 반환값을 전달하여 콜백함수를 생성하고 그 결과를 반환
(콜백 함수가 동작할 때 return 하는 값이 다음 콜백 함수의 첫 번째 파라미터로 전달)

previouseValue : 이전 콜백의 반환값
currentValue : 배열 요소의 값
currentIndex : 인덱스
array : 메소드를 호출한 배열

numbers.reduce(function(previouseValue, currentValue, currentIndex, array){
    console.log(`previouseValue : ${previouseValue}`); // 이전 콜백 함수가 반환한 값
    console.log(`currentValue : ${currentValue}`);
    console.log(`currentIndex : ${currentIndex}`);
    console.log(`array : ${array}`);
});

// 합산
const sum = [3, 4, 5, 6].reduce(function(previouseValue, currentValue){
    return previouseValue + currentValue; 
});
console.log(`sum : ${sum}`); // sum : 18
/* 내가 쓰는 해설
    1st turn : 0(pv) + 3(cv) = 3(다음 콜백으로 반환) 
    2nd turn : 3(pv) + 4(cv) = 7(다음 콜백으로 반환)
    3rd turn : 7(pv) + 5(cv) = 12(다음 콜백으로 반환)
    4th turn : 12(pv) + 6(cv) = 18(다음 콜백으로 반환)
    => 따라서 마지막 콜백함수의 리턴값인 18이 최종 반환 
*/
 
// 최대값 취득
const max = [3, 4, 5, 6].reduce(function(pre, cur){
    return pre > cur ? pre : cur;
});
console.log(`max : ${max}`); // max : 6
/* 내가 쓰는 해설
    1st turn : 3(pv) > 4(cv) ? 3 : 4; (false이므로 4를 다음 콜백으로 반환)
    2nd turn : 4(pv) > 5(cv) ? 4 : 5; (false이므로 5를 다음 콜백으로 반환)
    3rd turn : 5(pv) > 6(cv) ? 5 : 6; (false이므로 6를 다음 콜백으로 반환)
    => 따라서 마지막 콜백함수의 리턴값인 6이 최종 반환 
*/

5) some

some() : 배열 내 일부 요소가 콜백 함수의 테스트를 통과하는지 확인하여 그 결과를 boolean으로 반환

// 배열 내 요소 중 10보다 큰 값이 1개 이상 존재하는지 확인
let result = [1, 5, 3, 2, 4].some(item => item > 10);
console.log(`result : ${result}`) // result : false

// 배열 내 요소 중 3보다 큰 값이 1개 이상 존재하는지 확인
result = [1, 5, 3, 2, 4].some(item => item > 3);
console.log(`result : ${result}`) // result : true (하나라도 true면 전체적인 결과가 true)

6) every

every() : 배열 내 모든 요소가 콜백 함수의 테스트를 통과하는지 확인하여 그 결과를 boolean으로 반환

// 배열 내 요소 모든 값이 3보다 큰지 확인
result = [1, 5, 3, 2, 4].every(item => item > 3); 
console.log(`result : ${result}`) // result : false (하나라도 false면 전체적인 결과가 false)

// 배열 내 요소 모든 값이 0보다 큰지 확인
result = [1, 5, 3, 2, 4].every(item => item > 0);
console.log(`result : ${result}`) // result : true

7) find & findIndex

find() : 배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백 함수를 실행하며 그 결과가 참인 첫번째 요소를 반환. 참인 요소가 존재하지 않는다면 undefined 반환
findIndex() : 배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백 함수를 실행하여 그 결과가 참인 첫 번재 요소의 인덱스를 반환. 참인 요소가 존재하지 않는다면 -1 반환

const students = [
    { name : '신짱구', score : 90},
    { name : '신짱아', score : 80},
    { name : '흰둥이', score : 70},
    { name : '신짱구', score : 20}
];

result = students.find(item => item.name === '신짱구');
console.log(result);    // { name: '신짱구', score: 90 } (20점 짱구가 아닌 첫번째 요소인 90점 짱구를 반환)
result = students.findIndex(item => item.name === '신짱구');
console.log(result);    // 0

// 존재하지 않을 때,
result = students.find(item => item.name === '신형만');
console.log(result);    // undefined
result = students.findIndex(item => item.name === '신형만');
console.log(result);    // -1

// find, findIndex는 일치하는 요소를 찾으면 더 이상 탐색하지 않고 하나의 요소, 인덱스만 반환
// 만약 60점 이상인 학생들을 찾고 싶다면?
// filter는 콜백함수의 실행 결과가 true인 배열 요소의 값만을 추출한 새로운 배열을 반환

result = students.filter(item => item.score >= 60);
console.log(result);    // 모든 60점 이상의 학생들 출력

---