객체란 추상적인 의미로 이름과 값으로 이루어져 있습니다. 배열에서는 인덱스와 요소로 이루어져 있었다면 객체는 키와 값으로 이르어져 있습니다.
const product = {
제품명 : '망고',
유형 : '당절임'
}
배열의 인덱스는 객체의 키 값과 유사합니다. 따라서 객체의 요소에 접근할 때는
product['제품명']
product.제품명
위와 같이 객체[키 값] 또는 객체.키값 으로 접근합니다.
객체에는 속성과 메소드가 있습니다.
쉽게 설명하면 속성은 정적인 특징, 메소드는 동적인 특징으로 볼 수 있습니다.
예를 들어 자동차라는 객체에서 자동차의 주인, 색상, 차종 등은 속성으로, 자동차가 출발, 정지하는 것은 메소드로 생각할 수 있습니다.
객체에서 this라는 키워드를 사용하기도 합니다. this는 객체 자기 자신을 가리킬 때 사용합니다.
얘를 들어 객체가 food라는 속성을 가지고 있고, 메소드가 food를 매개변수로 받을 때 food가 객체의 것인지, 메소드의 것인지 알 수 없습니다. 이럴 때 this.food 를 사용하게 되면 객체의 food라는 것을 명확하게 할 수 있습니다.
객체에 속성을 추가할 때는 객체를 생성한 후 속성을 지정하고 값을 입력하면 됩니다. => 객체.속성 = 값
반대로 객체에서 속성을 제거할 때는 delete 키워드를 사용하면 됩니다. => delete 객체.속성
| Chapter 6-1 마무리 |
| 1. 다음과 같은 대상을 자바스크립트 객체로 선언해주세요. 자료형은 알맞다고 생각하는 것으로 지정해주세요. |
|
<script>
const test = {
name : '혼자 공부하는 파이썬',
price : 18000,
publisher : '한빛미디어'
}
</script>
|
| 2. 다음 중 객체에 동적으로 속상을 추가하는 문법을 고르세요. |
| ③ |
| 3. 다음 중 객체에 동적으로 소겅을 제거하는 문법을 고르세요. |
| ① |
| 4. 다음 코드에서 메소드라고 부를 수 있는 속성에 동그라미 표시하세요. 그리고 코드의 실행 결과를 예측해 보세요. |
| > print : function(lang) { console.log(`${this.ko}는 ${this.lang[lang]}로 ${this[lang]}입니다.`) } > 빵는 스페인어로 pan입니다. |
배열도, 함수도 객체입니다. 따라서 typeof 연산자를 사용하게 되면 'object'가 나오게 됩니다. 객체가 배열인지 확인하기 위해서는 Array.isArray() 메소드를 사용하면 됩니다.
기본 자료형을
const 객체 = new 객체 자료형 이름()
객체로 만들게 되면 자료형이 가진 연산자를 모두 활용할 수 있으며, 속성과 메소드도 사용할 수 있습니다!
a
prototype을 사용하면 모든 객체에서 속성과 메소드를 사용할 수 있습니다!
객체 자료형 이름.prototype.메소드 이름 = function(){
}
객체 자료형 이름.prototype.속성 = 값
indexOf() => 배열 또는 String 객체가 요소를 포함하는지 확인
toFixed() => 소수점 이하 몇 자리까지 출력할 때
Number.isNan() => 숫자가 아닌 요소인지 확인
Number.isFinite() => 숫자가 유효한 숫자인지 확인
trim() => 문자열 내 공백 제거
split() => 문자열을 기준으로 문자열을 나눔
JSON은 객체처럼 자료를 표현하는 방식입니다. 객체를 JSON 문자열로 변환할 때는 JSON.stringify() 를 사용하면 됩니다!
Math 객체에는 PI, E부터 삼각함수까지 다양한 속성과 메소드가 있습니다.
또한 random() 이라는 메소드가 있습니다. random()은 0부터 1사이의 숫자를 생성합니다.
| Chapter 6-2 마무리 |
| 1. 다음 코드의 실행 결과를 예측해보세요. 예측과 다른 결과가 나오다면 왜 그런지 생각해보세요. |
| > 오류 (new Number()을 사용해 기본 자료형을 객체로 바꿔주지 않았기 때문에) > Uncaught TypeError: num.원 is not a function |
| 2. 다음 코드의 실행 결과를 예측해보세요. |
| > printLang("ko") : 한국어 > printLang("en") : 영어 |
| 3. 모질라 문서에서 Maht 객체와 관련된 내용을 읽고 사인 90도의 값을 구해보세요. |
|
<script>
const degree = 90
console.log(Math.sin(degree * Math.PI / 180))
</script>
삼각함수들은 라디언의 사인값을 반환하기 때문에 각도에 Math.PI / 180 한 값을 곱해주어야 한다!! |
| 4. 다음 중 어떤 종류의 객체들이 모두 공유하는 메소드를 추가할 때 사용하는 객체의 이름을 골라주세요. |
| ② |
| 5. 본문에서는 Lodash 라이브러리의 _.sortBy() 메소드를 살펴보았습니다. _.orderBy() 메소드도 한 번 살펴보고 어떤 형태로 사용해야하는지 직접 예제를 작성해보세요. 그리고 다음과 같은 배열을 이름으로 오름차순 정렬해주세요. |
|
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
<script>
const books = [{
name : '혼자 공부하는 파이썬',
price : 18000,
publisher : '한빛미디어'
}, {
name : 'HTML5 웹 프로그래밍 입문',
price : 26000,
publisher : '한빛미디어'
}, {
name : '머신러닝 딥러닝 실전 개발 입문',
price : 30000,
publisher : '위키북스'
}, {
name : '딥러닝을 위한 수학',
price : 25000,
publisher : '위키북스'
}]
console.log(_.orderBy(books, (book)=>book.name))
</script>
|
배열 기반의 다중 할당은
let [a, b] = [1, 2]
> a = 1, b = 2
객체 기반의 다중 할당은
const object = {
name : '혼공스',
price : 18000,
publihser : '한빛미디어'
}
const {name, price} = object
> name = '혼공스', price = 18000
const {a=name, b=price} = object
> a = '혼공스', b = 18000
로 할 수 있습니다
배열을 복사하게 되면 같은 객체를 가리키기 때문에 기존 배열이 바뀌면 복사한 배열도 바뀝니다. 이를 얕은 복사라 하고, ...을 사용해 복사하게 되면 기존의 배열이 바뀌어도 복사된 배열이 바뀌지 않습니다. 이를 깊은 복사라 합니다!
| Chapter 6-3 마무리 |
| 1. 다음 중 전개 연산자의 형태로 올바른 것을 골라주세요. |
| ② |
| 2. 구글에 "popular javascript libraries 2020" 등으로 검색해서 라이브러리를 살펴본 후, 이름을 7개만 적어주세요. |
|
'혼공스' 카테고리의 다른 글
| 혼공단 11기 회고록 (1) | 2024.02.05 |
|---|---|
| 혼공스 - 4주차 ✨ (0) | 2024.01.22 |
| 혼공스 - 3주차!! (1) | 2024.01.15 |
| 혼공스 - 2주차 (｡･∀･)ﾉﾞ (1) | 2024.01.08 |
| 혼공스 - 1주차! 🤓 (1) | 2024.01.02 |