JavaScript 개체 깊이

반응형

안녕하세요 여러분, 우리는 오늘 자바스크립트 오브젝트에 대한 모든 것을 다룰 것입니다.

• JavaScript로 프로그램을 작성하는 동안 객체를 더 잘 사용합니다.
• 개체의 구문 및 다양한 개체 조작 방법을 이해합니다.

그러니까 끝까지 계속 읽어보시고 여러분이 그것으로부터 무언가를 배우길 바랍니다.

물건들

 

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

객체 작성

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

• 문자 표기법
• 객체() 생성자 함수

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

 

그러나 새로운 객체를 만드는 권장되는 방법은 객체() 생성자 함수가 약간 느리고 상세하기 때문에 리터럴 표기법을 사용하는 것이다.

개체에 속성 추가

대괄호 표기법뿐만 아니라 도트 표기법을 사용하여 새 속성을 해당 값과 함께 객체에 추가할 수 있습니다.

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 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

이 키워드

 

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

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

즉, 우리는 이 키워드가 객체가 자신의 속성에 접근하고 조작할 수 있도록 돕는다고 말할 수도 있다. 점 연산자를 사용하여 메소드를 호출하는 이 방법은 암시적 바인딩으로 알려져 있으며, 여기서 메소드가 호출되는 객체를 참조한다.

명시적 바인딩으로 알려진 call(), apply() 및 bind() 메소드를 사용하여 다른 객체를 가리키는 메서드를 호출하는 다른 방법이 있습니다.

창 객체

 

이제, 이 키워드에 대해 알고 있듯이, 질문이 있습니다. 만약 우리가 탐색을 실행한다면 어떤 결과가 나올까요?이 기능이요?

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

이 경우 또는 이 경우 전역 개체 창을 가리키는 정규 함수입니다.

전역 변수 및 함수는 창 객체의 속성으로 액세스할 수 있습니다.

var learning = "objects in JS";
function work() {
        console.log("Writing blog on JS objects")
}
window.learning === learning; //true
window.work === work; //true

 

let learning = "objects in JS";
window.learning === learning; //false

목적 방법

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

• Object.keys(obj) - 주어진 개체의 키 배열을 반환합니다.
• Object.values(obj) - 마찬가지로 객체에 주어진 값의 배열을 반환합니다.

const souvik = {
        learning: true,
        status: "Learning",      
}
Object.keys(souvik); // ["learning", "status"]
Object.values(souvik); // [true, "Learning"]

 

이러한 방법은 개체의 키 또는 값과 관련하여 약간의 조작을 수행하려는 경우에 매우 유용합니다.

자세한 내용은 개체 MDN, 이 키워드 MDN, 창 개체 MDN을 참조하십시오.

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

유용하다고 생각되면 이 블로그를 네트워크에 공유하고 주제에 대해 의문 사항이 있으면 언제든지 의견을 제시하십시오.

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