어느새 5주차를 마무리하는 시점이 되었다.
새 책 냄새가 좋은 빳빳한 책이었는데 어느새 손때를 많이 타서 제법 통통해졌고,
총 게시글 수가 10개가 되지 않는 새 블로그였는데 어느새 게시글 수가 40개가 넘었다.
별건 없지만 그래도 하루하루 쌓이고 있는걸 보니 뿌듯한 마음이다.
(공부한 내용 정리는 '혼공학습단' 카테고리를 확인하시면 되겠습니다.)
기본 미션
객체, 속성, 메소드가 무엇인지 설명하기
객체(object)
객체는 한마디로 정의하면 '실제로 존재하는 사물'을 의미하고 '이름(key)과 값(value)으로 구성'된 속성을 가진 자바스크립트의 기본 데이터 타입이다. 자바스크립트에서 여러 자료를 다룰 때 객체를 사용한다. 이전에 살펴보았던 배열도 여러 자료를 다룰 수 있다. 그렇게 할 수 있던 이유는 배열도 객체이기 때문이다.
객체는 중괄호{...}로 생성하며, 다음과 같은 형태의 자료를 쉼표(,)로 연결해서 입력한다.
<script>
const product = {
제품명: '7D 건조 망고',
유형: '당절임'
성분: '망고, 설탕, 메타중아황산나트륨, 치자황색소',
원산지: '필리핀'
}
</script>
속성(property)과 메소드(method)
배열 내부에 있는 값을 요소(element)라고 한다. 반면 객체 내부에 있는 값은 속성(property)이라고 한다. 위에서 언급한 바와 같이 속성은 이름(key)과 값(value)으로 구성 되어 있다. 배열의 요소와 마찬가지로 객체의 속성도 모든 형태의 자료형을 가질 수 있다.
const object = {
number: 273,
string: '구름',
boolean: true,
array = [52, 273, 103, 32],
method: function () { }
}
객체의 속성 중 함수 자료형인 속성을 특별히 메소드(method)라고 부른다. 다음 코드에서 객체 pet은 name 속성과 eat 속성을 가지고 있는데, eat 속성처럼 입력값을 받아 무언가를 한 다음 결과를 도출해내는 함수 자료형을 특별히 eat() 메소드라고 부른다.
<script>
const pet = {
name: '구름',
eat: function (food) {}
}
pet.eat()
</script>
선택 미션
p.288 확인문제 3번 풀고, 풀이 과정 설명하기
문제: 모질라 문서에서 Math 객체와 관련된 내용을 읽고 사인 90도의 값을 구해보세요. 참고로 사인 90도는 1입니다. 아주 단순하게 생각해서 구현하면 0.8939966636005579라는 결과가 나옵니다. 0.8939966636005579가 나왔다면 왜 그런지, 그리고 이를 어떻게 해야 제대로 사용할 수 있는지 구글 검색 등을 활용해서 알아보고 코드를 수정하세요.
아주 단순하게 생각해서 구현한 코드
<script>
// 변수 선언
const degree = 90
// 출력
console.log(Math.sin(degree))
</script>
0.8939966636005579가 나온 이유?
모질라 문서를 확인해보면 Math.sin() 메소드는 도(˚) 단위가 아닌 라디안 단위로 주어진 각도의 사인 값(-1 ~ +1)을 반환 하는 것을 알 수 있다. 그렇기 때문에 Math.sin(90)을 하면 우리가 의도했던 sin(90˚)의 값이 아니라 sin(90rad)의 값인 0.8939966636005579가 출력되었던 것이다.
정답 코드
<script>
// 변수 선언
const degree = 90
// 출력
// Math.sin() 메소드는 괄호 내부에 라디안 단위를 넣어야 한다.
const radian = degree * (Math.PI / 180)
console.log(Math.sin(radian))
</script>
풀이: 1˚ = PI / 180 라디안 이므로 90˚ = PI / 180 * 90 라디안이다. 이렇게 구한 라디안 값을 Math.sin() 메소드에 매개변수로 전달해주면 우리가 원하는 sin(90˚)의 값을 구할 수 있다.
Math.sin() 메소드에 관한 모질라 문서:
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/sin
호도법과 60분법에 대해 쉽게 설명해놓은 블로그:
https://blog.naver.com/biomath2k/221867576248
마무리
5주차 미션은 이렇게 마무리 하면 될 것 같다.
객체와 관련된 중요한 개념을 복습할 수 있었고, 모질라 문서에서 원하는 메소드를 찾아보았다.
다음주는 문서 객체 모델(DOM)에 관해서 배우는 것 같다.
모르는 개념이 한번에 등장해서 처음 배울때 상당히 어지러웠던 기억이 있다.
이번엔 확실하게 짚고 넘어가자!
'혼공학습단 11기(完)' 카테고리의 다른 글
[혼공스] 07 - 1 '문서 객체 조작하기' 정리(2) (0) | 2024.02.01 |
---|---|
[혼공스] 07 - 1 '문서 객체 조작하기' 정리(1) (0) | 2024.01.31 |
[혼공스] 06 - 3 '객체와 배열 고급' 정리(3) (1) | 2024.01.29 |
[혼공스] 06 - 2 '객체의 속성과 메소드 사용하기' 정리(3) (1) | 2024.01.26 |
[혼공스] 06 - 2 '객체의 속성과 메소드 사용하기' 정리(2) (0) | 2024.01.25 |