혼공JS Chapter7

객체의 기본

객체

실제로 존재하는 사물을 의미하고 이름과 값으로 구성된 속성을 가진 자바스크립트의 기본 데이터 타입으로 이야기할 수 있다.

자바스크립트에서 여러 자료를 다룰 때는 객체를 사용하는데 이전에 사용했던 배열도 여러 자료를 다룰 수 있다. 그 이유는 배열도 객체이기 때문이다.

배열에는 인덱스와 요소가 있는데 각 요소를 사용하려면 다음처럼 배열 이름 뒤 인덱스로 접근해야한다.

배열은 요소에 접근할 때 인덱스를 사용하지만, 객체는 키를 사용한다.

키 : 값

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

속성과 메소드

배열 내부에 있는 값을 요소라고 하고 객체 내부에 있는 값은 속성이라 한다.

객체의 속성도 배열의 요소와 같이 모든 형태의 자료형을 가질 수 있다.

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

	method: function(){ }
}

속성과 메소드 구분

객체의 속성 중 함수 자료형인 속성을 특별히 메소드라고 부른다.

<script>
	const object = {
		number: 273,
		string: '구름',
		boolean: true,
		array: [52, 273, 103, 32]
	
		method: function(){ }
	}
	//메소드 호출
	object.method()
</script>

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

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

const pet = {
	name: '구름',

	eat: function(food){
		alert(this.name+"은" + food+"을 먹습니다.")	
 }
}

pet.eat("밥") //구름은 밥을 먹습니다.

화살표 함수를 사용한 메소드

function() {} 형태로 선언하는 익명 함수와 ()⇒ {] 형태로 선언하는 화살표 함수는 객체의 메소드로 사용될 때 this 키워드를 다루는 방식이 다르다.

<script>
	const test = {
		a: function() {
			console.log(this)
		},
		b: function() => {
			console.log(this)
		}
	}
	//둘 다 같은 코드를 출력한다.
	test.a()
	test.b()
</script>

객체의 속성과 메소드 사용하기

자바스크립트에서 사용하는 자료는 기본 자료형과 객체 자료형으로 구분할 수 있다.

객체 자료형

속성과 메소드를 가질 수 있는 모든 것은 객체이다

배열도 객체이고 함수도 객체이다.

const a = []
a.sample = 10
a.sample //10

function b (){ }
b.sample = 10
b.sample //10

기본 자료형

자바스크립트에서는 실체가 있는 것 중에 객체가 아닌 것을 기본 자료형이라고 부른다.(숫자, 문자열, 불) 이러한 자료형은 객체가 아니므로 속성을 가질 수 없다.

cosnt c = 273
c.sample = 10
c.sample //undefined

c.sample = 10은 속성을 추가하는 것처럼 보이지만 실제로는 undefined로 나오므로 속성이 추가되지 않았다는 것을 볼 수 있다. 문자열과 불 자료형도 기본 자료형이므로 같은 결과가 나온다.

const d = '안녕하세요' //undefined
d.sample = 10 //undefined

const e = true //undefined
e.sample = 10 // 10
e.sample // undefined

기본 자료형을 객체로 선언하기

const 객체 = new 객체 자료형 이름()

new Number(10)
new String('안녕하세요')
new Boolean(true)

숫자 객체, 문자열 객체, 불 객체를 생성할 수 있다.

new Number(10)를 사용해 숫자를 생성하면 숫자와 관련된 연산도 모두 활용할 수 있고 속성과 메소드를 활용할 수 있다.

(new 키워드를 사용하지 않으면 함수가 자료형 변환 기능으로 작동한다.)

const g = Number(273) //undefined
typeof g // "number" 객체가 아님

프로토타입으로 메소드 추가하기

prototype객체에 속성과 메소드를 추가하면 모든 객체에서 해당 속성과 메소드를 사용할 수 있다.

객체 자료형 이름.prototype.메소드 이름 = function() {
}

sample이라는 속성을 추가하면 Number.prototype에 sample이라는 속성을 추가하면 기본 자료형 숫자 뒤에 온점을 찍고 해당 속성을 활용할 수 있다.

Number.prototype.sample = 10 // 10
const i = 273
i.sample //10

모든 숫자 자료형이 어떤 값을 공유할 필요는 없어 일반적으로 프로토타입에 속성을 추가하지 않는다.

프로토타입으로 숫자 메소드 추가하기

<script>
	// power()메소드를 추가한다.
	Number.prototype.power = function (n = 2){
		return this.valueOf() ** n
	}

	// Number 객체의 power() 메소드를 사용한다.
	const a = 12
	console.log('a.power():', a.power())
	console.log('a.power(3):', a.power(3)) //1728
	console.log('a.power(4):', a.power(4)) //20736
</script>

Number 객체

Number 객체에서 자주 사용하는 메소드는 toFixed()메소드로 소수점 이하 몇 자리까지만 출력하고 싶을 때 사용한다. 소수점 2자리까지 출력하고 싶으면 toFixed(2)를 사용하고 3자리까지 출력하고 싶다면 toFixed(3) 형태로 사용한다.

String 객체

문자열 양쪽 끝의 공백 없애기: trim()

문자열의 trim()메소드를 사용하면 문자열 앞뒤 공백을 제거할 수 있다.

const stringA = '   앞과 뒤에 공백도 들어갈때      '
stringA.trim() // 앞과 뒤에 공백도 들어갈때

객체와 배열 고급

속성 존재 여부 확인

객체 내부에 어떤 속성이 있는지 확인해 보는 코드는 굉장히 자주 사용하는 코드로 내가 직접 코드를 작성할 때도 남이 만든 코드를 이해할 때도 필요하다

객체에 없는 속성에 접근하면 undefined 자료형이 나온다. undefined인지 아닌지 확인하면 속성 존재 여부를 확인할 수 있다.

<script>
    //객체를 생성
    const object = {
        name: '혼자 공부하는 자바스크립트',
        price: 18000,
        publisher: '한빛미디어'
    }

    //객체 내부에 속성이 있는지 확인
    if(object.name !== undefined){
        console.log('name 속성이 있습니다.')
    } else {
        console.log('name 속성이 없습니다.')
    }
    if(object.author !== undefined){
        console.log('author 속성이 있습니다.')
    } else {
        console.log('author 속성이 없습니다.')
    }
</script>

 

배열 기반의 다중 할당

다중 할당

[식별자, 식별자, 식별자, ...] = 배열

let arrayA = [1, 2, 3, 4, 5]
const [a, b, c] = arrayA
console.log(a, b, c) // 1 2 3

객체 기반의 다중 할당

객체 내부에 있는 속성을 꺼내서 변수로 할당할 때 다음과 같은 코드는 객체 내부의 name 속성과 price 속성을 꺼내서 변수에 할당하는 코드이다.

{속성 이름, 속성 이름} = 객체
{식별자=속성 이름, 식별자 = 속성 이름} = 객체

<script>
    //객체를 생성
    const object = {
        name: '혼자 공부하는 자바스크립트',
        price: 18000,
        publisher: '한빛미디어'
    }

    //객체에서 변수를 추출한다.
		const {name, price} = object
		console.log('# 속성 이름 그래도 꺼내서 출력하기')
		console.log(name, price)
		console.log('')

		const {a=name, b=price } = object 
		console.log('# 다른 이름으로 속성 꺼내서 출력하기')
		console.log(a, b)   
</script>

# 속성 이름 그대로 꺼내서 출력하기
혼자 공부하는 자바스크립트 18000

# 다른 이름으로 속성 꺼내서 출력하기
혼자 공부하는 자바스크립트 18000

 

기본 미션

객체, 속성 메소드가 무엇인지 설명하기

객체(Object): 자바스크립트에서 객체는 키와 값이 쌍을 이루는 속성(Property)들의 집합으로 객체는 여러 데이터와 함수를 하나의 묶음으로 관리할 수 있도록 해주며, 이를 통해 코드의 복잡성을 관리하고 재사용성을 높일 수 있다.

속성(Property): 객체에 속하는 데이터를 의미하며, 키(Key)와 값(Value)의 쌍으로 이루어져 있다. 속성의 키는 문자열 또는 심벌(Symbol)이며, 값은 어떠한 자바스크립트 데이터 타입도 가능하다.

메소드(Method): 객체의 속성 중 함수인 속성을 말한다. 메소드는 객체에 속한 함수로써, 해당 객체의 동작을 구현하거나 객체의 속성을 조작하는 역할을 한다.

선택 미션

p.288 확인 문제 3번 풀고, 풀이 과정 설명하기

모질라 문서에서 Math 객체와 관련된 내용을 읽고 사인 90도 값을 구해보세요. 참고로 사인 90도는 1입니다. 아주 단순하게 생각해서 구현하면 0.8939966636005579라는 결과가 나옵니다.

0.8939966636005579가 나왔다면 왜 그런지 그리고 이를 어떻게 해야 제대로 사용할 수 있는지 구글 검색등을 활용해서 알아보고 코드를 수정하세요

<script>
	//변수를 선언합니다.
	const degree = 90

	//출력합니다.
	

</script>

사인 90도 값을 구하려면, 먼저 각도를 라디안으로 변환해야 한다. JavaScript의 Math.sin() 함수는 파라미터로 라디안 값을 받기 때문에 각도를 라디안으로 변환하려면 각도에 Math.PI/180을 곱하면 된다.

<script>
    // 변수를 선언합니다.
    const degree = 90;

    // 각도를 라디안으로 변환합니다.
    const radian = degree * (Math.PI / 180);

    // 사인 값을 구하고 출력합니다.
    const sinValue = Math.sin(radian);
    console.log(sinValue);
</script>

이렇게 구현하면, 콘솔에는 1이 출력되어야 한다. 왜냐하면, 사인 90도의 값은 1이기 때문이다.