JS 21.03.10

10 Mar 2021 in Dev on Java Script

object : 데이터가 다양한 속성을 가지고 있는 경우에 객체를 사용

object property를 통한 value 조회 방법

dot notation :property가 정적일때 사용

// syntax
object.property

//ex code
obj = {
	job: 'dev',
	age: 20
};

obj.job // dev
obj.age // 20

bracket notation 주의사항 : property를 반드시 ‘String’ type으로 입력해라. string type이 아니면 변수로 취급되고 정의 되지 않은 변수를 찾을수 없다는 에러 발생

// syntax
객체['키 이름']

// ex code
object['job'] // dev
object['age'] // 20

obj[job] // Uncaught ReferenceError: job is not defined
obj[age] // Uncaught ReferenceError: age is not defined

bracket notation을 function 내에서 사용 할 때 :property가 동적(변수, 별할 수 있을 때)일 때 사용

// syntax
// proerty는 값이 변하는 parameter / argument가 담기므로 ''가 들어갈 필요가 없다.
객체[값이 변하는 변수(매개변수)]

// ex code
let person = {
	name : 'lee',
	age: 20
}

let pet = {
	name : 'Mee',
	age: 2
}

function getProperty(obj, key) {
	// key는 parameter이고 argument에 따라 들어오는 값이 달라지므로 
	// ''를 사용하면 안된다.
	return obj[key];
}

getProperty(person, 'name')); //lee
getProperty(pet, 'age')); //2

object에 key:value 추가 / 변경 / 삭제 / 포함 여부 체크

추가

// syntax
객체['새로 추가 할 키'] = 새로 추가 할 키에 넣을 값;

// ex code
obj = {
	job: 'dev',
	age: 20
};

// key value 추가
obj['name'] = 'creamer';

obj 
// {job: "dev", age: 20, name: "creamer"}

변경

// syntax
객체['값을 변경할 기존의 키'] = '할당할 값'

// 기존에 있던 key의 value 변경
obj['job'] = 'blockchain dev'; 

obj
// {job: "blockchain dev", age: 20, name: "creamer"}

삭제

// syntax
delete 객체['삭제할 키']

delete obj['age'];

obj
//{job: "blockchain dev", name: "creamer"}

-object의 key의 value 존재 여부 체크 : boolean으로 return

// syntax
'확인할 키' in 객체; 

'job' in obj; // true;
'age' in obj; // false;

Object.method

Object.assign() : 하나 이상의 원본 객체들로부터 모든 열거가능한 속성들을 대상 객체로 복사합니다.

let target = { a: 1, b: 2 };
let source = { b: 4, c: 5 };

let returnedTarget = Object.assign(target, source);

console.log(source);
// { b: 4, c: 5 }

// 첫번째 인자가 변경됨. key가 중복되는 경우 뒤에 추가하는 key의 value로 변경
console.log(target);
// { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// { a: 1, b: 4, c: 5 }

Object.values(객체) : 객체의 각 key를 배열로 return

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

Object.keys(object1)
// ["a", "b", "c"]

Object.values(객체) : 객체의 각 key의 value를 배열로 return

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

Object.values(object1)
// ["somestring", 42, false]

.hasOwnProperty() : 객체가 특정 key를 가지고 있는지 Boolean 값으로 return

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

object1.hasOwnProperty('a'); // true
object1.hasOwnProperty('b'); // true
object1.hasOwnProperty('c'); // true
object1.hasOwnProperty('d'); // false

Object iteration

for in

for-in 루프가 다른점은 프로토 타입 체인의 속성도 열거한다는 점

// syntax
for(let [키 변수] in 순회할 객체){
	실행문
	key = 키 변수
	value = 순회할객체[키 변수]
}

let obj = {
  a: 'somestring',
  b: 42,
  c: false
};

for (let key in obj ){
	// key 반복
	console.log(key)
	// value 반복
	console.log(obj[key])
}
// a
// somestring
// b
// 42
// c
// false

object.entries : for of 사용 (for of는 주로 array에 사용)

// syntax
for(let [키 변수, 값 변수] of Object.entries(순회할 객체)){
	실행문
	key = 키 변수
	value = 값 변수
}

// ex code
let obj = {
  a: 'somestring',
  b: 42,
  c: false
};

for(let [key, value] of Object.entries(obj)){
	// key 반복
	console.log(key);
	// value 반복
	console.log(value);
};
// a
// somestring
// b
// 42
// c
// false

// 해당 배열 순서가 쓸 곳이 있다면 정렬을 먼저 하시는 것이 좋습니다 
// 정렬 방법 : Object.entries(obj).sort((a, b)