🌊 [javascript] 객체 리터럴

 

🌊 [javascript] 객체 리터럴

객체 리터럴

🌊 객체란?

 

• 자바스크립트는 객체 기반의 프로그래밍 언어이다.
• 원시 값을 제외한 자바스크립트를 구성하는 거의 모든 것(함수, 배열, 정규표현식 등)이 객체다.
• 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조다.
• 객체는 변경 가능한 값이다.
• 객체는 0개 이상의 프로퍼티로 구성 된 집합이며 프로퍼티는 키(key)와 값(value)으로 구성
• 함수도 프로퍼티 값으로 사용할 수 있으며 프로퍼티 값이 함수일 경우 메서드(method)라고 부른다.
• 함수로 객체를 생성하기도 하며 함수 자체도 객체이다.

let ogu = {
  age : '30',
  job : 'programmer'
  family : 'babyogu',
  pet : 'hamgu',
  name : function(name) {
    return `내 이름은 ${name}입니다.`;
  }
}

1. 프로퍼티 : 객체의 상태를 나타내는 값 (data)
   • 위 코드에서 age, job, family가 해당 된다.
     
     
2. 메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작 (객체 안의 함수)
   • 위 코드에서 name이 해당된다.

🌊 객체 생성 방법

 

• 객체 리터럴 : 가장 일반적이고 간단한 방법.
• Object 생성자 함수
• 생성자 함수
• Object.create 메서드
• 클래스(ES6)

let ogu = {}; // 빈 객체

객체 리터럴은 값으로 평가되는 표현식으로 중괄호 뒤에 세미콜런(;)을 붙인다.
중괄호 내에 프로퍼티를 정의하지 않으면 빈 객체가 생성

🌊 프로퍼티

객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.

let ogu = {
  job : 'programmer', // 프로퍼티 키는 job, 값은 'programmer'
  }
}

• 프로퍼티 키 :
  빈 문자열을 포함하는 모든 문자열 또는 심벌 값 (일반적으로는 문자열을 사용한다)
  • 식별자 네이밍 규칙을 준수하는 이름인 경우 따옴표 생략 가능.
• 프로퍼티 값 :
  자바스크립트에서 사용할 수 있는 모든 값

🌊 메서드

프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드라 부른다.
즉, 메서드는 객체에 묶여있는 함수를 의미한다.

🌊 객체 사용법, 프로퍼티 접근법

 

표기법

1. 마침표 표기법(Dot notation)
2. 대괄호 표기법(Bracket notation) :
   • 괄호 표기법을 사용하는 경우 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다.
   • 따옴표로 감싸지 않으면 선언되지 않아 key를 찾지 못 한다.

주의점

1. 객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환한다.
2. 프로퍼티 키가 숫자로 이뤄진 문자열인 경우 따옴표를 생략할 수 있다.

let ogu = {
  job : 'programmer', '
  }
}

// 마침표 표기법
console.log(ogu.job); // programmer

// 대괄호 표기법
console.log(ogu['job']) // programmer

// 대괄호 표기법의 key가 문자열이 아닐 경우
console.log(ogu[job]) // ReferenceError : job is not defined

🌊 프로퍼티 갱신, 생성, 삭제

 

갱신

: 이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신됨.

생성

: 존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 값이 할당 됨

Delete

: Delete 연산자로 프로퍼티를 삭제할 수 있다.

let ogu = {
  job : 'student', '
  }
}

// 프로퍼티 값 갱신
ogu.job = 'programmer';
// 프로퍼티 동적 생성
ogu.age = '30';
// 프로퍼티 삭제
delete ogu.age; 

🌊 ES6에서 추가된 객체 리터럴의 확장 기능 ***

 

1. 프로퍼티 축약 표현 :

ES6에서는 프로퍼티 값으로 변수를 사용하는 경우, 변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략 할 수 있다.

let age = 30;
let job = 'programmer';

let ogu = {
	age,
  	job
  }


console.log(ogu); // {age: 30, job: 'programmer'}

2. 계산된 프로퍼티 이름 :

문자열 또는 문자열로 타입 변환할 수 있는 값으로 평가되는 표현식을 사용해 프로퍼티 키를 동적으로 생성.

단, 프로퍼티 키로 사용할 표현식을 대괄호([...])로 묶어야 한다.

✔ ES5 : 객체 리터럴 외부에서 대괄호 표기법 사용

//es5
let num = 0;
let project = 'project';
let ogu = {};

 ogu[project+ '-' + ++num] = num;
 ogu[project+ '-' + ++num] = num;
 ogu[project+ '-' + ++num] = num;

 console.log(ogu); // {project-1: 1, project-2: 2, project-3: 3}

✔ ES6 : 객체 리터럴 내부에서도 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성 가능

//es6
 let project = 'project';
 let num = 0;

 let ogu = {
 [`${project}-${++num}`] : num,
 [`${project}-${++num}`] : num,
 [`${project}-${++num}`] : num,    
 };

 console.log(ogu) // {project-1: 1, project-2: 2, project-3: 3}

3. 메서드 축약 표현

✔ ES5

let obj = {
 greeting: function(){
   console.log('Hi' + this.name) ;
 }
}
obj.greeting();

✔ ES6 : function 키워드를 생략한 축약 표현 사용 가능

let obj = {
 greeting(){
   console.log('Hi' + this.name) ;
 }
}
obj.greeting();