자바스크립트(Javascript) 객체 리터럴 기본

배열과 함수는 객체입니다. 여기서 배열과 함수가 아닌 것들을 중에서 특정 모양을 가지면 객체 리터럴이라고 부릅니다.

 

객체 리터럴에는 속성의 이름과 속성의 값들이 있습니다.

const name = '홍길동';
const year = 2000;
const month = 1;
const date = 10;
const gender = 'M';

//객체리터럴을 사용시
const info = {
  name: '홍길동',
  year: 2000,
  month: 1,
  date = 10,
  gender: 'M',
};

//객체리터럴 사용법
console.log(info.name);
console.log(info['name']);
console.log(info.date);
console.log(info['date']);

 

 

객체리터럴 사용법이 2가지가 있는 이유로는 대괄호를 사용하지 않는 경우에는 .뒤에 문자만 가능해서 입니다.

const obj = {
  bc: 'hello',
  '2ca': 'hello1',
  'c a': 'hello2',
  'c-a': 'hello3',
};

obj.bc; //hello
obj['bc'] //hello
obj.2bc //error 글자만 사용가능
obj['2bc'];
obj['c a'];

 

대괄호 안에 문자열로 넣는 이유로는 값이 달려져서 입니다.

const name = 'date';

console.log(info['name']);
console.log(info[name]); //info['date']와 같음
console.log(info.hello);

//실행결과
홍길동
10
undefined

 

객체 속성 수정하는 법

info.gender = 'F';
console.log(info.gender);

//실행결과
F

 

객체 속성 제거하는 법

delete info.gender;
console.log(info.gender);

//실행결과
undefined

 

배열과 함수가 객체인 이유?

이유는 객체의 성질을 모두 다 사용할 수 있기 때문입니다.

배열과 함수에도 속성들을 추가할 수도 있고 수정 및 제거할 수도 있습니다.

객체는 함수와 배열을 포함하는 개념이라서 {}를 사용해 만든 객체를 객체 리터럴이라고 따로 부르는 것 입니다.

function hello() {}
hello.a = 'really?';
const array = []'
array.b = 'wow';

console.log(hello.a);
console.log(array.b);

//실행결과
really?
wow

 

메서드 이해하기

속성 값으로 자바스크립트의 모든 값을 넣을 수 있습니다. 문자열도 되고, 숫자, 불 값, null, undefined도 됩니다.

그리고 함수, 배열, 다른 객체까지도 넣을 수 있습니다.

객체의 속성 값으로 함수를 넣었을 때 이 속성을 특별히 메서드(method)라고 합니다.

const debug = {
  log: function(value) {
    console.log(value);
  },
};

debug.log('Hello, Method');