JS - array

JS 강의 필기 + 추가

array

자료구조의 일종

array declaration

const arr1 = new Array();

const arr2 = [1, 2];

index position

python과 달리 -1 index를 줄 수 없다.

const fruits = ['a', 'b'];

console.log(fruits);    // (2) ["a", "b"]
console.log(fruits.length); // 2

console.log(fruits[0]); // index에 해당하는 값 나옴
console.log(fruits[2]); // 없는 index 결과: undefined

console.log(fruits[fruits.length - 1]); // 마지막 값

---

looping over an array

fruits의 data 수만큼 body를 실행하는 세가지 방법

1. for

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

2. for ... of

for (let fruit of fruits) {
    console.log(fruit);
}

3. forEach

forEach에 들어가는 함수의 params로 들어가는 index, array는 옵션으로, 

fruits.forEach(function (fruit, index, array) {
    console.log(fruit, index, array);
});

// 위를 arrow function으로 쓸 수 있다
fruits.forEach((fruit) => console.log(fruit)); // fruit만 출력

---

addition, deletion, copy

push: add an item to the end

pop: remove an item from the end

unshift: add an item to the beginning

shift: remove an item from the beginning

unshift, shift는 재배치할 때 죄 움직이기 때문에 array의 길이가 길수록 시간이 오래걸림

splice: remove an item by index position

fruits.push('c', 'd', 'e');
console.log(fruits);    //(5) ["a", "b", "c", "d", "e"]

fruits.splice(1, 1);    // index 1부터 1개 삭제
console.log(fruits);    // (4) ["a", "c", "d", "e"]

fruits.splice(1, 1, 'f'); // 삭제하면서 그 자리에 삽입
console.log(fruits);    // (4) ["a", "f", "d", "e"]

---

combine two arrays

const fruits2 = ['x', 'y'];

const newFruits =  fruits.concat(fruits2);
console.log(newFruits); // (6) ["a", "f", "d", "e", "x", "y"]

---

searching

indexOf: index 출력. 없으면 -1 출력

includes: 존재 여부에 따라 boolean값 출력

console.log(fruits.indexOf('a'));   // 해당 index 출력
console.log(fruits.indexOf('z'));   // 없는 값은 -1 출력

console.log(fruits.includes('a'));  // true
console.log(fruits.includes('z'));  // false

 

중복된 값이 존재하는 array에서

indexOf는 가장 앞에 있는 요소의 index를 출력

lastIndexOf는 가장 뒤에 있는 요소의 index를 출력

fruits.push('a');
console.log(fruits);    // (5) ["a", "f", "d", "e", "a"]

console.log(fruits.indexOf('a'));   // 0
console.log(fruits.lastIndexOf('a')); // 4

---

toString, join

join은 연결자를 지정할 수 있음

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits.toString()); // apple,banana,orange


const result = fruits.join('&');

console.log( `Q1 result: ${result}`); // apple&banana&orange

split

split(구분자, limit)

const fruits = '🍎, 🥝, 🍌, 🍒';

const result = fruits.split(', ');

console.log(result);  // (4) ["🍎", "🥝", "🍌", "🍒"]

console.log(fruits.split(', ', 2)); // 두번째 param은 limit. (2) ["🍎", "🥝"]

console.log(`Q2 result: ${result}`); // Q2 result: 🍎,🥝,🍌,🍒

reverse

원본 배열 자체를 변화시킴

const array = [1, 2, 3, 4, 5];

array.reverse();

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

slice, splice

splice는 원본 배열 자체를 변화시킴

const array = [1, 2, 3, 4, 5];

const newArray = array.slice(2, 5); // index 2 이상 5 미만

array.splice(0, 2); // 원본 배열 자체를 변화시킴.

console.log(array); // (3) [3, 4, 5]

---

예제

class Student {
    constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
    }
}

const students = [
    new Student('A', 29, true, 45),
    new Student('B', 28, false, 80),
    new Student('C', 30, true, 90),
    new Student('D', 40, false, 66),
    new Student('E', 18, true, 88),
];

find

첫번째로 true가 나온 배열의 요소를 return

const result = students.find(function(student, index){
    return student.score === 90;  // boolean으로 return 하도록
});
console.log(result); // Student {name: "A", age: 29, enrolled: true, score: 45} 0
console.log(`${result}`); // A

// arrow function으로 정리
const result = students.find((student) => student.score === 90);

filter

true가 나온 배열의 요소를 array로 return

const result = students.filter((student) => student.enrolled);

console.log(result);  // [Student, Student, Student] toggle 눌러서 각 object 정보 볼 수 있음.

map

배열의 각 요소들을 function을 거친 값으로 mapping

const result = students
.map((student) => student.score) // (5) [45, 80, 90, 66, 88]
.join(); // 45,80,90,66,88

some

callback함수가 true가 되는 게 있는지 확인

const result = students.some((student) => student.score); // true

every

모든 배열이 조건 만족하는지 확인

const result2 = !students.every((student) => student >= 50); // true

sort

배열내의 이전값을 a, 현재값을 b로 지정하고 negative value를 return하도록 정렬규칙 지정

It is expected to return a negative value if first argument is less than second argument.

내림차순 정렬: sort((a, b) => b - a)

오름차순 정렬: sort((a, b) => a - b)

const result = students
.map((student) => student.score)
.sort((a, b) => a - b)
.join();  // 45,66,80,88,90

reduce

배열의 가장 뒤부터 시작하는 reduceRight도 있음

calls the callbackfn function one time for each element in the array.

const result = students.reduce((prev, curr) => prev + curr.score, 0);
console.log(result / students.length); // 평균

어떻게 돌아가는지 풀어서 보기

const reduceTest = students.reduce((prev, curr) => {
    console.log('------')
    console.log(prev);
    console.log(curr);
    return curr;
    // 여기서 return한 게 다음에 호출되면 prev가 되는 것. 이게 없으면 두번째 호출부터는 prev가 undefined
});

결과

const reduceTestWithInitialValue = students.reduce((prev, curr) => {
    console.log('------')
    console.log(prev);
    console.log(curr);
    return prev + curr.score;
}, 0); // initial value 부터 시작

console.log(reduceTestWithInitialValue);

결과