(Javascript) Array APIs

Array Declaration

const arr1 = new Array();
const arr2 = [1, 2];

 

Index position

const fruits = ['apple', 'banana'];
console.log(fruits);
console.log(fruits.length);
console.log(fruits[0]);
console.log(fruits[2]); // undefined
console.log(fruits[fruits.length - 1]);

 

Looping over an array

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

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

// c. forEach
fruits.forEach((fruit) => console.log(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
• shift, unshift are slower than pop, push!
• splice()
  • remove an item by index position
• concat()
  • combine two arrays

// push: add an item to the end
fruits.push('peach');
console.log(fruits); // apple banana peach

// pop: remove an item from the end
fruits.pop();
console.log(fruits); // apple banana

// unshift: add an item to the beginning
fruits.unshift('lemon'); 
console.log(fruits); // lemon apple banana 

// shift: remove an item from the beginning
fruits.shift();
console.log(fruits); // apple banana

// shift, unshift are slower than pop, push!

// splice: remove an item by index position
fruits.push('strawberry', 'orange', 'lemon');
console.log(fruits); // apple, banana, strawberry, orange, lemon
fruits.splice(1, 1); // index 1부터 1개만 삭제
console.log(fruits); // apple, strawberry, orange, lemon
fruits.splice(1, 1, 'melon', 'cherry');
console.log(fruits); // apple, melon, cherry, orange, lemon
// fruits.splice(1, 0, 'melon', 'cherry'); // 지우지 않고 원하는 곳에 데이터 넣을 수도 있음
// console.log(fruits); 

// combine two arrays
const fruits2 = ['grape', 'pear'];
const newFruits = fruits.concat(fruits2); 
console.log(newFruits); // apple, melon, cherry, orange, lemon, grape, pear

 

Searching

• indexOf()
  • find the index
• includes()
• lastIndexOf()

// indexOf: find the index
console.log(fruits); // apple, melon, cherry, orange, lemon
console.log(fruits.indexOf('apple')); // 0 
console.log(fruits.indexOf('pear')); // -1

// includes
console.log(fruits.includes('melon')); // true

// lastIndexOf
console.clear();
fruits.push('apple');
console.log(fruits.indexOf('apple')); // 0 : indexOf는 제일 처음 해당하는 값 만나면 해당 index 리턴
console.log(fruits.lastIndexOf('apple')); // 5 : lastIndexOf는 제일 마지막에 나온 index 리턴

 

Ex1. make a string out of an array

• join()
  • 배열에 있는 모든 item을 string으로 나타내어줌
  • separator를 받아도 되고 , 안받아도 됨 (optional)
    

{
    const fruits = ['apple', 'banana', 'orange'];
    // join api는 배열에 있는 모든 item을 string으로 나타내어줌
    // separator를 받아도 되고 , 안받아도 됨
    const result = fruits.join();
    console.log(result); // apple,banana,orange
    const result2 = fruits.join(' and ');
    console.log(result2); // apple and banana and orange
}

 

 

 

Ex2. make an array out of a string

• split()

{
    const fruits = '🍎, 🥝, 🍌, 🍒';
    const result = fruits.split(', '); // fruits.split(',', 2); --> [ "🍎", "🥝"]
    console.log(result); // [ "🍎", "🥝", "🍌", "🍒" ]
}

 

 

Ex3. make this array look like this: [5, 4, 3, 2, 1]

• reverse()

{
    const array = [1, 2, 3, 4, 5];
    const result = array.reverse();
    console.log(result); // [ 5, 4, 3, 2, 1 ]
    console.log(array); // [ 5, 4, 3, 2, 1 ]
}

 

Ex4. make new array without the first two elements

• slice()
  • splice()는 배열 자체를 수정
  • slice()는 배열에서 원하는 부분만 받아오고 싶을 때 사용

{
    const array = [1, 2, 3, 4, 5];
    const result = array.slice(2, 5);
    console.log(result); // [ 3, 4, 5 ]
    console.log(array); // [1, 2, 3, 4, 5]

    // splice는 배열 자체를 수정
    // slice는 배열에서 원하는 부분만 받아오고 싶을 때 사용
}

 

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),
];

 

Ex5. find a student with the score 90

• find()
  • 전달된 콜백함수가 true가 되면 첫번째로 찾아진 요소 return

{
    // find()는 전달된 콜백함수가 true가 되면 첫번째로 찾아진 요소 return 
    const result = students.find((student, index) => student.score === 90);
    console.log(result);
}

 

Ex6. make an array of enrolled students

• filter()

{
    const result = students.filter((student) => student.enrolled === true);
    console.log(result);
}

 

Ex7. make an array containing only the students' scores

result should be: [45, 80, 90, 66, 88]

• map()
  • 배열 안에 있는 모든 요소들을 전달해준 콜백함수를 호출하면서 콜백함수에서 리턴되어진 값들로 대체

{
    // map(): 배열 안에 있는 모든 요소들을 전달해준 콜백함수를 호출하면서 콜백함수에서 리턴되어진 값들로 대체
    const result = students.map((student) => student.score);
    console.log(result);
}

 

Ex8. check if there is a student with the score lower than 50

• some()
  • 배열의 요소 중에서 콜백 함수가 리턴이 true가 되는 것이 있는지 없는지 확인
• every()
  • 배열의 모든 요소들이 조건 충족해야하지만 true 리턴

{
    // some(): 배열의 요소 중에서 콜백 함수가 리턴이 true가 되는 것이 있는지 없는지 확인
    const result = students.some((student) => student.score < 50);
    console.log(result); // true

    // every(): 배열의 모든 요소들이 조건 충족해야하지만 true 리턴
    const result2 = !students.every((student) => student.score >= 50);
    console.log(result2); // true

}

 

Ex9. compute students' average score

• reduce()
  • 콜백함수는 배열 안의 모든 요소들마다 호출됨
  • 콜백함수에서 리턴되는 값은 함께 누적된 결과값을 리턴

{
    // reduce()
    // - 콜백함수는 배열 안의 모든 요소들마다 호출됨
    // - 콜백함수에서 리턴되는 값은 함께 누적된 결과값을 리턴
    // curr은 배열 하나하나 순차적으로 전달
    // prev는 콜백함수에서 리턴된 값이 다음에 호출될 때 전달
    // reduce는 우리가 원하는 시작점부터 모든 배열을 돌면서 값을 누적할 때 사용
    // reduceright()는 배열의 제일 뒤에서부터 시작
    const result = students.reduce((prev, curr) => prev + curr.score, 0); // 0: initial value 전달 가능
    console.log(result / students.length);
}

 

Ex10. make a string containing all the scores

result should be: '45, 80, 90, 66, 88'

{
    const result = students.map((student) => student.score).join(', ');
    console.log(result);
}

 

Ex11. sorted in ascending order

result should be: '45, 66, 80, 88, 90'

• sort()

{
    const result = students.map((student) => student.score).sort((a, b) => a - b).join(', '); // -를 리턴하게 되면 a가 b보다 작다고 간주하고 정렬이 됨
    console.log(result);
}