객체: 기본 - 객체

객체

자바스크립트의 8가지 자료형중 객체형을 제외한 나머지 7개는

오직 하나의 데이터만 담을 수 있어 '원시형'( primitive type )이라고 부릅니다.

 

오늘 공부할 객체형은 원시형과는 다르게 다양한 데이터를 담을 수 있습니다.

 

객체를 만드는 방법은 두 가지 입니다.

let person = new Object();	//객체 생성자 문법 입니다.

let person = {};		//객체 리터럴 문법 입니다.

 

상수(const) 객체도 수정할 수 있습니다.

아래에서 person의 값 자체를 수정하려고 할 때만 에러가 발생합니다.

const person = {
    name: 'Lee',
}

person.name = 'kim'  // 수정 가능합니다 !

person = ["Lee"] // TypeError: Assignment to constant variable.

console.log(person) // {name : 'kim'}

 

 

 

delete

delete 연산자를 사용하여 프로퍼티를 삭제할 수 있습니다.

let person = {
    name: 'Lee',
    age: 21
}

delete person.name

console.log(person) // {age : 21}

 

 

점 표기법, 대괄호 표기법

여러 단어를 조합해 property key를 만들 경우에는 따옴표로 묶어줘야 합니다.

여러 단어를 조합해 만든 property key는 점표기 법을 사용해 읽을 수 없습니다.... 

let person = {
    name: 'Lee',
    age: 21,
    "love study" : true, // pass ^ ^
    love soccer : true  // error ㅡㅡ
}

console.log(person.love study) // 아예 읽지를 못해요 ㅠㅠ

여러 단어를 조합해 만든 property key는 대괄호 표기법으로만 읽을 수 있습니다.

나머지 property key들도 모두 대괄호 표기법으로 읽을 수 있습니다.

const person = {
    name: 'Lee',
    age: 21,
    "love study" : true,
}

console.log(person["love study"])	// true
console.log(person["name"])		// Lee

 

대괄호 표기법을 이용해 유연한 코드 작성이 가능합니다~

const person = {
    name: 'Lee',
    age: 21,
    "love study" : true,
}

let key =  prompt('원하는 값의 키를 입력하세요','name')

console.log(person[key]) // Lee (name 입력 시)
대괄호 표기법으로는 이런 코드가 가능합니다.

console.log(person.key) // undefined 
점 표기법으로는 불가능합니다.

 

computed property

property key명에 변수의 값을 할당하는 것이 가능합니다!!!!!

 

property key를 대괄호로 둘러싸서 computed property (계산된 프로퍼티)를 만들면 됩니다!

let product = prompt('뭘 사고싶어요?','Computer')

const wishList = {
    [`want${product}`] : "computed property", // 대괄호 안에서 백틱 ( ``) 사용이 가능합니다.
    'want Computer' : "two word property"  // 백틱 ( `` )으로 대체할 수 없습니다 ㅠㅠ
}

console.log(wishList.wantComputer) // "computed property",
console.log(wishList["want Computer"]) // "two word property"

 

 

property value shorthand (단축 프로퍼티)

property key와 value의 이름이 동일할경우 단축구문을 사용해서 코드를 짧게 줄일 수 있습니다.

function userInfo(name,age,sex) {
  return{
    name,		//name : name
    age,		//age : age
    sex,		//sex : sex
  }
}

let user1 = userInfo('kim', 26, 'male')

console.log(user1.name) // kim

 

property key 제약사항

key에는 문자형만 올 수 있고, value에는 모든 자료형이 올 수 있습니다.

변수 이름에는 for, let , return 같은 예약어를 사용 할 수 없지만,

객체의 property key로는 사용할 수 있습니다!!

 

let propertyKey = {
  for : '사용가능',
  let : '사용가능',
  return : '사용가능',
  const : '사용가능',
}

console.log(propertyKey.for)	//사용가능
console.log(propertyKey.let)	//사용가능
console.log(propertyKey.return)	//사용가능
console.log(propertyKey.const)	//사용가능

 

 

property key에

문자형이나 심볼형에 속하지 않은 값들이 오면 문자열로 자동 변환됩니다.

let propertyKey = {
  0 : 'property key 0',	// 숫자형 0은 문자형으로 자동 변환됩니다.
  "1" : 'property key 1',
}

console.log(propertyKey[0])	//property key 0
console.log(propertyKey['0'])	//property key 0
console.log(propertyKey[1])	//property key 1
console.log(propertyKey['1'])	//property key 1

 

 

in 연산자

자바스크립트 객체의 중요한 특징중 하나는

존재하지 않는 property에 접근하려 해도 에러가 발생하지 않고

undefined를 반환 한다는 것입니다.

let property = {}

console.log(property.none) // undefined

 

 in연산자로 객체의 property 존재 유무를 알 수 있습니다.

let obj = {
  true : "it's true!",
  false : "it's false!"
}

console.log('true' in obj)   // true
console.log('false' in obj)  // true

"key" in object 의 형식으로 사용할 수 있습니다~
 key의 따옴표를 생략하면 원하지 않게 변수가 조사 대상이 될수 있으니 조심하세요 ~!

 

for...in 반복문

for...in문을 사용하면 객체의 모든 key를 인자로 사용해서 반복문을 실행시킬 수 있습니다.

for문과 같이 반복 변수를 선언했습니다. ( let grade )

let cutOfScore = {
	A : '95점 이상',
	B : '90점 이상',
	C : '85점 이상',
	D : '80점 이상',
	E : '75점 이상'
}

for(let grade in cutOfScore){
	console.log(grade)
	console.log(cutOfScore[grade])
}

결과

 

객체 정렬 방식

객체의 프로퍼티에도 순서가 있습니다.

 

정수 프로퍼티의 경우는 자동으로 낮은 숫자부터 정렬되고

그 외의 프로퍼티의 경우에는 작성한 순서 그대로 정렬됩니다.

 

정수 프로퍼티란?

문자열을 정수로 변환하거나 변환한 정수를 다시 문자열로 바꿔도 변형이 없는 문자열을 의미합니다.

ex) 문자열 "10"은 정수로 변환해도 10이고 다시 문자열로 변환해도 "10" 입니다.  --> 정수 프로퍼티입니다.

ex) 문자열 "1.2"는 정수로 변환하면 1이 되므로 변형이 생깁니다. 

 

 

기본이 중요하다.