[혼공스] 5주차 객체

babyjs 2025. 2. 15. 21:14

2025. 2. 15. 21:14

객체

JS는 객체 기반이며, 구성하는 거의 모든 것이 객체이다. 원시 값을 제외한 나머지 값은 모두 객체이다. 원시 타입의 값은 변경이 불가능한 값이고, 객체 타입의 값은 변경이 가능하다.

객체는 0개 이상의 프로퍼티로 구성된 집합이다. 프로퍼티는 프로퍼티 키, 프로퍼티 값으로 구성 되있다. 프로퍼티 키 뒤에 콜론(:)작성해서 프로퍼티 값이랑 구분하고 프로퍼티는 콤마(,)로 구분한다. 프로퍼티 값이 함수일 경우 메서드라고 부른다.

// 일반 객체
const person = {
	name: 'Kim',
	age: 20
}

// 프로퍼티 값에 함수가 있는 객체

const ageCount = {
	age : 0,
	counter: function () { 
		this.age++;
	}

프로퍼티 접근

프로퍼티에 접근하는 방법은 마침표(.) 프로퍼티 접근 연산자, 대괄호([ ]) 프로퍼티 접근 연산자 두 가지 방법이 있다. 마침표 프로퍼티 접근 연산자는 프로퍼티 식별자 네이밍 규칙을 준수한 프로퍼티 키에 사용되고, 대괄호 프로퍼티 접근 연산자는 식별자 네이밍 규칙 비준수한 프로퍼티 키에 사용된다. 주의할 점은 대괄호 프로퍼티 접근 연산자를 사용할 때 대괄호 안에 문자열을 넣어야 한다. 만약 아래 코트처럼 문자열을 안 넣고 사용하면 에러가 발생하니 조심해야 한다.

const person = {
	name: 'Kim', // 식별자 네이밍 준수한 프로퍼티 키
	'now-age': 20 // 식별자 네이밍 비준수한 프로퍼티 키
}
person.name // 마침표 프로퍼티 접근 연산자
person['now-age'] // 대괄호 프로퍼티 접근 연산자

속성과 메서드

프로퍼티 값을 속성이라고 부르기도 한다. 프로퍼티 값에 올 수 있는 값은 JS의 모든 자료형 값이 올 수 있다. 그 중 함수 자료형 값이 속성 값으로 오면 그 것을 메서드라고 부른다. 아래 코드 안에 있는 hello()가 메서드 이다. ES6부터는 메서드를 저렇게 줄여서 작성할 수 있다.(원래 대로 작성하면 hello = function () {console.log(`Hello, My name is ${this.name}`)} 이다)

this 키워드는 함수 객체에서 사용하는 키워드이다. 함수 호출하는 방식에 따라 this가 가리키는 대상이 달라 진다. 간략하게 3가지만 알아 보자.

함수 호출	설 명
일반 함수 호출	일반 함수 호출로 this 키워드를 사용하면 전역 객체인 window를 가리킨다.
메서드 함수 호출	메서드 함수 호출로 this 키워드를 사용하면 메서드가 속해 있는 객체 식별자를 가리킨다.
생성자 함수 호출	생성자 함수 호추로 this 키워드를 사용하면 생성되는 인스턴스를 가리킨다.

const person = {
	name: 'Lee',
    hello() {	// 메서드 축약 표현
    	console.log(`Hello, My name is ${this.name}`)
    }
}

동적 객체 추가 및 제거

객체를 선언하고 프로퍼티까지 작성이 끝난 후에 새로운 프로퍼티를 추가/제거하는 것을 동적 객체 추가/제거라고 한다.

동적 객체 추가

동적으로 객체를 추가하는 방법은 객체를 선언한 식별자에 마침표 및 대괄호 접근 연산자를 사용해 추가할 수 있다.

const person = {
	name: 'Lee',
    hello() {	// 메서드 축약 표현
    	console.log(`Hello, My name is ${this.name}`)
    }
}

person.age = 20

person['address'] = 'Seoul'

동적 객체 제거

delete 키워드를 사용해 제거할 수 있다.

const person = {
	name: 'Lee',
    age: 20,
    address: 'Seoul',
    hello() {	// 메서드 축약 표현
    	console.log(`Hello, My name is ${this.name}`)
    }
}

delete person.address
delete person.age
delete person.name

객체와 배열 고급

배열과 비슷한 작성 방법으로 한 번에 여러 변수를 값에 할당하는 방법을 배열기반 다중 할당이라고 한다. 객체도 비슷하게 속성을 꺼내 변수로 할당 할 수 있다.

[식별자, 식별자, 식별자] = 배열 // 배열 다중 할당
{식별자 = 속성, 식별자 = 속서, 식별자 = 속성} = 객체 // 객체 다중 할당 식별자와 속성이 같으면
						// 식별자를 제외한 속성만 작성해도 된다.

배열과 객체를 할당 받은 변수가 다른 변수에 할당할 때 얕은 복사가 이루어 진다. 얕은 복사에 문제점은 할당 받은 다른 변수가 배열의 요소, 객체의 프로퍼티를 추가/제거 하면 원래 변수에도 똑같이 영향을 받는 것이다. 그 것을 방지하기 위해서는 깊은 복사가 필요한데 깊은 복사를 할 수 있는 방법이 전개 연산자이다.

const products = ['milk', 'bread', 'water']

const products2 = ['tomato', ...products, 'cookie'] // 배열 전개 연산자 사용해
					// 깊은 복사 실행
                    
const obj = {
	name: 'Lee',
    age: 20,
    address: 'Seoul'
}

const obj2 = {...obj} // 객체 전개 연산자 이용해 깊은 복사 실행

기본 숙제

객체는 중괄호({ }) 안에 0개 이상의 프로퍼티가 모여 있는 자료형을 말한다. 프로퍼티는 프로퍼티 키, 프로퍼티 값으로 이루워져 있고 콜론(:)으로 프로퍼티 키와 프로퍼티 값을 프로퍼티 끼리는 콤마(,)로 구분한다.

프로퍼티 값은 속성이라고도 부르면 속성에는 JS의 모든 값을 다 넣을 수 있다. 속성에 함수가 있는 것을 메서드라고 부른다. 즉 메서드는 객체에 묶여 있는 함수를 말하는 것이다.

babyjs 님의 블로그