객체

이성은·2022년 11월 4일
0

객체

  • 하나의 변수에 여러가지 정보가 담겨져 있을때 적합하다.
  • 객체는 키(key)와 값(value)이 쌍으로 이루어져있다.
    • property : 키와 값의 조합으로 구성
    • key : 객체는 데이터에 이름을 부여할 수 있음
    • value : key를 통해 데이터에 부여한 값
    • obj = { key : value };
  • 객체는 다량의 데이터를 한 번에 다룰 수 있는 참조자료형

객체의 값을 사용하는 방법

  • Dot notation
    • obj.key
    • 객체의 속성을 가져옴, 키 값이 변경되지 않는 상황에서 사용
  • Bracket notation
    • obj[‘key’]
    • 키 값이 동적으로 변하는 상황에서 사용.
let user = {
  firstName : 'Steve',
  lastNAme:'Lee',
  email : 'steve@codestates.com',
  city : 'seoul'
};

// <Dot notation>
 user.firstName;  //'Steve'
 user.city;   // 'seoul'

//<Bracket notation>
user['firstName'];  //'Steve'
user['city'];   // 'seoul'

Property vs Method

  • Property : 객체의 상태를 나타내는 값(data), 자바스크립트에서 사용가능한 모든 값
  • Method : 속성을 참조하고 조작할 수 있는 동작 → 객체 내부의 함수

객체의 속성 추가

  • 빈 객체에도 추가 가능
  • 없는 키에 값을 넣으면 새로운 속성 만듦
  • 있는 키에 값을 넣으면 재할당, 값이 수정됨
  • 키의 값은 객체, 배열, 문자열 등 상관 없음
  • 객체 내부에 값으로 들어오는 배열, 객체, 함수 등도 같은 방법으로 적용이 가능함
let obj = {
	key1 : value1 ,
	key2 : value2 ,
	key3 : value3
}

obj.key1 = ‘newValue1’; // 키의 값 추가
obj[‘key2’] = ‘newvalue2’; // 키의 값 추가

obj.key4 = [‘arr’]; // 속성 추가, 키의 값 배열 추가
obj.key5 = true; // 속성 추가, 키의 값 불리언 추가
odj[key6] = true; // key값이 변수인 속성 추가, 키의 값 불리언 추가 

obj1[property] = obj2; // obj1의 키에 obj2 객체를 할당
  • Object.keys() : 객체의 key들을 요소가 문자열인 배열로 반환
    • Object.keys(obj).length; : 객체 속성의 개수 확인
// Object.keys()를 사용하여 객체의 모든 키를 순회하기
// Object.keys()로 obj를 배열로 만들고 for of문 사용

function allKeys(obj) {
	let arr = Object.keys(obj);
	for (let el of arr) {
		console.log(obj[el]) // obj객체의 키가 el인 값
	}
}
  • delete 키워드 : 속성 삭제 , delete obj.key;

  • in 연산자 : 해당하는 키가 있으면 true 없으면 false 반환, ‘key’ in obj;

for of vs for in

  • for of : string, array, 유사배열 등에만 사용되고, 객체에는 사용 X
  • for in : 객체를 순회하는 반복문
// 두 개의 객체를 입력받아 두 번째 객체(obj2)의 속성들을 첫 번째 객체(obj1)에 추가하는 함수

function extend(obj1, obj2) {
	for (let key in obj2) {
		if (!(key in obj1)) {
			obj1[key] = obj2[key]; // obj1에 obj2의 속성들을 추가 
		}
	}
}
profile
함께 일하는 프론트엔드 개발자 이성은입니다🐥

0개의 댓글