본문 바로가기
[코드잇]/JavaScript 백엔드 개발자

프로그래밍과 데이터 in javaScript -객체-

by 수민띠 2023. 2. 18.

객체(Object): key(값의 이름)value(값)를 콜론(:)으로 구분하는 프로퍼티들의 집합

객체는 중괄호를 통해 만드며, Key-Value 한 쌍을 객체의 속성(property)이라 부른다.

let objectTest = {
	userName: 'sumin', 
	'born Year': 2023,  
	isMan: true,
	worst: null,
	brandName: {
		name: '코드잇',
		worstCourse: null
	}
}

프로퍼티 네임은 문자열 타입이라 따옴표로 감싸줘야 하지만 생략하면 암묵적으로 형 변환을 해준다.

 

Property Name 주의 사항!

  • 첫 번째 글자는 문자, _ , $ 중 하나로 시작
  • 이름안에 띄어쓰기, 하이픈(-) 금지
  • 규칙을 벗어나는 경우 따옴표로 감싸주면 객체 생성 가능

객체의 데이터 접근하기

객체의 프로퍼티는 key(값의 이름)를 통해서, 점 표기법 혹은 대괄호 표기법으로 접근

존재하지 않는 프로퍼티 접근은 undefined값 출력

// 점 표기법
// 따옴표를 생략할 수 없는 프로퍼티 네임으로는 접근 불가
objectTest.isMan;
// 대괄호 표기법
objectTest['born Year'];

//변수 사용 
let a = 'name';
console.log(objectTest.brandName[a]);
/*
a에 name이라는 문자열이 담겨 있기 때문에
objectTest안의 brandName의 name이라는 프로퍼티에 접근 가능
*/

 

객체 다루기

수정: 해당 프로퍼티에 접근해서 새로운 값 할당
objectTest.userName = 'sumin2';

추가: 존재하지 않는 프로퍼티에 새로운 값 할당
objectTest.newProperty = 'value';
objectTest['new Property'] = 'value';

삭제: delete 키워드 
delete objectTest.worst;

 

in 연산자: 객체의 프로퍼티 존재 여부 확인

문법 - 프로퍼티네임 in 객체
console.log('name' in objectTest); // false
console.log('name' in objectTest.brandName); // true

객체와 메소드

객체의 메소드 - 프로퍼티 값이 함수

파라미터로 다른 변수에 담긴 값을 가져올 때는 대괄호 표기법 사용

(9번째 줄)a.str로 접근하면 a에 str이라는 프로퍼티 이름을 가진 프로퍼티 값에 접근한다는 의미.

for...in 반복문

객체의 프로퍼티 이름을 가져오는 반복문

for (변수 in 객체) {
  동작부분;
}

// 객체에 프로퍼티 이름이 변수에 할당되고, 객체의 프로퍼티 개수만큼 반복 동작함

for (let k in codeit){
  console.log(k);
  console.log(codeit[k]);
}

주의

for in 반복문은 객체에 프로퍼티를 추가한 순서를 따라 반복문이 수행되지만 예외사항이 있다.

흔한 경우는 아니지만 프로퍼티 네임에 숫자형을 작성해서 사용할 경우가 있는데

객체는 정수형 프로퍼티 네임을 오름차순으로 먼저 정렬하고, 나머지 프로퍼티들은 추가한 순서대로 정렬하는 특징이 있다

let myObject = {
  3: '정수3',
  name: 'codeit',
  1: '정수1',
  birthDay: '2017.5.17',
  2: '정수2',
};

for (let key in myObject) {
  console.log(key);
}
/* 실행 결과
1
2
3
name
birthDay  */