[혼공단 7기]혼공 JS 5주차

sky·2022년 3월 1일
2

혼공JS

목록 보기
5/6
post-thumbnail

잡다한 농담을 남길 시간도 없이 밀린 과제하는 나. 벌써 졸업반인데 이렇게 살아도 되나요?
2주째 회사에 시달려서 딱 끝나고 처음 쉬는 날인 오늘.. 5,6주차를 한 번에 하겠습니다 🍎

혼자 공부하는 자바스크립트 5주차

🎨 나만 보는 개념 정리

적을 시간이 없어서 안 적으려고 했는데 간단하게라도 정리해야 할 부분이 있어서..

0. 객체와 객체가 아닌 것

자바스크립트 내 자료형들이 모든 것이 객체인 것은 아니다. 이전에 배웠던 기본 자료형은 객체가 아니다. 기본 자료형에는 숫자, 문자열, 불이 있고 이들은 속성값을 가진 객체가 아니라 아래와 같이 선언한다. 또한, 객체가 아닌 것에 속성값을 부여하려고 하면 추가되지 않는 것을 알 수 있다. 객체, 속성에 대한 설명은 아래 기본미션에서 정리하였다.

const c = 273
c.sample = 10
c.sample // undefined⭐️⭐️

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

const 객체 = new 객체 자료형 이름()
new Number(10)
new String('이렇게 선언하면 됩니다')
new Boolean(true)

2. 동적으로 객체 속성을 추가하거나 삭제하기

const student = {
	별명 : '포로',
    학년 : 3
}

// 동적으로 객체 속성 추가하기
student.학과 = '컴퓨터공학과' 
student[재학중] = false

// 동적으로 객체 속성 삭제하기
delete student.별명 

3. 기본 자료형의 일시적 승급

문자열은 객체가 아니라고 했는데, 왜 문자열.length는 될까? 온점을 붙이면 객체의 속성을 꺼낸다는 뜻인데 문자열은 기본 자료형이라며? 그리고 왜 0번 예시에서는 오류가 나지 않을까? 이 모든 게 기본 자료형의 일시적 승급 때문이다. 자바스크립트에서는 기본 자료형 사용 시에 편리함을 제공하기 위해 기본 자료형으로 선언된 변수가 속성과 메소드를 호출하려고 하면 잠시 객체인 척~ 모른 척해주는 것이다. 이걸 기본 자료형의 일시적 승급이라고 한다. 객체가 격이 더 높으니까 승급이라고.

4. 객체 모두가 공유하는 프로토타입으로 숫자 메소드 추가하기

Number.prototype.power = function(n=2) {
	return this.valueOf() ** n
}

const a = 12
console.log('a.power():', a.power()) // a.power(): 144
console.log('a.power(3):', a.power(3)) // a.power(3): 1728
console.log('a.power(4):', a.power(4)) // a.power(4): 20736

🎨 기본미션

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

객체 : 이름(name)과 값(value)으로 구성된 속성을 가진 자바스크립트의 기본 데이터 타입
속성 : 배열 내부의 '요소(element)'와 비슷하게 객체 내부에key: value 형태로 객체 내에 있는 값
메소드 : 자료형이 함수 자료형인 객체의 속성

//javascript
const product = {
	// 키: 값으로 이루어진 속성
	제품명 : '로얄 밀크티',
    브랜드 : '컴포즈 커피',
    유형 : '논커피',
    성분 : '얼그레이 홍차, 우유, 설탕, 꿀',
    가격 : 3800,
    동작 : function(tea) { console.log(`${tea]를 마신다.`) }
product['제품명'] // '로얄 밀크티'
product['가격'] // 3800

여기에서 product가 객체, (제품명, 브랜드, 유형, 성분, 가격, 동작)이 속성, 동작이 메소드이다. 참고로 메소드의 함수는 화살표 함수로도 나타낼 수 있지만, 화살표 함수로 선언하게 되면 this로 객체를 가리킬 때 본인이 아니라 window 객체를 가리키게 된다. 보통 우리는 객체 본체의 정보를 얻어내고 싶을 때 this를 사용하므로 화살표 함수가 아닌 function() {} 과 같은 형식으로 선언하는 게 좋다.

🎨 선택미션

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

  1. 모질라 문서에서 Math 객체와 관련된 내용을 읽고 사인 90도의 값을 구해보세요. 참고로 사인 90도는 1입니다. 아주 단순하게 생각해서 구현하면 0.893996663005579라는 결과가 나옵니다. 0.893996663005579가 나왔다면 왜 그런지, 그리고 이를 어떻게 해야 제대로 사용할 수 있는지 구글 검색 등을 활용해서 코드를 수정하세요.

📍 코드

<script>
    const degree = 90
   
    console.log(Math.sin(90))	// 0.8939966636005579
	console.log(Math.sin(90*Math.PI / 180))	// 1

</script>

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=scyan2011&logNo=221604956473
위의 링크를 보고 해결했답니다. 모질라 기본 문서 예시에서 파라미터에 라디안 값이 들어가는 걸 보고 변환을 해줘야겠다고는 생각했지만.. 수학은 절레절레.. 오늘의 교훈 : 공식 문서를 잘 읽자!


바로 6주차로 #가보자고

profile
우당탕탕 개발일기

0개의 댓글