[JS] 객체 리터럴

 

const me = {
  name : '달림',
  age : 27,
  gender : '여자',
  'hobby?' : '게임하기!',
}

 

객체 리터럴로 객체를 생성하는 코드의 예시이다.

각각의 프로퍼티를 ` , ` 으로 나누며 key값과 value 값이 존재한다.

객체 리커럴 프로퍼티의 key값은 ''로 감싸주어도 되고 감싸주지 않아도 되는데 감싸주지 않는게 좋다.

''로 감싸주는 경우는 1. 맨 앞에 숫자가 붙어 있거나 2.띄어쓰기나 3.특수문자가 포함되어 있는 경우에 포함하여 적어준다.

 

객체 리터럴의 값을 불러오는 방식은 두 가지이다.

 

console.log(me.name); // 결과 : 달림
console.log(me['name']); //결과 : 달림

이 두개의 콘솔을 찍어보면 불러오는 방식은 다르지만 불러온 값은 같다.

대괄호를 사용할때는 꼭 '' 안에 적어주어야한다!

 

그런데 불러오는 값이 같은데 어째서 불러오는 방법이 다른 것일까? 🤔🤔🤔

바로 key값에 '' 를 사용할 수 밖에 없는 이름일때! 즉, 앞글자가 숫자이거나 특수문자나 띄어쓰기를 사용한 이름일때

me['name'] 과 같이 적어주어야한다!

 

---

 

객체 수정 및 삭제하기

const cafeMenu = {
  americano : '2500원',
  latte : '3500원',
  ade : '4000원', 
}

cafeMenu.ade = '5000원'; //수정
console.log(cafeMenu.ade);
//결과 5000원

delete cafeMenu.americano; //삭제
console.log(cafeMenu.americano);
//결과 undefined

 

이렇게 cafeMenu.ade = '바꿀 값'; 으로 변경해주면

위에서 할당해줬던 값이 변경된다. 없는 속성을 추가해주는 것도 동일하게 해주면 된다.

 

delete 를 붙여주면 객체가 삭제되어 호출해도 undefined 가 반환된다.

---

 

객체 리터럴에 함수 사용하기

객체 리터럴 안에서도 함수를 사용할 수 있다.

const test = {
  id : 1,
  hello : function(){
  	console.log('hello, js');
  },
  bye(){
    console.log('bye...');
  },
}

console.log(test.hello()); // 결과 hello, js
console.log(test.bye()); // 결과 bye...

 

이렇게 객체 리터럴 안에 함수를 작성해주고 불러오면 함수가 실행이 된다.

함수를 쓰는 방법도 key 값을 먼저 선언해주고 함수를 선언하는 방법이 있고 

함수를 먼저 선언해주고 그 함수를 그대로 불러오는 방법도 있다~!