(TIL) D+10 객체

JulyK9·2022년 7월 9일

개발자가 되기 위한 여정

목록 보기

11/35

객체 개요

입력해야 하는 데이터의 종류가 동일한 경우 객체를 사용하면 손쉽게 데이터를 관리할 수 있음
공통적인 속성을 가지는 경우 객체를 사용

학습 목표

배열과 객체의 특징을 구분
객체 속성(property)의 추가, 조회, 변경, 삭제를 자유자재로
객체 속성 조회법 2가지, dot notation과 bracket notation의 차이를 이해
배열과 객체, 반복문을 응용하여 능숙하게 대량의 정보를 다룰 수 있어야 함

객체의 값을 사용하는 방법 2가지

방법1 : Dot notation
방법2 : Bracket notation
주의 : 대괄호(square bracket) 안에 들어가는 객체의 키가 문자열 형태로 들어감(따옴표 누락 주의)
참고1 : 따옴표는 ‘’(따옴표), “”(쌍따옴표),(백틱) 모두 가능, 즉 문자열 형태로 들어가면 되는것
참고2 : 따옴표를 걷어낸 상태에서는 변수로 인식을 함.
따라서 따로 변수를 만들어서 객체의 키를 할당해주고 대괄호 안에 변수를 넣어서 접근하는 방법도 가능함

객체의 속성을 가져오는 방법

그럼 언제 Bracket notation 을 언제써야되는가?

키 값이 변하는 경우(즉 키 값이 정해지지 않고 뭐가 들어올지 모를 때)
=> 예를 들면 매개변수를 키로 넣어줘야 하는 경우(매개변수는 인자로 뭐가 들어올지 모르고 계속 바뀌니까)
주의 : 이때는 변수로서 넣어줘야 하므로 따옴표를 붙이면 안됨!

dot notation 은 키가 확정적일 때 사용
bracket notation 은 키가 유동적일 때 주로 사용

dot/bracket notation을 이용해 키-값을 추가 및 삭제

// dot/bracket notation을 이용해 값을 추가할 수 있음
let tweet = {
	writer: 'stevelee',
  	createAt: '2019-09-10 12:03:33',
  	content: '프리코스 재밌어요!'
};

tweet['category'] = '잡담';
tweet.isPublic = true;
tweet.tags = ['#코드스테이츠', '#프리코스'];

// delete 키워드를 이용해 삭제가 가능
let tweet = {
  	writer: 'stevelee',
  	createAt: '2019-09-10 12:03:33',
  	content: '프리코스 재밌어요!'
};

// createAt 키-값 쌍을 지웁니다
delete tweet.creatAt;

// tweet은 다음과 같이 됨
// { writer: 'stevelee', content: '프리코스 재밌어요!' }

// in 연산자를 이용해 해당하는 키가 있는지 확인할 수 있음
let tweet = {
  	writer: 'stevelee',
  	createAt: '2019-09-10 12:03:33',
  	content: '프리코스 재밌어요!'
};

'content' in tweet; // true
'updatedAt' in tweet; // false

❓객체내에 함수가 요소로 있는 경우 Bracket notation 접근시 관련 의문사항
=> 'Bracket notation 방법'으로는 '객체안에 있는 함수'에 접근은 가능해도 '실행하는 것'은 안되는가?

let john = {
  name: "John",
  sayHi: function() {
    alert("친구야 반갑다!");
  }
};

john.sayHi(); // 친구야 반갑다! => 즉 함수를 실행함!
john['sayHi']; // 그냥 함수를 출력하고 실행을 하지 않음!
john.sayHi; // 그냥 함수를 출력하고 실행을 하지 않는 결과가 같음!
john['sayHi()']; // 혹시나 해서 해봤는데.. undefined 

// 엔지니어님 문의를 통해 방법을 확인함!
john['sayHi'](); // 아 Bracket notations 으로 실행할 때는 바깥쪽에 실행괄호를 넣네!

배열과 객체의 차이점

배열과 객체의 가장 큰 차이점 : 순서 정보(index)의 유무
배열은 요소에 0부터 순차적으로 접근할 수 있지만
객체는 속성에 순서대로 접근하지 않고, key를 통해서 value에 접근
(객체도 인덱스가 있다???)
배열은 인덱싱이 있어서 순서 정보 활용하기 좋음 ⇒ 반복문 활용 좋음
객체는 의미 정보 중심