JavaScript 메서드를 사용한 객체 접근 방식이 나에게 가장 적합한 이유

JavaScript에서 객체란 무엇입니까?

mdn web docs 말처럼 :

"객체 유형은 JavaScript's data types 중 하나를 나타냅니다. 다양한 키 모음 및 더 복잡한 엔터티를 저장하는 데 사용됩니다. 객체는 Object() 생성자 또는 object initializer / literal syntax 을 사용하여 만들 수 있습니다."

따라서 개체는 단순히 많은 속성이 할당된 데이터가 있는 구조입니다. 다음은 객체의 예입니다.

const simplePerson = {
  id: 1,
  name: 'Jean',
  age: 24,
};

당신은 당신이 원하는 모든 것을 저장할 수 있습니다! 예를 들어 다음과 같은 기능도 저장할 수 있습니다.

const person = {
  id: 1,
  name: 'Jean',
  age: 24,
  print: function() {
    return `Id : ${this.id} -
            Name : ${this.name} -
            Age ${this.age}`;
  },
};

그리고 속성에 객체를 저장할 수도 있습니다!

이것을 어떻게 사용합니까?

개체가 있으면 개체 내부의 모든 속성에 액세스할 수 있습니다.

예를 들어, 속성 값에 액세스하기 전에 person build 개체를 사용합니다 name .



이 그림에서 볼 수 있듯이, 사용하는 개체의 속성에 액세스하는 것은 간단합니다.

함수 매개변수에 객체를 사용하는 이유는 무엇입니까?

매우 유용하기 때문입니다. 10개의 매개변수가 있는 함수가 있다고 상상해 보십시오. 함수를 호출할 때 각 인수의 순서대로 값을 제공해야 합니다.

function foo(id, name, age) {
  // Some code here...
}

// When you call you're function
foo(1, 'Jean', 24);

If the order of each parameters changes in you're function declaration or you decided to add or remove some parameters, you need to change ALL function call to not have bugs !

It's not maintenable...

그래서 개인적으로 매개변수 목록 대신 개체 매개변수를 사용하는 것이 좋습니다. 그리고 그렇게 할 수 있는 많은 방법이 있습니다.

첫 번째 방법

예를 들어 함수 선언에 매개변수를 하나만 사용할 수 있습니다. 이 개체에는 함수를 호출할 때 필요한 특정 속성이 있습니다.

function foo(person) {
  // Some code here...
  // person.id ...
}

// Build the object directly with call
foo({
  id: 1, 
  name: 'Jean', 
  age: 24
});

// Or build it before calling
let person = {
  id: 1, 
  name: 'Jean', 
  age: 24
}
foo(person)

Here if we want, we can easily change the order of the property in the object. They don't change create a bug in you're function.

두 번째 방법

두 번째 방법은 call 방법을 사용하는 것입니다. 함수에서 call를 사용할 때 this 문을 사용할 수 있습니다.

여기에 예가 있습니다.

function calcRectArea() {
  return this.width * this.height;
}

console.log(calcRectArea.call({width: 5, height: 6}));
// Will show 30

세 번째 방법

이를 만드는 세 번째이자 마지막 방법은 단순히 객체 매개변수를 정의하여 이 객체 매개변수에 속성을 선언하는 것입니다.

내 말을 이해하기 위해 여기에 예를 보여 드리겠습니다.

function calcRectArea({height, width}) {
  return width * height;
}

console.log(calcRectArea({width: 5, height: 6}));
// Will show 30 too

여기서 저에게 선언은 이전 2개의 선언보다 더 간단합니다. 왜냐하면 어떤 속성 이름이 객체에 필요한지 알 수 있고 함수를 읽을 필요가 없기 때문입니다.

결론

저에게 함수 선언을 위한 객체 접근 방식은 정말 유용합니다. 하나의 함수에 필요한 각 매개변수의 목록을 가질 필요가 없고 Python과 같은 함수를 호출할 때 명명된 인수를 정의할 수 있기 때문입니다. 예를 들어 !

물론 이 접근 방식은 예를 들어 매개변수가 하나인 함수에는 유용하지 않습니다. 그러나 이 접근 방식을 사용하면 코드를 쉽게 유지 관리하고 업데이트할 수 있습니다.

하지만 잠시만요... 모든 매개변수 선언에 대해, 우리는 함수 매개변수의 유형과 이것을 어떻게 알 수 있는지 모릅니다.

JSDoc에 대한 다른 섹션에서 이것을 설명하려고 노력할 것입니다 😜


제안이나 의견이 있으면 물론 이 기사가 흥미로웠다면 알려주십시오. 😜