[JavaScript] 드림코딩 배열함수

현재 진행하고 있는 프론트엔드 스쿨의 1일 1함수 스터디에서 각자 익숙해지고 싶은 함수를 외우고 영상을 올리고 있는데, (본래 취지는 '냅다 암기하다 보면 손에 익고 이해가 간다'이지만 다들 점점 이해가 선행 되어야 하는 너낌) 이번주는 오랜만에 자바스크립트 복습을 할겸 배열 메서드를 연습했다.
헷갈렸던 부분 위주로 정리를 해두려고 한다.

1일 1함수 깃헙 레포✨

---

join() : make a string out of an array

const fruits = ['apple', 'banana', 'orange'];
const string1 = fruits.join();
const string2 = fruits.join("");

console.log(string1);  // apple,banana,orange
console.log(string2);  // applebananaorange

split() : make an array out of a string

const fruitsString = '🍎,🍏,🍊,🍓';
const arr1 = fruitsString.split(',');
const arr2 = fruitsString.split();

console.log(arr1);  // ['🍎', '🍏', '🍊', '🍓']
console.log(arr2);  // ['🍎,🍏,🍊,🍓']


const str = 'React makes it painless to create interactive UIs.';
const arr3 = str.split();
const arr4 = str.split('');

console.log(arr3);  // ['React makes it painless to create interactive UIs.']
console.log(arr4);  // ['R', 'e', 'a', 'c', 't', ' ', ... 'U', 'I', 's', '.']

split 메서드의 두 번째 인자는 limit : 끊어진 문자열의 최대 갯수

const fruitsString = '🍎,🍏,🍊,🍓';
console.log(fruitsString.split(',', 3));  // ['🍎', '🍏', '🍊']

const str = 'React makes it painless to create interactive UIs.';
console.log(str.split(' ', 3))  // ['React', 'makes', 'it']

reverse() : return a reversed array

const arr = [1, 2, 3, 4, 5];
const reversedArr = arr.reverse();

console.log(arr); // [5, 4, 3, 2, 1]
console.log(reversedArr); // [5, 4, 3, 2, 1]
console.log(arr === reversedArr); // true

기존 배열의 결과를 바꾼다.

find() vs. some()

다른 메서드에 비해 비교적 쉽다고 생각하고 지나갔었는데, 갑자기 이번에 예제를 풀면서 이 두개가 헷갈렸다. 먼저, 예제를 풀기 위해 기본 작업으로 클래스를 생성하고 인스턴스들을 만들어 배열 안에 담아두었다.

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

문제1. 성적이 90인 학생 찾기

students.find(student => student.score === 90);

/* 결과값
Student {
  name: 'C',
  age: 30,
  enrolled: true,
  score: 90,
  __proto__: { constructor: ƒ Student() }
}
*/

문제2. 성적이 50 미만인 학생이 있는지 체크하기

students.some(student => student.score < 50) // true

find는 가장 먼저 조건에 맞는 값 하나를 찾아 리턴한다.
some은 조건을 만족하는지에 대한 여부를 참/거짓으로 리턴한다.