객체

밀크티에 환장하는 개발자·2022년 5월 10일

JavaScript TIL 코드스테이츠 프론트엔드

JAVASCRIPT

목록 보기

6/19

오늘의 Checkpoint

배열 : 순서 정보 -> 인덱스
객체 : 순서X, 데이터의 의미 -> 키

객체

데이터가 공통적인 속성을 가지며 관계를 표현해야 할 경우 객체를 사용

{} 중괄호 사용
키와 값으로 이루어짐 : key : value 의 나열
키-값 쌍은 쉼표로 구분
참조형 타입

ex. 회원마다 공통적으로 이름, 이메일, 거주지 등의 정보가 필요
cf. 배열은 관계만 표현 : 인덱스가 어떤 정보를 표현하는지 표시X

let user = {
  fullName : 'April',
  birth : '4월 2일',
  age : 20,
  address : 'ap0402@gmai.cm',
  content : '수강생'
};

객체의 사용

Dot notation

. 온점을 사용하여 객체의 데이터에 접근

/*
객체.키;
*/
user.fullName; // 'April'
user.age; // 20

Bracket notation

[] 대괄호를 사용하여 객체의 데이터에 접근

키가 변수일 때는 항상 bracket notation 사용

/*
객체['키']; 
-> 대괄호 안에는 문자열 형태의 키를 사용
cf. 문자열을 할당받은 변수도 사용 가능
*/


user['content'];
user['content'] === user.content; // true
let keyname = 'content';
user[keyname]; // 변수가 문자열의 의미하면 사용 가능


let content = 'name';
user[content] === user['content']; // false

객체의 데이터 추가

dot/bracket notation으로 데이터 추가 가능
기존의 데이터 변경

user['category'] = '정기 회원';
user.isPublic = true;
user.tags = ['#몸짱', '#운동'];
/*
기존의 데이터 변경 가능
user.isPublic = false;
*/

객체의 데이터 삭제

delete 키워드로 데이터 삭제
-> 해당 키의 속성값이 아닌 속성 자체를 제거
-> 키-값 쌍으로 제거

delete user.isPublic;

객체의 키 확인

in 연산자를 사용하여 객체 내부에 키가 있는지 확인 가능
-> boolean 타입으로 반환

'isPublic' in user; // false
'category' in user; // true

객체에 for ~ in 반복문을 사용
-> key를 추출하여 반복문 진행
for (let keys in obj){
	// 반복문 실행 코드
}
cf. for~ in을 배열에 사용하면 인덱스를 기준으로 순회
for~of 은 배열, 유사배열인 문자열 등에 사용

이해도 자가 점검 리스트

Chapter1. 배열

배열에서 특정 인덱스(index)의 요소(element)를 조회하거나, 변경할 수 있다.
length 속성을 이용하여 배열의 길이를 조회할 수 있다.
배열의 요소가 배열인 이중 배열을 이해하고, 이중 배열의 요소를 조회하거나 변경할 수 있다.
배열의 각 요소에 대하여, 반복하는 코드를 실행시킬 수 있다.
배열에서 사용되는 다양한 메서드를 알고 사용할 수 있다.
split(), join(), slice(), splice(), Array.isArray(), push(), unshift(), pop(), shift(), indexOf(), includes()

Chapter2. 객체

배열과 객체의 특징을 구분하고, 배열과 객체의 특징에 따라 웹 애플리케이션 개발 시 어떻게 사용되는지 이해한다.
객체 속성(property)의 추가, 조회, 변경, 삭제를 자유자재로 할 수 있다.
객체 속성 조회법 두 가지, dot notation과 bracket notation의 차이를 이해한다.
배열과 객체에 반복문을 응용하여 능숙하게 대량의 정보를 다룰 수 있다.

자기주도적 학습 가이드

이해도 자가 점검 리스트의 결과를 토대로 자기주도적 학습 계획을 수립하고 실천해 보세요.

오늘 학습이 어려웠다면(0~6개)

개념학습 다시 보기
연습 문제 다시 풀어보기
이해되지 않는 개념 아고라스테이츠에 질문하기

오늘 학습이 수월했다면(7-8개)

배열의 요소와 객체의 속성을 조회, 추가, 변경, 삭제하는 방법에 대해 블로깅하기
다양한 배열의 메서드의 사용방법과 예시를 블로깅하기
이해되지 않은 개념은 검색을 통해 자기주도적 학습 후 블로그에 정리하기
아고라스테이츠에 올라온 다른 수강생의 질문에 답변하기

추가적인 학습을 하고 싶다면(9개)

JSON을 JavaScript배열의 형태로 바꾸는 방법을 검색하고 블로그에 기록해 보세요.
아고라스테이츠에 올라온 다른 수강생의 질문에 답변하기

오늘의 나

느낀점
오늘도 마지막 문제는 힘들었지만 그래도 해결은 했다. 마지막 문제는 '객체의 벨류값중 가장 큰 것의 키값 리턴'이 부분이 객체에는 어떻게 적용해야하는지 막막했는데, 엔지니어님 설명 들으니 기존에 최대값 구하는 것이랑 방식이 같았다. 오히려 continue 부분이 더 어려웠던 것 같은데 조건문 쓰면 쉽게 될거라고 착각했었다. 오늘 디버깅 하면서 문제해결하다가 디버깅해서 숫자가 올라가는 걸 봤는데 콘솔값으로는 안나와서 당황했다... 아직 그부분 해결이 안된 상태로 회고중인데 도통 감이 안잡힌다... 단순 오류는 아닐테고;; 내가 잘못본건가..? 피곤해서 헛게 보이나ㅋ
오늘은 점심에 먹을거 사러 나가느라 잠시 숨을 돌렸다. 빠듯했지만 집에만 있기 갑갑해서 좋았다. 심지어 오늘 햇빛은 연두색 같은 느낌이었다. 날씨가 좋을수록 방에만 있기가 어렵다. 집순이라 괜찮을 거라고 생각했는데 6개월 어떡하지??

개선점 및 리마인드