[혼공스] 06 - 1 '객체의 기본' 정리

 

오늘은 06 - 1장의 내용을 정리해 보자.

 

06 - 1장의 제목은 '객체의 기본'으로, 객체를 생성하고 관리하는 기본적인 내용을 다루고 있다.

 

매우 유용하고 많이 활용되는 기능이므로 선언부터 확실하게 기억하자.

 

그럼 정리 시작!

 

객체

객체는 한마디로 정의하면 '실제로 존재하는 사물'을 의미하고 '이름과 값으로 구성'된 속성을 가진 자바스크립트의 기본 데이터 타입이다. 자바스크립트에서 여러 자료를 다룰 때는 객체를 사용한다. 이전에 살펴보았던 배열도 여러 자료를 다룰 수 있다. 그렇게 할 수 있던 이유는 배열도 객체이기 때문이다.

 

배열은 객체이다

 

배열은 객체를 기반으로 만들어졌으므로 배열과 객체는 상당히 비슷하다. 다른 점이 있다면 배열은 요소에 접근할 때 인덱스를 사용하지만, 객체는 키를 사용한다.

 

객체는 중괄호{...}로 생성하며, 다음과 같은 형태의 자료를 쉼표(,)로 연결해서 입력한다.

 

키: 값

 

<script>
    const product = {
    	제품명: '7D 건조 망고',
        유형: '당절임'
        성분: '망고, 설탕, 메타중아황산나트륨, 치자황색소',
        원산지: '필리핀'
    }
</script>

 

키	속성
제품명	7D 건조 망고
유형	당절임
성분	망고, 설탕, 메타중아황산나트륨, 치자황색소
원산지	필리핀

 

객체의 요소에 접근하는 것도 배열과 비슷하다.

 

객체 뒤에 대괄호[...]를 사용하고 키를 입력하면 객체의 요소에 접근할 수 있다.

 

product['제품명'] product['유형'] product['성분'] product['원산지']

 

이 외에 온점(.)을 사용할 수도 있는데 온점을 사용하면 보조 기능을 활용할 수 있어 더 많이 사용한다.

 

product.제품명 product.유형 product.성분 product.원산지

 

TIP. 식별자로 사용할 수 없는 단어를 키로 사용할 경우?

객체를 생성할 때 키는 식별자와 문자열을 모두 사용할 수 있다. 대부분의 개발자가 식별자를 키로 사용하지만, 식별자로 사용할 수 없는 단어를 키로 사용할 때는 문자열을 사용해야 한다. 그리고 식별자가 아닌 문자열을 키로 사용했을 때는 무조건 대괄호를 사용해야 객체의 요소에 접근할 수 있다.

 

<script>
    const object = {
    	"with space": 273,
        "with ~!@#$%^&*()_+": 52
    }
    
    object["with space"]
    object["with ~!@#$%^&*()_+"]
</script>

 

속성과 메소드

배열 내부에 있는 값을 요소라고 한다. 반면 객체 내부에 있는 값은 속성이라고 한다. 배열의 요소와 마찬가지로 객체의 속성도 모든 형태의 자료형을 가질 수 있다. 

 

const object = {
    number: 273,
    string: '구름',
    boolean: true,
    array = [52, 273, 103, 32],
    
    method: function () { }
}

 

속성과 메소드 구분하기

 

객체의 속성 중 함수 자료형인 속성을 특별히 메소드라고 부른다. 다음 코드에서 객체 pet은 name 속성과 eat 속성을 가지고 있는데, eat 속성처럼 입력값을 받아 무언가를 한 다음 결과를 도출해내는 함수 자료형을 특별히 eat() 메소드라고 부른다.

 

<script>
    const pet = {
    	name: '구름',
        eat: function (food) {}
    }
    
    pet.eat()
</script>

 

메소드 내부에서 this 키워드 사용하기

 

메소드 내에서 자기 자신이 가진 속성을 출력하고 싶을 때는 자신이 가진 속성임을 분명하게 표시하기 위해 this 키워드를 사용한다.

 

<script>
    const pet = {
    	name: '구름',
        eat: function (food) {
        	alert(this.name + '은/는' + food + '을/를 먹습니다.')
        }
    }
    
    pet.eat()
</script>

 

동적으로 객체 속성 추가/제거

객체를 처음 생성한 후에 속성을 추가하거나 제거하는 것을 '동적으로 속성을 추가한다' 또는 '동적으로 속성을 제거한다'라고 표현한다.

 

동적으로 객체 속성 추가하기

다음과 같이 객체를 생성한 후 속성을 지정하고 값을 입력하면 된다.

 

<script>
    const student = {}
    studen.이름 = '윤인성'
    student.취미 = '악기'
    student.장래희망 = '생명공학자'
    
    console.log(JSON.stringify(studen, null, 2))
</script>

 

동적으로 객체 속성 제거하기

객체의 속성을 제거할 때는 delete 키워드를 사용하고 형태는 다음과 같다.

 

delete 객체.속성

 

<script>
    const student = {}
    student.이름 = '윤인성'
    student.취미 = '악기'
    student.장래희망 = '생명공학자'
    
    delete student.장래희망
    
    console.log(JSON.stringify(student, null, 2))
</script>

 

메소드 간단 선언 구문

method : function () {} 형태 외에도 최신 버전의 자바스크립트에서는 메소드를 조금 더 쉽게 선언할 수 있는 전용 구문이 있다.

 

<script>
    const pet = {
    	name: '구름',
        eat (food) {
        	alert(this.name + '은/는' + food + '을/를 먹습니다.')
        }
    }
    
    pet.eat('밥')
</script>

 

function () {} 형태로 선언하는 익명 함수와 () => 형태로 선언하는 화살표 함수는 객체의 메소드로 사용될 때 this 키워드를 다루는 방식이 조금 다르다. 그렇기 때문에 화살표 함수를 메소드로 사용하지 않는 편이다.

 

확인문제1. 

문제: 다음과 같은 대상을 자바스크립트 객체로 선언해주세요. 자료형은 알맞다고 생각하는 것(문자열, 숫자, 불 등)으로 지정해주세요.

 

속성 이름	속성 값
name	혼자 공부하는 파이썬
price	18000
publisher	한빛미디어

 

답:

 

<script>
    const book = {
    	name = '혼자 공부하는 파이썬'
        price = 18000
        publisher = '한빛미디어'
    }
</script>

 

확인문제 2.

 문제: 다음 중 객체에 동적으로 속성을 추가하는 문법을 고르세요.

 

① add 객체[속성] = 값

② 객체.add('속성', '값')

③ 객체[속성] = 값

④ 객체[속성] = add 값

 

정답: ③

 

확인문제 3.

 문제: 다음 중 객체에 동적으로 속성을 추가하는 문법을 고르세요.

 

① delete 객체[속성]

② 객체.delete('속성')

③ delete 객체 from 속성

④ delete 속성 from 객체

 

정답: ①

 

확인문제 4.

 문제: 다음 코드에서 메소드라고 부를 수 있는 속성에 동그라미 표시하세요. 그리고 코드의 실행 결과를 예측해 보세요.

 

<script>
    const object = {
    	ko: '빵',
        en: 'bread',
        ja: 'パン',
        fr: 'pain',
        es: 'pan',
        lang: {
        	ko: '한국어',
        	en: '영어',
        	ja: '일본어',
        	fr: '프랑스어',
        	es: '스페인어'
        },
        print (lang) {
        	console.log(`${this.ko}는 ${this.lang[lang]}로 ${this[lang]}입니다.`)
        }
    }
    
    object.print('es')
</script>

 

 

06 - 1장의 내용은 여기서 마무리하면 될 것 같다.

 

내일은 06 - 2 장의 내용을 정리해보자.

 

오늘 하루도 쌓였다.