객체 리터럴

김태형·2021년 11월 23일
0
post-thumbnail

객체란?

속성(프로퍼티)와 동작(메서드)로 이루어진 데이터의 집합체

  1. 객체는 키와 값으로 이루어져있다.
  2. 자바스크립트의 함수는 일급 객체 이므로 값으로 취급 가능하다.(메서드)

객체 리터럴에 의한 객체 생성

C++ JAVA 같은 클래스 기반 객체지향 언어들은 사전에 클래스를 정의하고 필요시에 new 연산자를 사용해 인스턴스화 시켜서 사용한다

인스턴스
객체로 복제해낸 완전 새로 생성된 객체.

자바스크립트는 프로토타입 기반 객체지향 언어로서 클래스 기반 객체지향 언어와는 달리 다양한 객체 생성방법이 있다.

  1. 객체 리터럴
  2. Object 생성자 함수
  3. 생성자 함수
  4. Object.create 메서드
  5. 클래스(ES6)
//객체 리터럴 생성법.
var person = {
 	name : "태형",
  	setName : function(){
    		//코드
    	}
};

//객체 리터럴의 중괄호는 블럭문이 아닌 표현식이기 떄문에 세미콜론으로 닫아준다.

프로퍼티

객체는 프로퍼티의 집합체이다. 프로퍼티는 키와 값으로 구분한다.
키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
값 : 자바스크립트에서 사용하는 모든 값
접근방식 : 객체.속성, 객체['속성'] 두 가지 방법이 있음

객체에 존재하지 않는 속성에 접근하면 에러가 아니라 undefined 반환

//프로퍼티 동적생성
person[dynamic] = "동적" // [] 접근방식
person.dynamic = "동적"  // . 연산자 접근방식

//프로퍼티 삭제
delete person.dynamic

//ES6 에서 프로퍼티 이름과 값이 같으면 축약표현가능
var short = {
 name,
 age
}
console.log(short.name) //name

//ES5 계산된 프로퍼티 동적생성
//단 동적생성 방법이 [''] 접근 방식이어야함
var prefix = 'prop';
var i = 0;
var obj = {}; //빈객체

for(var i=0; i<3; i++){
  obj[prefix+'-'+i] = i;
}
  console.log(obj); //{prop-0 : 0,prop-1 : 1,prop-2 : 2}


//ES6 계산된 프로퍼티 동적생성
const prefix = 'prop';
let i = 0;
const obj = {
	[`${prefix}-${++i}`]:i,
  	[`${prefix}-${++i}`]:i,
	[`${prefix}-${++i}`]:i
};
//위 코드는 교재의 코드인데 초기화 문제가 생긴다 무엇일까..

var prefix = 'prop';
var i = 0;
var obj = {};

for(var i=0; i<3; i++){
	obj[`${prefix}-${i}`]=i;
}

console.log(obj);

//메서드 축약표현

//ES5에서 메서드 선언
var obj = { 
 	name:"kim",
 	sayHello: function(){
   		console.log(this.name+"님 안녕하세요"); 
 	}
}

//ES6에서 메서드 선언
var obj = { 
 	name:"kim",
 	sayHello(){
   		console.log(this.name+"님 안녕하세요"); 
 	}
}
profile
생각정리 공간

0개의 댓글

관련 채용 정보