📙ES6 문법공부

---

📌배열 메서드

✨기본적인 배열 메서드

메서드명	기능
push()	뒤에 삽입
pop()	뒤에 삭제
unshift()	앞에 삽입
shift()	앞에 삭제

✨그외의 배열 메서드

💡arr.splice(n,m) : 특정 요소 지움

n번째 인덱스의 요소부터 m개의 요소를 배열에서 지운다. 그리고, 삭제된 요소는 반환한다.

let arr = [1,2,3,4,5];
let result = arr.splice(1,2);

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

✏️arr.splice(n,m,x) : 특정 요소 지우고 추가

특정 요소를 지우고 세 번째 인수 x를 배열에 추가한다.

let arr = [1,2,3,4,5];
arr.splice(1, 3, 100, 200);
console.log(arr); // [1, 100, 200, 5]

삭제할 요소의 개수 m을 0으로 한다면, 배열에서는 삭제되는 요소 없이 오로지 배열에 요소가 추가된다.

let arr = ["나는", "철수", "입니다"];
arr.splice(1, 0, "대한민국", "소방관");
// ["나는", "대한민국", "소방관", "철수", "입니다"]

💡arr.slice(n,m) : n부터 m까지 반환

n번째 인덱스의 요소부터 m번째 인덱스 직전 요소까지 반환한다.

let arr = [1,2,3,4,5];
arr.slice(1,4); // [2,3,4]

인수에 아무것도 넣지 않는다면, 배열이 복사된다.

let arr = [1,2,3,4,5];
let arr2 = arr.slice();
console.log(arr2); // [1,2,3,4,5]

💡arr.concat(arr2, arr3 ..) : 합쳐서 새 배열 반환

let arr = [1,2];
arr.concat([3,4]); // [1,2,3,4]
arr.concat([3,4], [5,6]); // [1,2,3,4,5,6]
arr.concat([3,4],5,6); // [1,2,3,4,5,6]

💡arr.forEach(fn) : 배열 반복

함수를 인수로 받아서, 배열을 순회한다. 이때, 배열의 각 요소에 대해 콜백함수가 한 번씩 호출되며, 각 호출 시 세 가지 인수를 전달받는다.

let arr = ['Mike', 'Tom', 'Jane'];
arr.forEach((name, index)=>{
  console.log(`${index + 1}. ${name}`);
});
/*
1. Mike
2. Tom
3. Jane */

콜백 함수에는 세 개의 매개변수가 있다.

매개변수	의미
첫 번째 매개변수	배열을 순회하면서 전달된 현재 요소
두 번째 매개변수	현재 요소의 인덱스
세 번째 매개변수	배열 자체

for문과 for...of 반복문으로도 배열 반복이 가능하다. 이때 얘네들은 함수도 연산자도 아니다. 반복문으로 코드 실행을 제어하는 제어 흐름문이다.

💡arr.indexOf() / arr.lastIndexOf()

문자열의 indexOf() 메소드와 사용법이 같다.
특정 값을 발견하면 해당 요소가 처음으로 나타나는 인덱스를 반환하고, 없으면 -1을 반환한다.

let arr = [1,2,3,4,5,1,2,3];
arr.indexOf(3); // 2

두 번째 인수로 넘겨준 시작 위치에서부터 탐색을 한다.

let arr = [1,2,3,4,5,1,2,3];
arr.indexOf(3,3); // 7

끝 쪽에서부터 탐색을 한다.

let arr = [1,2,3,4,5,1,2,3];
arr.lastIndexOf(3); // 7

💡arr.includes() : 포함하는지 확인

특정 요소의 인덱스는 굳이 알 필요없고, 배열이 해당 요소를 포함하고 있는지만 알고 싶다면 arr.includes() 메서드가 더 좋다.

let arr = [1,2,3];
arr.includes(1); // true
arr.includes(8); // false

💡arr.find(fn) / arr.findIndex(fn)

arr.indexOf() 메서드처럼 특정 요소를 찾는다는 건 동일하다. 다만, 보다 복잡한 연산이 가능하도록 함수를 인수로 가진다. 복잡한 연산이라면 짝수 찾기, 성인 찾기 등이 있다.

⚠️주의할 점으로 첫 번째 true 값만 반환하고 끝난다. (콜백함수에서 첫 번째로 true를 반환시키는 배열의 요소를 반환하고 끝난다.) 만약 없으면 undefinde를 반환한다.

let arr = [1,2,3,4,5];

const result = arr.find((item) => {
  return item % 2 === 0;
});

console.log(result); // 2

arr.findIndex(fn) 메서드는 배열을 순회하면서 각 요소에 대해 콜백 함수를 호출하고, 콜백 함수에서 주어진 조건을 만족하는 첫 번째 요소의 인덱스를 반환한다. 조건을 만족하는 요소가 없다면 -1을 반환한다.

let userList = [
  { name: "Scott", age: 24 },
  { name: "Lucy", age: 30 },
  { name: "May", age: 10 },
  ];

const result = userList.findIndex((user)=>{
  if (user.age < 19) {
    return true;
  }
  return false;
});

console.log(result); // 2

✏️arr.findIndex() 함수의 내부 구현 예시

이 대목은 arr.findIndex()라는 배열 인스턴스 메서드가 어떻게 내부적으로 정의되어 있을지 궁금하여 구현해보았다.

Array.prototype.myFindIndex = function(callback) {
  // 배열의 각 요소에 대해 순차적으로 실행
  for (let index = 0; index < this.length; index++) {
    const element = this[index];
    
    // 콜백 함수 호출, element, index, this (배열)을 인자로 넘김
    if (callback(element)) {
      return index;  // 조건을 만족하는 첫 번째 인덱스를 반환
    }
  }
  
  // 조건을 만족하는 요소가 없으면 -1 반환
  return -1;
};

// 사용 예시
let arr = [10, 20, 30, 40, 50];

let result = arr.myFindIndex((element) => {
  return element > 25; // 25보다 큰 첫 번째 요소 찾기
});

console.log(result); // 2 (30이 첫 번째로 25보다 큼)

💡arr.filter(fn)

콜백함수에서 true를 반환시키는 모든 요소를 배열로 반환한다. arr.find(fn)는 첫 번째 true 값 하나만 반환했다면, arr.filter(fn)는 모든 요소를 배열로 반환한다.

const arr = [1,2,3,4,5,6];

const result = arr.filter((item) => {
  return item % 2 === 0;
});

console.log(result); // [2,4,6]

💡arr.reverse()

배열을 역순으로 재정렬한다. arr.reverse() 메서드는 원본 배열을 직접 수정하며, 그 배열을 반환한다.

let arr = [1,2,3,4,5];
arr.reverse(); // [5,4,3,2,1]

💡arr.map(fn)

기존 배열을 변환해서 새로운 배열을 반환한다. 이때, 배열을 변환하는 로직은 콜백함수에 정의되어있다. 기존의 데이터 userList는 변경되지 않는다.

let userList = [
  { name: "Scott", age: 24 },
  { name: "Lucy", age: 30 },
  { name: "May", age: 10 },
  ];

let newUserList = userList.map((user, index) => {
  return Object.assign({}, user, {
    id : index + 1,
    isAdult : user.age > 19,
  });
});

console.log(newUserList); // [{ name: "Scott", age: 24, id: 1, isAdult: true }, { name: "Lucy", age: 30, id: 2, isAdult: true }, { name: "May", age: 10, id: 3, isAdult: false }]
console.log(userList); // [{ name: "Scott", age: 24 },{ name: "Lucy", age: 30 }, { name: "May", age: 10 }]
                

💡arr.join()

배열의 모든 요소를 합쳐서 하나의 문자열을 만들 수 있다. 인수로 구분자를 전달할 수 있다. 인수를 전달해주지 않으면 쉼표(,)로 구분되어 요소들이 합쳐진다.

let arr = ["안녕", "나는", "철수야"];

let result1 = arr.join()
let result2 = arr.join("-")

console.log(result1); // "안녕,나는,철수야"
console.log(result2); // "안녕-나는-철수야"

✏️str.split()

문자열을 나눠서 배열로 만들어준다.
마찬가지로 인수로 구분자를 전달할 수 있고, 빈 문자열("")을 인수로 넘겨주면 각 문자마다 다 잘라서 배열로 변환시켜준다.

const users = "Mike,Jane,Tom,Tony";
let str = "hi, min";

const result1 = users.split(",");
const result2 = str.split("");

console.log(result1); // ["Mike", "Jane", "Tom", "Tony"]
console.log(result2); // ["h", "i", ",", " ", "m", "i", "n"]

💡Array.isArray()

일반적인 객체와 배열은 typeof 연산자로 출력해보면 둘 다 Objecet라고 나오기에 둘을 구분할 수 없다.

let user = {
  name: "Scott",
  age: 24,
};

let userList = ["Scott", "Lucy", "May"];

console.log(typeof user); // objcet
console.log(typeof userList); // object

console.log(Array.isArray(user)); // false
console.log(Array.isArray(userList)); // true

따라서, Array.isArray()라는 메서드로 배열인지 일반적인 객체인지를 구분할 수 있다.

✏️클래스의 정적 메서드 vs 인스턴스 메서드

⚠️Array.isArray() 메서드는 Array 클래스의 정적 메서드이다.
이때, 정적메서드란 클래스 자체에 속하며(프로토타입에 속하는 것도 아니다), 인스턴스 객체를 생성(클래스로 찍어낸 객체가 아니더라도)하지 않고도 클래스 이름을 통해 직접 메서드를 호출할 수 있다.

⚠️반면, arr.join()과 같은 메서드는 배열 인스턴스 메서드이다. 배열 객체와 같은 인스턴스(배열 클래스 찍어낸 객체)를 대상으로 동작하도록 설계되었다. 따라서, 배열 객체에서 호출해야 하는 메서드이다. 올바른 객체 배열 없이 호출하면 예상치 못한 결과가 나올 수 있다. join()은 배열 인스턴스 메서드로 인스턴스를 통해 호출하는 것이 가장 자연스럽다. 그리고, join() 메서드는 클래스 자체에는 존재하지 않는다. 정확하게는 클래스의 프로토타입에 존재한다.

Array.prototype.join()을 직접 호출하면 실행은 되지만, 의미 있는 결과를 얻으려면 올바른 컨텍스트에서 호출해야 한다. 따라서 Array.prototype.join.call() 혹은 Array.prototype.join.apply()을 통해 직접 호출하려면 첫 번째 인자로 배열객체를 넘겨주고 두 번째 인자로 구분자를 넣어주면 정상적으로 작동한다.

call()에서는 두 번째 인수부터 그 이후의 인수들을 쉼표로 구분하여 나열해서 전달한다. 이와 다르게 apply()에서는 두 번째 인자를 배열로 넘기게 된다.

let arr = [1,2,3];
console.log(Array.prototype.join.call(arr, "-")); 
// "1-2-3"
console.log(Array.prototype.join.apply(arr, ["-"]));
// "1-2-3"

✏️call()과 apply() 메서드

call()과 apply() 메서드는 Function.protype에 정의된 메서드로, 모든 함수에서 사용 가능한 메서드이다.

✏️Function 객체

원시 자료형에 접근할 때 래퍼 객체가 생성되듯, 함수에 접근할 때도 Function 객체가 임시로 생성된다. 이는 사실상 자바스크립트에서 함수도 객체로 취급되기 때문이다. 따라서 메서드 호출이 가능하다.