스터디 일지 | HTML, CSS, jQuery 어중간한 초급자 탈출하기 #10 - 객체/속성값 접근/속성 추가,수정,제거,포함 여부

#10회차
객체, 객체 다루기

 

1. 객체(Object)

- String, Number, Boolean 과 같은 데이터 유형 중 하나라고도 볼 수 있음

- 자바스크립트의 거의 모든 문법에 녹아있음

// 형태
// { 이름(key): 값(value), 이름(key): 값(value) }
{
	name: 'KingJI',
    bornYear: 2021,
    isVeryFantasic: true,
    worstDay: null,
    bestDay: {
    	title: '오늘은',
        description: '햅삐'
    }
}

1) 속성

이름(key)과 값(value)을 뭉쳐서 속성(property)라고 부름 (ex. 위에서 0번째 속성 = name: 'KingJI')

 

2) 이름(property name = key)

- 문자, 밑줄(_), 달러 기호($) 중 하나 사용

- 띄어쓰기 금지

- 하이픈(-) 금지

- 부득이하게 위를 사용할 때는 양쪽으로 따옴표 필요 (ex. { 'brand-name': 'KingJI' })

 

3) 값(property value = value)

- 모든 자료형 사용 가능. string, number, boolean, null, 객체, 함수 등

 

 

2. 객체 다루기 - 변수 할당

- 객체 또한 값(자료 유형)이기 때문에 다루려면 변수 할당이 필요

let me = {
	name: 'KingJI',
    bornYear: 2021,
    isVeryFantasic: true,
    worstDay: null,
    bestDay: {
    	title: '오늘은',
        description: '햅삐'
    }
};

 

 

3. 객체 다루기 - 속성 값에 접근하는 방법

- 사용 요소: 객체의 변수 이름(objectName).속성 이름(propertyName)

 

1) 점 표기법: objectName.propertyName

2) 대괄호 표기법: objectName['propertyName']

let me = {
	name: 'KingJI',
    bornYear: 2021,
    isVeryFantasic: true,
    'worst day': null,
    bestDay: {
    	title: '오늘은',
        description: '햅삐'
    }
};

// 점 표기법
console.log(me.name); // KingJI

// 대괄호 표기법
console.log(me['bornYear']); // 2021
console.log(me['bestDay']['description']); // 햅삐

// 대괄호 표기법 응용
let propertyName = 'isVeryFantastic';
console.log(me[propertyName]); // true

console.log(me['worst' + ' day']); // null

// 없는 값에 접근
console.log(me.bestDay.headline); // undefined

* 점 표기법은 속성 이름 위치에 정확히 해당 속성 이름을 써야 합니다.

** 속성 이름에 변수를 주고 싶거나 속성 이름이 string이 아닌 경우, 대괄호 표기법으로만 접근이 가능합니다.

*** 없는 속성에 접근하려고 하면 값에 undefined가 뜹니다.

 

 

4. 객체 다루기 - 속성의 수정/추가/삭제

1) 속성값 수정: 변수값 수정하듯이 해당 속성이름으로 접근해서 원하는 값 작성

let me = {name: 'KingJI'};

console.log(me.name); // KingJI
me.name = '킹지';
console.log(me.name); // 킹지

 

2) 속성 추가: 이미 객체 자체는 변수 선언을 했기에 별도의 변수 선언 없이도 속성 추가 가능

let me = {name: 'KingJI'};

console.log(me.color); // undefined << 속성이 없으므로
me.color = 'green';
console.log(me.color); // green

 

3) 속성 삭제: delete 연산자 사용

let me = {name: 'KingJI'};

console.log(me.name); // KingJI
delete me.name;
console.log(me.name); // undefined << 속성이 없으므로

 

4) 속성 존재 여부 확인: in 연산자 사용

let me = {name: 'KingJI', worstDay: undefined};

console.log('name' in me); // true

console.log('age' in me); // false

console.log('worstDay' in me); // true
console.log(me.worstDay !== undefined); // false

* 마지막 2줄에 대한 설명

me 객체를 보면 worstDay 라는 이름을 가진 속성이 분명 존재합니다.

이 때, 속성이 없으면 undefined를 반환한다고 했습니다.

혹시라도 속성 값으로 이미 undefined를 할당했다면, 부등호로는 명확하게 확인하기가 어렵기 때문에 in연산자를 사용합니다.

if문에서 사용하기 좋음!

 

 

 

 

 

밀린 복습 찬찬히... 죽어간다아.....