객체

객체

@2024.04.02

객체란?

💡

데이터의 집합으로, key-value 쌍의 속성들을 포함하는 컨테이너로,
변수 혹은 상수를 사용하게 될 때
하나의 이름에 여러 종류의 값을 넣게 해준다.


@기본형식

타입 변수명 = {
키 : 값;
};

• 컨테이너 : 데이터나 객체 등을 담거나 그룹화하는데 사용되는 논리적/물리적 공간
  • ex) 배열, 객체, 리스트 등

• 키에 해당되는 부분은 공백이 없어야 한다.
  • 만약 공백이 필요할 시 따옴표로 감싸서 문자열로 넣어주면 된다
    • ‘이 키는 공백이 있습니다’ : 10;

• 속성이 여러 개라면 콤마로 구분한다.

객체 배열

• 객체 배열에 새로운 배열을 추가할 시 push() 사용

// 객체 배열 선언
let basicDatas = [
  { id: 1, title: "Todo 1", done: false },
  { id: 2, title: "Todo 2", done: true },
];

// 새로운 객체 생성
const newTodo = { id: 3, title: "Todo 3", done: false };

// 기존 배열에 새로운 객체 추가
basicDatas.push(newTodo);

함수에서 객체를 파라미터로 받기

• 템플릿 리터럴을 사용
  • 문자열을 조합하는 방법으로 (‘hello, ‘ + name)처럼 +연산자보다 보다 편하게 조합이 가능

const movie = {
	title : '메이저러너',
	actor : '딜런 오브 라이언',
	open : 2014
}; 

function print(t){
	const text = `${t.open}(${t.title})의 주인공 배우 이름은 ${t.actor} 입니다.` ;
	alert(text);
}
print(movie);

객체 비구조화 할당 = 객체 구조 분해

💡

객체의 속성을 추출하여 변수에 할당하는 기능으로, 이를 통해 객체의 속성에 접근하고 해당 값을 변수가 바로 할당할 수 있다.

• 예시

// movie 객체
const movie = {
	title : '메이저러너',
	actor : '딜런 오브 라이언',
	open : 2014
}; 

// 기존 방법 
const title = movie.title;
const actor = movie.actor;
const open = movie.open;
---------------------------------------------------------------------------------------
// 객체 비구조화 할당
const { title, actor, open } = movie;
console.log(title); 
console.log(actor); 
console.log(open)

// 객체 비구조화 할당과 동시에 변수에 별칭 지정 
const { title : movieTitle, actor : movieActor, open : movieOpen } = movie;
console.log(movieTitle);
console.log(movieActor);
console.log(movieOpen);
---------------------------------------------------------------------------------------
// 파라미터 단계에서 객체 비조구조화 할당도 가능 
function print({ title, actor, open }){
	const text = `${open}(${title})의 주인공 배우 이름은 ${actor} 입니다.` ;
	alert(text);
}

객체 안에 함수 넣기

• 함수가 객체 안에 들어가게 되면 this는 자신이 속해있는 객체를 가리킨다.

• 함수를 선언할 때는 이름이 없어도 된다

• 주의! 객체 안에 함수를 넣을 때 화살표 함수로 선언하면 제대로 작동하지 않는다.
  • 일반적인 함수 선언은 호출될 때 자신이 속한 객체를 this로 가리킨다.
  • 화살표 함수는 자신을 감싼 가장 가까운 함수의 this를 가리킨다

const movie = {
	title : '메이저러너',
	actor : '딜런 오브 라이언',
	open : 2014,
	say : '안녕하세요 여러분 반갑습니다!',
	talk : function talk(){  // or function()
		console.log(this.say); // 안녕하세요 여러분 반갑습니다!
		}
	greet: () => {
    console.log("Hello, " + this.name);
  }
}; 

movie.greet(); //Hello, undefined

setter와 getter 설정

• setter 함수를 설정할 때는 함수 앞에 set 키워드를 붙인다.

• getter 함수를 설정할 때는 함수 앞에 get 키워드를 붙이고, 값을 반환한다.

  get 함수명(){}
  set 함수명(){}

• getter와 setter를 실행할 때 ()를 안 붙여도 된다.
  • 이는 메서드가 아닌 속성으로 간주되기 때문이다.

    const movie = {
      title: '메이저러너',
      // getter
      get mtitle() {
        return this.title;
      },  
      // setter 
      set mtitle(message) {
        this.title = message;
      }
    };
    
    console.log(movie.mtitle); // 메이즈러너
    movie.mtitle = '해리포터'; // 자동으로 setter가 호출되어 값을 변경
    console.log(movie.mtitle); // 해리포터