본문 바로가기
TIL/Javascript

객체

by _din 2022. 7. 8.

 

let user = {     // 객체
  name: "John",  // 키: "name",  값: "John"
  age: 30        // 키: "age", 값: 30
};

키가 변수처럼 사용되었지만, 실제로는 String 타입으로 저장된다.

 

const player = {
	name : "dain",
	points : 10,
	student : false
}

console.log(player.name);
console.log(player["name"]);

player.name = "kimdain" // const로 선언되었지만, player의 자체를 변경하지 않고서는 안의 속성은 변경가능하다.

객체 비구조화 할당

: 객체에서 값들을 추출해서 새로운 상수로 선언해 주는 것

const captainAmerica = {
  name: '스티븐 로저스',
  actor: '크리스 에반스',
  alias: '캡틴 아메리카'
};

function print(hero) {
  const { alias, name, actor } = hero;
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
  console.log(text);
}

print(captainAmerica);

코드가 객체에서 값들을 추출해서 새로운 상수로 선언

const { alias, name, actor } = hero;

여기서 더 나아가면, 파라미터 단계에서 객체 비구조화 할당을 할 수도 있습니다.

function print({ alias, name, actor }) {
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
  console.log(text);
}

 

비구조화 할당 시 기본값 설정

const object = { a: 1 };

function print({ a, b = 2 }) {
  console.log(a);
  console.log(b);
}

print(object);
// 1
// 2
const object = { a: 1 };

const { a, b = 2 } = object;

console.log(a); // 1
console.log(b); // 2

 

비구조화 할당 시 이름 바꾸기

const animal = {
  name: '멍멍이',
  type: '개'
};

const nickname = animal.name;

console.log(nickname); // 멍멍이

위 코드를 아래와 같이 변경할 수 있습니다.

const { name: nickname } = animal

위 코드는 'animal 객체 안에 있는 name 을 nickname 이라고 선언하겠다.' 라는 의미입니다.

 

객체 생성자

function Animal(type, name, sound) {
  this.type = type;
  this.name = name;
  this.sound = sound;
  this.say = function() {
    console.log(this.sound);
  };
}

const dog = new Animal('개', '멍멍이', '멍멍');

 

키에 변수 선언

const key = 'Mickey Mouse'
const value = 'Happy'
const disneyCharacter = {
  [key]: value,
}
console.log(disneyCharacter)

 

단축 프로퍼티

프로퍼티 값을 기존 변수에서 받아와 사용하는 경우

let user = {
  name,  // name: name 과 같음
  age: 30
};

 

2022.07.08 - [TIL/Javascript] - 옵셔널 체이닝 ‘?.’

반응형

'TIL > Javascript' 카테고리의 다른 글

연산자  (0) 2022.07.12
함수  (0) 2022.07.11
옵셔널 체이닝 ‘?.’  (0) 2022.07.08
배열  (0) 2022.07.05
변수  (0) 2022.07.05

댓글