그동안 뭐했니 #7

🙊 잘못 기재한 부분이 있다면 댓글로 남겨주세요!

주중 주말을 미니 프로젝트로 보내느라 어제 뭐했니도 아니고 엊그제 뭐했니도 아니고 그동안 대체 뭘했니? 가 됐다.
분명히 주말 중에 딱 하루만 나갔다 왔는데 이상하다...

👾filter() vs map() VS reduce()

배열에서 중복 값을 제외하거나, 특정한 조건을 가진 찾는다거나 할 때에 쓰이는 메소드들. 정말 자주 쓰이기 때문에 진짜 숙지해둬야한다!!!

• filter(): 배열을 돌면서 조건에 맞지 않는 요소들을 필터링해주는 함수. 콜백 함수의 조건에 맞지 않는 요소들이 있다면 그 요소를 배제하고, true인 요소들만 모아서 새로운 배열을 반환한다!
• map(): map()도 마찬가지로 배열을 순회하는데, 콜백 함수에서 리턴하는 값들을 모아서 새로운 배열을 리턴한다.

👾fill()

배열에서 사용되는 함수 메소드, 이 메소드를 쓰면 배열의 시작 인덱스부터 마지막 인덱스까지가 모두 하나의 값으로 대체되어서 바뀐 배열을 리턴한다. fill()을 쓰면 원본 배열도 변경된다!

let arr = [0, 1, 2, 3];

console.log(arr.fill(5)); // [5, 5, 5, 5]
console.log(arr);         // [5, 5, 5, 5]

꼭 모든 배열의 요소를 다 바꿀 수 있는 건 아니고, 시작점이나 종료지점을 정해줄 수도 있다.

// 처음부터 끝까지
[1, 2, 3].fill(4);        // [4, 4, 4]

// 1번째 인덱스부터 끝까지
[1, 2, 3].fill(4, 1);   // [1, 4, 4]

// 1번째 인덱스부터 2번째 인덱스 전까지
[1, 2, 3].fill(4, 1, 2); // [1, 4, 3]

👾toString() vs String() 둘 사이에 무슨 차이가 있지?

둘다 전달받은 값을 문자열로 반환하는 함수인데, 아무래도 쓰임이 다르기 때문에 따로 쓰는 것 같은데 대체 뭐가 다를까?

string 함수는 주어진 인자를 문자열로 반환하고, new 키워드를 통해 새 문자열 객체의 생성자로 쓰이는게 가능하다.

toString 함수는 주로 숫자값을 가진 문자열의 메소드로 사용하는데, valueOf()(입력받은 인자 값을 지정된 Number 객체 형으로 변환) 와 동일한 역할을 한다.

👾sort() - 오름차순과 내림차순

배열을 정리할 때 sort() 함수를 주로 쓰는데, 내가 알고 있는 지식으로는 오름차순 정렬은 sort() 함수이고, 내림차순은 거기에 reverse()를 덧붙이면 되는 거였는데 좀 더 정확하고 널리 쓰이는 다른 표현이 있다.

const arr = [7,2,1,10]
// 오름차순
arr.sort( (a,b) =>{		
  return a-b
})

console.log(arr)		// [1,2,7,10]

// 내림차순
arr.sort( (a,b) =>{		
  return b-a
})

console.log(arr)		// [10,7,2,1]

사실 원리는 모르겠는데 정말 많이 쓰이고 있어서 그냥 그런가보다 하고 외우고 있다...

👾forEach()

맨 위에서 쓴 map(), reduce(), filter()과 마찬가지로 배열을 순회하면서 각 요소에 콜백 함수를 실행하는 함수이다. forEach는 주로 배열에서 반복문을 써야할 대 사용한다.
단, for은 실행하는 도중이라면 멈출 수 없기 때문에 중간에 if 문을 끼워넣어줘야 할 때도 있다!

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

arr.forEach((ele) => {
  console.log(ele);
});

👾스프레드 연산자(Spread Operator) vs Rest 파라미터(Rest Parameter)

스프레드 연산자나 레스트 파라미터나 둘다 ...을 공통으로 사용해서 용법이 헷갈리는데 생각보다 많이 써서 다시 한번 정리한다!

• 스프레드 연산자는 구조분해 할당에서 나온 개념이고, 할당하지 않은 배열의 나머지를 한번에 뭉뚱그려서 담는 역할이다!

const classmate = { name: "이태민", age: 30, group: "SHINee"}
let { name, ...rest} = clasmate

console.log(rest) //{age: 30, group: "SHINee"}

• Rest 파라미터는 스프레드 연산자를 사용해서 함수의 파라미터를 작성한 형태이다. 그러니까 Rest 파라미터를 사용했을 때 결과값을 배열로 전달받을 수 있다!

numbers(1, 2, 3, 4, 5);

function numbers(...rest) {
  console.log(Array.isArray(numbers)); // true
  console.log(rest); // [ 1, 2, 3, 4, 5 ]
}