apply 개 멋지게 쓰기..

soo's·2023년 4월 7일
0

TIL

목록 보기
32/53
post-thumbnail

저번에 apply 배우면서
객체에 length 프로퍼티 넣어서 유사배열객체 만들어준담에
Array.prototype.(배열메서드).apply(객체, 매개변수)해서 객체에 배열메서드 쓸 수 있는거 봤는데 이거 걍
Array.from(객체) 넣어서 배열로 만들어서 실행해도 되는거잖아..라는 생각에 apply 걍 그래보였다 그런데.. 이 놈 개멋지게 쓰는 방법이 잇엇삼

첫 번째 활용


// As is
function Student(name, gender, school) {
  this.name = name;
  this.gender = gender;
  this.school = school;
}

function Employee(name, gender, company) {
  this.name = name;
  this.gender = gender;
  this.company = company;
}
var kd = new Student("차은우", "male", "서울대");
var ks = new Employee("공유", "female", "삼성");

기존의 이러한 코드가 있었다고 가정
스투던트와 임플로이 생성자 함수 모두 공통적으로 this 바인딩을 통해 name과 gender를 작성해줘야 함.
이 부분을 새로운 생성자 함수를 만들어서 사용할 때, 어떻게 스투던트와 임플로이에서도 this를 생성자함수로 만들어진 인스턴스로 바인딩 시켜서 값을 받아올 수 있을까..? -> apply 쓰십쇼


// TO-BE
function Person(name, gender) {
  this.name = name;
  this.gender = gender;
}
function Student(name, gender, school) {
  Person.call(this, name, gender);
  this.school = school;
}

function Employee(name, gender, company) {
  Person.apply(this, [name, gender]);
  this.company = company;
}
var kd = new Student("차은우", "male", "서울대");
var ks = new Employee("공유", "female", "삼성");

console.log(kd); // Student { name: '차은우', gender: 'male', school: '서울대' } 
console.log(ks); // Employee { name: '공유', gender: 'female', company: '삼성' }

새로운 생성자 함수인 person을 call을 사용해서 1. 즉시실행 해주고 2. 인스턴스를 생성하여 사용하는 다른 생성자(스투던트와 임플로이) 안에서 this라고 명시해주고 나머지 매개 변수를 넣어주면 된다. 그러면 Person 생성자 함수로 만들어지는 인스턴스의 this는 각각의 인스턴스(kd, ks)를 가리키게 된다.

두 번째 활용


// As is
var numbers = [10, 20, 3, 16, 45];
var max = (min = numbers[0]); // 10
numbers.forEach((number) => {
  if (number > max) {
    max = number;
  } else if (number < min) {
    min = number;
  }
});
console.log(max, min); // 45 3


// TO-BE
var numbers = [10, 20, 3, 16, 45];
max = Math.max.apply(null, numbers);
min = Math.min.apply(null, numbers);
console.log(max, min); // 45 3

이런식으로 즉시 실행 함수로 만들어서 this 바인딩은 굳이 필요없으니까 null 값을 주고 매개변수에 numbers를 넘기면된다.

그런데 이 방법은 spread operator를 사용해도 된다.
배열의 벽을 뚫어서 풀어서 작성하게 해주는 것.. 따라서 위 코드도


var numbers = [10, 20, 3, 16, 45];
max = Math.max(...numbers);
console.log(max); // 45

이렇게 해도 됨
암튼 apply 생성자 함수 사용할 때는 짱짱맨인듯

0개의 댓글