Javascript - 객체

YuJin Lee·2020년 10월 6일
0

Javascript

목록 보기
5/22

객체는 다음과 같이 나타낼 수 있다.
{키: 값, 키: 값, 키: 값 ...}

  • 예시
const ironMan = {
  name: '토니 스타크',
  actor: '로버트 다우니 주니어',
  alias: '아이언맨'
};

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

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

print(ironMan);
// 아이언맨(토니 스타크) 역할을 맡은 배우는 로버트 다우니 주니어 입니다. 
print(captainAmerica);
// 캡틴 아메리카(스티븐 로저스) 역할을 맡은 배우는 크리스 에반스 입니다. 

  • 비구조화 할당(객체 구조 분해) - ES6
function print(hero) {
  //${}안의 hero를 꺼내서 alias, name, actor에 할당해준다.
  const { alias, name, actor } = hero;
  
  //alias, name, actor 앞에 hero.을 붙이지 않아도 된다.
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`
  console.log(text);
}

다음과 같이 써도 결과는 동일하다.

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

다음과 같이 사용 할 수도 있다.

const ironMan = {
  name: "토니 스타크",
  actor: "로버트 다우니 주니어",
  alias: "아이언맨"
};

const { name } = ironMan;
console.log(name);
//토니 스타크

  • 객체 안에 함수 넣기
const dog = {
  name: '멍멍이',
  sound: '멍멍',
  say: function() {
    console.log(this.sound);
  }
  /*
  또는
  say () {
     console.log(this.sound);
  }
  형태로 만들 수도 있다.
  */
};

dog.say();

  • this의 활용
const dog = {
  name: '멍멍이',
  sound: '멍멍',
  say: function() {
    console.log(this.sound);
  }
};

const cat = {
  name: '야옹이',
  sound: '야옹'
};

cat.say = dog.say;
// cat.say = function() {console.log(this.sound);}
// this는 자기가 속해있는 곳에 따라 값이 바뀐다.
// 화살표 함수를 사용하면 this를 사용할 수 없다.

dog.say(); //멍멍
cat.say(); //야옹

  • Getter 함수
const numbers = {
  a: 1,
  b: 2,
  //앞에 get을 써준다.
  get sum() {
    console.log('sum 함수가 실행됩니다');
    return this.a + this.b;
  }
};

console.log(numbers.sum);
// sum 함수가 실행됩니다.
// 3
// 조회하기만 해도 함수가 실행된다.
// 특정 값을 조회하려고 할 때 getter 함수를 사용한다.
profile
배운 것을 기록하는 곳 💻🙂

0개의 댓글