[JS] 객체

Minyoung's Conference·2022년 5월 13일
0

JavaScript

목록 보기
3/28
post-thumbnail

[객체]

let person = {}; // 객체 리터럴 방식
let person = new Object(); // 객체 생성자 방식

let person = {
	key: "value",  
//key, value 형식으로 한 쌍을 가지는 것을 객체 프로퍼티, 혹은 프로퍼티라고 한다.
    key1: "value2",
    key2: true,
    key3: undefined,
    key4: [1,2],
    say: function (){
			console.log("hello")
        }
//value자리에 어떤 자료형이 와도 상관없다. 
}

console.log(person.key1) // 점표기법
console.log(person.hello) // 없는 프로퍼티에 접근 시 undefined 반환

console.log(person["key2"]) // 괄호표기법, key값을 무조건 문자열 형태로 넣어야 한다.

괄호표기법이 유용한 상황

  • 동적인 파라미터를 전달받는 상황
  • key값이 고정되어 있지 않은 상황
let person = {
	name : "bradley",
    age :30
}
console.log(getPropertyValue("name")); // bradley

function getPropertyValue(key) {
	return person[key];
}
// 호이스팅된다.

객체 프로퍼티를 추가, 수정할 수도 있다.

person.location = "한국"; // 점표기법
person["gender"] = "남성"; // 괄호표기법 
person["age"] = 20; //괄호표기법, 내용 수정
console.log(person);

// {name : "bradley", age : 30, location : "한국", gender : "남성"}

const로 바꿔도 수정이 가능하다.
프로퍼티를 수정하는 행위는 상수 자체를 수정하는 게 아니기 때문이다.

삭제도 가능하다.

delete person.age; 
{name : "bradley", location : "한국", gender : "남성"}
하지만 삭제를 해도 메모리는 사라지지 않는다. 
메모리에서 날려버리기 위해선 null을 넣어주면 된다. (더 나은 방법)
person.age = null;

함수 또한 가능하다.

person.say(); // 안녕

say라는 메서드에 프로퍼티를 더 넣을 수 있다.

const person = {
		....
    say: function (){
			console.log(`안녕 나는 ${this.name} 이야 `);
            //this는 자기 자신 객체이다.
        }
   }

자바스크립트는 없는 프로퍼티에도 유연하게 접근이 가능하다.
(undefined 반환)
하지만 연산에 수행하는 것과 같은 오류가 발생할 수 있다.
추가할 게 아니라면 접근하지 않는 것이 베스트이다.
그래서 현재 프로퍼티가 있는 지 없는 지 확인하는 것이 중요하다.
name이라는 프로퍼티가 있는지 확인하는 방법을 알아보자.

console.log(`name : ${"name" in person}`); 
// name : true
console.log(`age : ${"age" in person}`);
// age : true
console.log(`age : ${"age" in person}`);
// gender : false
profile
안녕하세요, FE 개발자 김민영입니다.

0개의 댓글