자바스크립트 객체 함수를 알아야 하는 5가지 🧑‍💻✍️

바로 시작합시다. 아래에서 JavaScript의 객체에 사용할 수 있는 5가지 유용한 함수를 찾을 수 있습니다. 😎

유튜브 비디오

독서를 좋아하지 않는다면 대신 제 YouTube 동영상을 시청하세요 👇

1. 할당()

Object.assign()가 있습니다. 이것은 개체를 초기화/병합하는 데 적합하며 기본값을 설정하는 데 사용할 수 있습니다.

실제로 그것을 보자.

아래는 options 매개변수를 받는 함수입니다. Object.assign()를 사용하면 대상 개체의 모든 속성을 원본 개체의 해당 속성으로 덮어씁니다.

function foo(options) {
    const defaults = {
        maxPoints: 5000,
        startingCash: 100,
        rounds: 3,
    };

    // { maxPoints: 20000, startingCash: 100, rounds: 5 }
    options = Object.assign(defaults, options);
}

foo({
    maxPoints: 20000,
    rounds: 5
});

힌트: 스프레드( ... ) 구문은 비슷한 용도로 사용됩니다.

2. 정의 속성()

JavaScript에서 새 개체 속성을 정의하는 멋진 방법이 있다는 것을 알고 계셨습니까? 글쎄요.

이 기능을 사용하여 기존 개체에 새 속성을 추가하면 해당 정의를 "사용자 정의"할 수 있습니다. 예를 들어 속성을 변경할 수 없도록 만들 수 있습니다.

예를 보자:

const person = {
    name: "Dom",
    age: 28,
    favoriteColor: "Blue"
};

// Add an immutable "country" property
Object.defineProperty(person, "country", {
    value: "Australia",
    writable: false
});

// Doesn't work!
person.country = "New Zealand";

defineProperty 함수로 할 수 있는 다른 많은 일이 있으며 자세한 내용은 MDN documentation을 읽어 보시기 바랍니다!

3. 항목()

이전 2개의 기능과 비교하여 이 기능은 조금 더 간단합니다. 이 함수는 객체의 키-값 쌍을 가져와 2차원 배열로 변환합니다.

이에 대한 몇 가지 사용 사례는 다음과 같습니다.

URL 쿼리 문자열 구축

객체를 반복합니다(array destructuring과 결합)

예:

const color = {
    red: 0,
    green: 149,
    blue: 120
}

for (const [key, value] of Object.entries(color)) {
    console.log(`${key} => ${value}`);
}

/*
    Output:
    red => 0
    green => 149
    blue => 120
*/

필요할 때 깜짝 놀라실테니까 이거 기억하세요 😉

4. fromEntries()

마지막 함수에서 해결하지 못한 경우 JavaScript는 키-값 쌍 "항목"의 2차원 배열을 호출합니다.

이 함수는 2차원 배열을 가져와 객체로 변환합니다. 정말 멋진.

한번 볼까:

const colorArray = [
    ["red", 0],
    ["green", 149],
    ["blue", 120],
];

// { red: 0, green: 149, blue: 120 }
const color = Object.fromEntries(colorArray);

이 함수의 가장 가능성이 높은 인수는 배열이지만 문자열을 포함한 모든 유형iterable에서 작동합니다.

5. 객체.동결()

마지막으로 Object.freeze() 입니다. 이것은 상자에 적힌 대로 수행합니다. 상자에 전달된 개체를 고정합니다.

고정된 개체는 다음을 의미합니다.

새 속성을 추가할 수 없음

기존 속성을 변경할 수 없음

기존 속성을 삭제할 수 없음

예시:

const person = {
    name: "Dom",
    age: 28,
    favoriteColor: "Blue"
};

// none of these work ❌
person.country = "Australia";
person.name = "Rodney";
delete person.age

팁: Object.unfreeze()를 사용하여 이 효과를 되돌릴 수 있습니다.

지금 등록하세요 👉 JavaScript DOM 단기집중과정

웹 개발을 배우고 있다면 아래 링크에서 JavaScript DOM에 대한 전체 과정을 찾을 수 있습니다 👇
https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1



즐기다!