[자바스크립트] 딥다이브) 객체 리터럴

자바스크립트는  객체 기반의 프로그래밍 언어

ㄴ객체의 집합으로 프로그램을 표현하는 프로그래밍 패러다임

 

1) 객체 

- 객체 (= object)

ㄴ0개이상의 프로퍼티로 구성된 집합 (프로퍼티는 키 key와 값 value로 구성됨)

ㄴ함수도 프로퍼티 값으로 사용가능 / 프로퍼티 값이 함수면 일반함수와의 구별을 위해 method라고 부름 

ㄴ프로퍼티와 메서드로 구성된 집합체

ㄴ변경 가능한 값 (mutable value)

ㄴ자바스크립트를 구성하는 거의 '모든 것'

ㄴ원시값(변경 불가능한 값)을 제외한 나머지 값(함수, 배열, 정규표현식 등)

ㄴ값과 메서드를 모두 포함할수 있어 상태와 동작을 하나의 단위로 구조화할 수 있어 유용함

 

- 객체 타입(= reference type)? 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조 (원시타입? 단 하나의 값만 나타냄)

 

프로퍼티 : 객체의 상태를 나타내는 값 (data)

메서드 : 프로퍼티를 참조하고 조작할 수 있는 동작 (behavior)

 

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

ㄴ객체 리터럴 

ㄴObject 생성자 함수

ㄴ생성자 함수

ㄴObject.create메서드

ㄴ클래스 (ES6)

let person = {             //객체 리터럴
	name : 'Shin'
    sayHallo : function() {
    console.log(`Hello My name is ${this.name}.`);
    }
  };    //코드블록이 아니기 때문에 세미콜론 붙여야 함

- 인스턴스 :  클래스에 의해 생성되어 메모리에 저장된 실체

(객체지향 프로그래밍에서 객체는 클래스와 인스턴스를 포함한 개념 / 클래스는 인스턴스를 생성하기 위한 템플릿 역할을 함) 

 

3) 프로퍼티 

ㄴ키와 값으로 구성

ㄴ프로퍼티를 나열할 때는 쉼표(,)로 구분

ㄴ마지막 프로퍼티 뒤에는 쉼표 사용하지 않으나 사용해도 무방 

ㄴ프로퍼티 키는 값에 접근할 수 있는 이름으로 식별자 역할함 

ㄴsymbol값도 프로퍼티 키로 사용할 수 있지만 일반적으로 문자열 사용(식별자 네이밍 규칙 따르지 않는 이름은 따옴표 사용해야 함)

let person = {
	firstName : 'Zzanggu',  //식별자 네이밍규칙 준수
    'last-name' : 'Shin'    //식별자 네이밍규칙 비준수
  };
  
console.log(person) // {firstName: 'Zzanggu', last-name : 'Shin' }

let obj = {};
let key = 'hi';
obj[key] = 'bye';
console.log(obj); // { hi : 'bye' } ;

let zzanggu = {
	"" : ''  //빈 문자열도 프로퍼티 키로 사용가능
   };
   
let 숫자키 = {
	0: 1,  //프로퍼티 키에 문자열이나 symbol값 이외 값을 사용하면 암묵적 타입변환되어 문자열처리됨 
    2: 2,
    4: 3,
    4: 4   //프로퍼티 중복선언하면 나중에 선언된 프로퍼티만 살아남음
   };
console.log(숫자키);  //{0: 1, 2: 2, 4: 4} //숫자를 프로퍼티 키로 사용해도 (따옴표안붙었지만)문자열임

 

 

4) 메서드 

ㄴ객체의 값으로 있는 함수

let 원 = {
	반지름 : 5,  
    지름구하기 : function(){   //메서드
    			return this.반지름 * 2;
                },
    };

 

5) 프로퍼티 접근 : 식별자 네이밍 준수하는 프로퍼티 키면 아래 접근법 둘 다 사용가능 

ㄴdot notation(점표기법 / 객체명.프로퍼티키) 

ㄴbracket notation (대괄호표기법 / 객체명['프로퍼티키']) : 프로퍼티 키는 반드시 따옴표로 감싸야함 (따옴표없으면 에러남)

ㄴ객체에 존재 하지않는 프로퍼티 접근하면 undefined반환함(에러안남)

ㄴ식별자 네이밍 준수안한 프로퍼티키는 대괄호 표기법 사용권장 

let manga = {
	name: '짱구는 못말려',
    };
 console.log(manga.name);    //'짱구는 못말려' - dot
 console.log(manga['name']); //'짱구는 못말려' - bracket
 console.log(manga[name]);   // referenceError
 console.log(manga.age);     // undefined
 
 let 인간 = {
 	'last-name' : 'Shin',
    1: 5,
  };
  
 인간.'last-name'; //syntaxError
 인간.last-name;   //브라우저 환경 : NaN & node.js환경 : referenceError
 
 인간[last-name];  //referenceError
 인간['last-name'];//Shin

인간.last-name를 실행할때 자바스크립트 엔진은 인간.last까지를 먼저 평가하는데 객체에 last라는 키가 없기 때문에 undefined이됨

=> undefined-name이 되는것 

=> 자바스크립트엔진은 name을 식별자로 해석해서 찾기 시작

=> 브라우저는 name이라는 windeow프로퍼티가 암묵적으로 존재하는데 기본값은 빈문자열로 undefined-'' => NaN

=> node.js는 name 이라는 식별자가 없음 => referenceError

 

 

6) 프로퍼티 값 갱신 

ㄴ이미 존재하는 프로퍼티에 값할당 다시하면 프로퍼티 값 갱신됨 

 

7) 프로퍼티 동적생성

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

let 인간 = {};
인간.나이 = 20;
console.log(인간); // { 나이: 20 }

 

8) 프로퍼티 삭제

ㄴdelete연산자로 객체 프로퍼티 삭제함

ㄴ없는 프로퍼티 삭제하면 에러 나지 않고 무시됨 

let 슈베르트 = {
	미완성 : '8번',
    완성 : '7번'
   };
delete 슈베르트.아직완성; // 무시됨
delete 슈베르트.미완성;  // 지워짐
console.log(슈베르트); // { 완성 : '7번' }

 

 

9) ES6에서 추가된 객체 리터럴 확장기능 

  - 1) 프로퍼티 축약표현 

ㄴ프로퍼티 값으로 변수를 사용하는 경우, 변수이름과 프로퍼티 키가 동일값일때 프로퍼티 키 생략 가능 

let x = 10, y = 20;

const obj = {x, y};
console.log(obj);  //{ x : 10,  y : 20 }

 

  - 2) 계산된 프로퍼티 이름 

const prefix = 'prop';
let i = 0;
const objES5 = {};

objES5[prefix + '-' + ++i] = i;
objES5[prefix + '-' + ++i] = i;
objES5[prefix + '-' + ++i] = i;
console.log(objES5);  // {prop-1: 1, prop-2: 2, prop-3: 3}

const objES6 = {
	[`${prefix}-${++i}`] :i ,
    [`${prefix}-${++i}`] :i ,
    [`${prefix}-${++i}`] :i ,
   };

console.log(objES6);  // {prop-1: 1, prop-2: 2, prop-3: 3}

 

  - 3 ) 메서드 축약 표현 

// Es5
let objES5 = {
	myName : '짱구',
	인사하기 : function() {
    console.log('Hi' + this.myName);
   	},
  };
objES5.인사하기(); // Hi 짱구


//Es6
let objES6 = {
	name : '짱',
    인사하기(){     //메서드 축약 표현
    console.log('Hi' + this.name);
    },
  };
objES6.인사하기(); // Hi 짱