[JavaScript] 객체

올챙이·2023년 11월 4일

JavaScript 기초

목록 보기
16/19
post-thumbnail

객체 🧐

객체는 숫자형이나 문자형과 같은 원시 자료형과 달리 다양한 값을 담는 자료형이다.

객체 생성과 프로퍼티

자바스크립트에서는 2가지 방법으로 객체를 생성할 수 있다.

let objA = {}; //'객체 리터럴' 문법
let objB = new object(); //'객체 생성자' 문법

만약 빈 객체가 아닌 데이터가 있는 객체를 생성하려면 key와 value 쌍으로 이루어진 '프로퍼티'를 작성하면 된다. 이때 프로퍼티의 key는 문자형을 사용하며 중복해 사용할 수 없으며 복수의 단어로 이루어진 key를 사용하려면 반드시 따옴표로 묶어 주어야 한다.

let person = {
	name: "박소정",
    age: 23,
    age: 24, //중복된 key라도 오류 발생x 마지막 프로퍼티로 값이 저장됨
    "read book": 4 //복수의 단어
}

객체 프로퍼티 다루기

객체에서 프로퍼티를 찾고, 추가하고, 삭제하는 등의 모든 연산은 key 를 이용해 수행한다.

  • 프로퍼티 접근

    key를 이용하면 객체의 프로퍼티에 접근할 수 있으며 접근 방법에는 2가지가 있다.
    let person = {
        name: "박소정"
        age: 23
    }

    const personName = person.name; //점 표기법
    const personAge = person["age"]; // 괄호 표기법

    console.log(personName); //박소정 출력
    console.log(personAge); // 23 출력
  • 프로퍼티 추가

    let person = {
        name: "박소정"
        age: 23
    }

	person.gender = "female";
    person["nickname"] = "apple";

    console.log(person.gender); //female 출력
    console.log(person["nickname"]); // apple 출력
  • 프로퍼티 수정

    let person = {
        name: "박소정"
        age: 23
    }
    
    person.name = "코난";
    person["age"] = 24;
    
    console.log(person); // {name: "코난", age: 24} 출력
  • 프로퍼티 삭제

    let person = {
        name: "박소정"
        age: 23
    }
    
    delete person.name;
    delete person["age"];
    
    console.log(person); //{} 출력

in 연산자

객체에 존재하지 않는 프로퍼티에 접근하면, undefined를 반환한다.

let person = {
	age: 10
}

let inNameExist = "name" in person;

console.log(inNameExist); // false 출력

this

var person = {
  name: "Chris",
  greeting: function () {
    alert("Hi! I'm " + this.name + ".");
  },
};

this 키워드는 현재 동작하고 있는 코드를 가지고 있는 객체를 가리킨다.
위 코드에서 this는 person과 동일한 역할을 한다.
person처럼 직접적으로 객체 이름을 적는 것보다 this 키워드를 사용하는 것이 더 유용하다.
(재사용성, 유연성, 깔끔한 코드 등 여러가지 장점이 있는데 아직 실제로 사용을 많이 안해서 체감이 안됩니다! 어쨌든 this 키워드를 사용하려는 습관을 들여야겠다고 생각했습니다.)

메서드

객체에서 값(value)이 함수인 프로퍼티를 '메서드'라고 한다.

let person = {
	name: "박소정",
    sayHi: function(){
    	console.log("안녕");
    }
}

person.sayHi(); // 안녕 출력

💡

  • 속성(프로퍼티)

    속성은 객체의 상태나 특성을 나타냅니다.
    속성은 값이 할당되고, 그 값은 보통 문자열, 숫자, 불리언, 배열, 다른 객체 또는 다른 데이터 유형이 될 수 있습니다.
    다음 코드에서 member1Name,member2Name,member3Name을 말합니다.
    var objectName = {
      member1Name: member1Value,
      member2Name: member2Value,
      member3Name: member3Value,
    };

0개의 댓글