깊이 있는 JS 객체

안녕하세요 여러분, 오늘은 JS 객체에 대한 모든 것을 다룰 것입니다.

JS에서 프로그램을 작성하는 동안 객체를 더 잘 사용함

구문과 객체를 조작하는 다양한 방법을 이해합니다.

그러니 끝까지 읽으시고 당신이 이 책에서 무엇인가를 배우기를 바랍니다.

사물

객체는 연결된 키/값 쌍의 모음인 JavaScript에서 가장 유용한 데이터 구조 중 하나입니다.

객체 생성

새 빈 개체는 두 가지 방법으로 만들 수 있습니다.

리터럴 표기법

Object() 생성자 함수

const myObject = {}; // Using literal notation
const myObject = new Object(); // Using the Object() constructor function

그러나 새 개체를 만드는 데 권장되는 방법은 Object() 생성자 함수가 약간 느리고 장황하므로 리터럴 표기법을 사용하는 것입니다.

개체에 속성 추가

점 표기법과 대괄호 표기법을 사용하여 해당 값과 함께 개체에 새 속성을 추가할 수 있습니다.

const souvik = {};

souvik.learning= true;
souvik["status"] = "Learning and implementing";
souvik.work = function () {
  console.log("Working as Full Stack Web Dev!");
};

이러한 모든 속성을 추가한 후 개체는 다음과 같이 보일 것입니다.

{
      learning: true,
      status: "Learning and implementing",
      work: function () {
             console.log("Working as Full Stack Web Dev!");
      }
}

개체의 속성 수정

개체 내의 데이터는 변경 가능하므로 데이터를 수정할 수 있습니다.

const souvik = {
      learning: true,
      status: "Learning and implementing",
      work: function () {
             console.log("Working as Full Stack Web Dev!");
      }
}

속성 값을 수정하려면 점 또는 대괄호 표기법을 자유롭게 사용하세요.

souvik.learning = false;
souvik["status"] = "Building projects";

개체의 속성 제거

객체 내의 데이터는 변경 가능하므로 delete 연산자를 사용하여 객체에서 모든 속성을 삭제할 수 있습니다.

delete souvik.learning; //true

인수 전달

객체는 JS에서 변경 가능합니다. 따라서 개체를 함수에 전달하거나 원래 개체의 복사본을 만들고 두 경우 모두에서와 같이 원래 개체의 값을 수정하는 개체의 속성 값을 수정하는 경우 개체의 복사본은 동일한 참조 또는 메모리 위치를 가리킵니다. 속성 값을 업데이트하면 개체의 모든 복사본에 반영됩니다.

let originalObject = {
  status: "online"
};

function setToOffline(object) {
  object.status = "offline";
}

setToOffline(originalObject);
originalObject.status; // "offline"

반면에 원시 데이터 유형(문자열, 부울, 숫자)은 변경할 수 없습니다. 기본 인수를 전달하면 함수는 다른 메모리 위치를 가리키는 동일한 로컬 복사본을 만들고 필요에 따라 작업을 수행합니다. 그런 식으로 실제 데이터를 업데이트하지 않습니다.

function changeToEight(n) {
  n = 8; // whatever n was, it is now 8... but only in this function!
}

let n = 7;

changeToEight(n);
console.log(n); // 7

이 키워드

메서드는 예약 키워드this를 사용하여 호출된 개체의 속성에 액세스할 수 있습니다.

const souvik = {
      learning: true,
      status: "Learning",
      work: function () {
             console.log(`${this.status} Full Stack Web Dev!`);
      }
}

souvik.work() //Learning Full Stack Web Dev!

즉, this 키워드는 개체가 자체 속성에 액세스하고 조작하는 데 도움이 된다고 말할 수도 있습니다. 점 연산자를 사용하여 메서드를 호출하는 이러한 방법을 암시적 바인딩이라고 합니다. 여기서 this는 메서드가 호출되는 데 사용되는 개체를 나타냅니다.
this가 명시적 바인딩으로 알려진 call(), apply() 및 bind() 메서드를 사용하여 일부 다른 객체를 가리키는 메서드를 호출하는 다른 방법이 있습니다. 자세한 내용을 보려면 기사를 읽으십시오.

창 개체

이제 this 키워드에 대해 알고 있듯이 exploringThis 함수를 호출하면 출력이 어떻게 될까요?

function exploringThis() {
       console.log(this)
}

exploringThis();

이 경우 또는 모든 일반 함수this는 전역 객체window를 가리킵니다.

window object is provided by the browser and globally accessible by JS code using the window keyword. This object is not part of the JavaScript specification.

모든 전역 변수, 함수는 window 개체의 속성으로 액세스할 수 있습니다.

var learning = "objects in JS";

function work() {
      console.log("Writing blog on JS objects")
}

window.learning === learning; //true
window.work === work; //true

Only declaring variables with the var keyword will add them to the window object. If you declare a variable with let or const, it won't be added as the property to the window object.

let learning = "objects in JS";

window.learning === learning; //false

개체 메서드

새 빈 개체를 만드는 데 사용할 수 있는 object() 생성자 함수에는 몇 가지 고유한 메서드가 있습니다. 이러한 방법은 다음과 같습니다.

Object.keys() - 주어진 객체의 키 배열을 반환합니다.

Object.values() - 이와 유사하게 주어진 객체의 값 배열을 반환합니다.

const souvik = {
      learning: true,
      status: "Learning",      
}

Object.keys(souvik); // ["learning", "status"]
Object.values(souvik); // [true, "Learning"]

이러한 메서드는 개체의 키 또는 값과 관련하여 약간의 조작을 수행하려는 경우에 정말 유용합니다.

이에 대한 자세한 내용은 Object MDN , this keyword MDN , window object MDN 을 참조하십시오.

지금까지 읽어주셔서 감사합니다🙏

이 블로그가 유용하다고 생각되면 네트워크와 공유하고 주제에 대해 의심스러운 점이 있으면 언제든지 의견을 말하십시오.

GitHub , , 에서 저와 👋를 연결할 수 있습니다.