[혼공JS📒] Chapter06. 객체

Camellia·2022년 2월 25일

[혼공JS] 혼자 공부하는 자바스크립트

목록 보기

6/6

네.. 5주차 막차탑니다.. 예.. 이정도면 막차가 떠나고도 남은 시간인데 이렇게되었네요.. 제출일은 이미 늦었지만 그래도 끝까지 열심히 해서 제출한다는 것에 의미를 두었습니다.. ㅃ빠샤

5주차	Chapter	기본 미션	선택 미션
5주차	Chapter06	객체, 속성, 메소드가 무엇인지 설명하기	p. 288 확인 문제 3번 풀고, 풀이 과정 설명하기

✅ 기본 미션

✅ 선택 미션

사인 90도의 값을 구하여라. 참고로 사인 90도는 1이다. 단순하게 생각해서 구현하면 0.8939966636005579라는 결과가 나온다. 이를 어떻게 해아 제대로 사용할 수 있는지 구글 검색 등을 활용해 알아보고 코드를 수정해라

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script>
        const degree = 90;
        const ra = degree * (Math.PI / 180);
        alert(Math.sin(ra));
    </script>
</head>
<body>
</body>
</html>

설명
Math.sin() 메소드는 괄호 내부에 라디안 단위를 넣어야 한다.

06-1. 객체의 기본

1. 객체

객체 : 자바스크립트에서 여러 자료를 다룰 때 사용
배열도 여러 자료를 다룰 수 있기에 객체이다.
배열 예시

const array = ['사과', '바나나', '망고', '딸기'];

배열에는 인덱스와 요소가 있다.
배열의 인덱스와 요소를 다음과 같이 표로 나타내었다.

인덱스	요소
0	사과
1	바나나
2	망고
3	딸기

객체는 키 사용
객체 예시

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

위에서 생성한 객체를 표로 나타내었다.

키	속성
제품명	7D 건조 망고
유형	당절임
성분	망고, 설탕, 메타중아황산나티륨, 치자황색소
원산지	필리핀

2. 속성과 메소드

요소 : 배열 내부에 있는 값
속성 : 객체 내부에 있는 값
객체의 속성은 배열과 같이 모든 형태의 자료형을 가질 수 있다.

속성과 메소드 구분하기
-메소드 : 객체의 속성 중 함수 자료형인 속성
-메소드 예시

const pet = {
  name: '구름',
  eat: function (food) { }
}

//메소드 호출
pet.eat()

메소드 내부에서 this 키워드 사용하기
-this : 자기 자신이 가진 속성이라는 것을 표시할 때 사용
-this 키워드 예시

const pet = {
  name: '구름',
  eat: function (food) {
  	alert(this.name + '은/는' + food + '을/를 먹습니다.') --> this 키워드를 사용해 자신이 가진 속성에 접근할 수 있다.
  }
}

//메소드 호출
pet.eat('밥')

3. 동적으로 객체 속성 추가/제거

객체를 처음 생성한 후에 속성을 추가하거나 제거하는 것을 '동적으로 속성을 추가한다' 또는 '동적으로 속성을 제거한다'고 표현한다.

동적으로 객체 속성 추가하기
예시

//객체 선언
const student = {}

//동적으로 객체 속성 추가
student.이름 = '윤인성'
student.취미 = '악기'
student.장래희망 = '생명공학자'

//출력
console.log(JSON.stringify(student, null, 2)) --> JSON은 뒤에 내용이 나오니 참고!

<실행 결과>
{
  "이름" : "윤인성",
  "취미": "악기",
  "장래희망": "생명공학자"
}

동적으로 객체 속성 제거하기
예시

//객체 선언
const student = {}

//동적으로 객체 속성 추가
student.이름 = '윤인성'
student.취미 = '악기'
student.장래희망 = '생명공학자'

//동적으로 객체 속성 제거
delete student.장래희망

//출력
console.log(JSON.stringify(student, null, 2)) --> JSON은 뒤에 내용이 나오니 참고!

<실행 결과>
{
  "이름" : "윤인성",
  "취미": "악기",
}

👍 마무리

1. 다음과 같은 대상을 자바스크립트 객체로 선언해라.

속성 이름	속성 값
name	혼자 공부하는 파이썬
price	18000
publisher	한빛미디어

답

const object = {
  name: "혼자 공부하는 파이썬",
  price: 18000,
  publisher: "한빛미디어:
}

2. 다음 중 객체에 동적으로 속성하는 추가하는 문법을 골라라.
① add 객체[속성] = 값
② 객체.add('속성', 값)
③ 객체[속성] = 값
④ 객체[속성]add값

답
③

3. 다음 중 객체에 동적으로 속성하는 제거하는 문법을 골라라.
① delete 객체[속성]
② 객체.delete('속성')
③ delete 객체 from 속성
④ delete 속성 from 객체

답
①

4. 다음 코드에서 메소드라고 부를 수 있는 속성에 동그라미 표시를 하고 코드의 실행 결과를 예측해보시오.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script>
        const object = {
            ko: '빵',
            en: 'bread',
            fr: 'pain',
            es: 'pan',

            lang: {
                ko: '한국어',
                en: '영어',
                fr: '프랑스어',
                es: '스페인어'
            },

            print: function (lang) { ⭕
                alert(`${this.ko}는 ${this.lang[lang]}로 ${this[lang]}입니다.`)
            }
        }

        object.print('es');
    </script>
</head>
<body>
</body>
</html>

답
빵는 스페인어로 pan입니다.

06-2. 객체의 속성과 메소드 사용하기

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

			자바스크립트의 자료형
   					 |
  		---------------------------
  	    |					   	  |
    기본 자료형			      객체 자료형
  	    |						  |
   -----------				----------------
   |    |    |				|    |    |    |
 숫자  문자열  불	       함수 배열  ...이외 전부 ...

1. 객체 자료형

객체 : 속성과 메솓를 가질 수 있는 모든 것
배열, 함수도 객체이다.

-다음과 같이 a라는 이름의 배열을 선언하고 배열에 속성을 지정한 후 확인해보면 배열이 속성을 가질 수 있다는 것을 알 수 있다.

> const a = []
undefined

> a.sample = 10
10

> a.sample
10

-다음과 같이 함수 b를 선언하고 함수에 속성을 지정한 후 확인해보면 함수가 속성을 가질 수 있다는 것을 알 수 있다.

> function b () { }
undefined

> b.sample = 10
10

> b.sample
10

2. 기본 자료형

기본 자료형 : 실체가 있는것(undefined와 null 등이 아닌 것) 중에 객체가 아닌 것(숫자, 문자열, 불)

> const c = 273
undefined

> c.sample = 10
10

> c.sample
undefined --> 속성을 만들 수 있는 것처럼 보이지만 실제로 속성이 만들어지지 않는다.

> const d = '안녕하세요'
undefined

> d.sample = 10
10

//아래것들도 마찬가지로 속성이 만들어지지 않는다.
> d.sample
undefined

> const e = true
undefined

> e.sample = 10
10

> e.sample
undefined

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

숫자, 문자열, 불 등으로 자료형을 변환하는 함수 사용법
const 객체 = new 객체 자료형 이름()
숫자 객체 : new Number(10)
문자열 객체 : new String('안녕하세요')
불 객체 : new Boolean(true)
예시(기본 자료형 객체로 선언)

> const f = new Number(273) --> 숫자 객체 선언
undefined

> typeof f
"object"

> f.sample = 10
10

> f.sample
10 --> 속성을 가질 수 있다.

> f 
Number {273, sample:10} --> 콘솔에서 단순하게 f를 출력하면 객체 형태로 출력한다.

> f + 10
273

> f.valueOf()
273

> const g = Number(273)

> typeof g
"number" --> new 키워드를 사용하지 않으면 함수가 자료형 변환 기능으로 작동한다. 그러므로 객체가 아니다.

4. Number 객체

숫자 N번째 자릿수까지 출력하기
-toFixed() : 소수점 이하 몇 자리까지만 출력하고 싶을 때 사용

> const l = 123.456789
undefined

> l.toFixed(2) --> 소수점 아래 2자리까지 출력
"123.46"

> l.toFixed(3) --> 소수점 아래 3자리까지 출력
"123.457"

> l.toFixed(4) --> 소수점 아래 4자리까지 출력
"123.4568"

NaN과 Infinity 확인하기
-Number.isNaN(), Number.isNaN() : 어떤 숫자가 NaN(Not a Number)인지 또는 Infinity(무한)인지 확인할 때 사용
-NaN과 비교하면 모든 값이 false로 나오므로 isNaN()메소드 사용

> const m = Number('숫자로 변환할 수 없는 경우')
undefined

> m
NaN --> NaN을 생성

> m === NaN
false --> NaN과 비교해서는 NaN인지 확인할 수 없다.

> Number.isNaN(m)
true

> const n = 10 / 0
undefined

> n
Infinity --> 양의 무한대 생성

> const o = -10 / 0
undefined

> o
-Infinity --> 음의 무한대 생성

> Number.isFinite(n)
false

> Number.isFinite(o)
false

> Number.isFinite(1)
true

> Number.isFinite(10)
true

5. String 객체

문자열 양쪽 끝의 공백 없애기
trim() : 문자열 앞뒤 공백(띄어쓰기, 줄바꿈 등)을 제거

> const stringA = '
메시지를 입력하다보니 앞에 줄바꿈도 들어가고'
undefined

> const stringB = '   앞과 뒤에 공백도 들어가고   '
undefined

> stringA
"
메시지를 입력하다보니 앞에 줄바꿈도 들어가고"

> stringB
"   앞과 뒤에 공백도 들어가고   "

> stringA.trim()
"메시지를 입력하다보니 앞에 줄바꿈도 들어가고" --> 문자열 앞뒤 공백 제거
 
> stringB.trim()
"앞과 뒤에 공백도 들어가고" --> 문자열 앞뒤 공백 제거

문자열을 특정 기호로 자르기
split() : 문자열을 매개변수(다른 문자열)로 잘라서 배열을 마들어 리턴하는 메소드

6. JSON 객체

-인터넷에서 문자열로 데이터를 주고 받을 때는 CSV, XML, CSON 등의 다양한 자료 표현 방식을 사용할 수 있다.

-현재 가장 많이 사용되는 자료의 표현 방식은 JSON객체이다.

-JSON은 자바스크립트의 객체처럼 자료를 표현하는 방식이다.

-JSON의 규칙

값을 표현할 때는 문자열, 숫자, 불 자료형만 사용할 수 있다.(함수 등은 사용 불가)
문자열은 반드시 큰따옴표로 만들어야 한다.
키에도 반드시 따옴표를 붙어야 한다.

-JSON.stringify() : 객체를 JSON 문자열로 변환할 때 사용

-예시(JSON.stringify()메소드)

//자료 생성
const data = [{
  name: '혼자 공부하는 파이썬',
  price: 18000,
  publisher: '한빛미디어'
}, {
  name: 'HTML5 웹 프로그래밍 입문',
  price: 26000,
  publisher: '한빛아카데미'
}]

//자료를 JSON으로 변환 
console.log(JSON.stringify(data))
console.log(JSON.stringify(data, null, 2)) --> 2번째 매개변수는 객체에서 어떤 속성만 선택해서 추출하고 싶을 때 사용하나 거의 사용하지 않으며, 일반적으로 null을 넣는다, 2는 들여쓰기 2칸이라는 뜻이다.

<실행 결과>
[{"name":"혼자 공부하는 파이썬", "price":18000, "publisher":"한빛미디어"}, {"name":"HTML5 웹 프로그래밍 입문", "price":26000, "publisher":"한빛아카데미"}] -> 매개변수 하나만 넣으면 한 줄로 변환, 일반적으로 이렇게 사용
[ --> 들여쓰기 2번이 추가되었다.
  {
    "name": "혼자 공부하는 파이썬",
    "price": 18000,
    "publisher": "한빛미디어"
  },
  {
    "name": "HTML5 웹 프로그래밍 입문",
    "price": 26000,
    "publisher": "한빛아카데미"
  }
]

-JSON.parse() : JSON 문자열을 자바스크립트 객체로 전개할 때 사용
-예시(JSON.parse()메소드)

//자료 생성
const data = [{
  name: '혼자 공부하는 파이썬',
  price: 18000,
  publisher: '한빛미디어'
}, {
  name: 'HTML5 웹 프로그래밍 입문',
  price: 26000,
  publisher: '한빛아카데미'
}]

//자료를 JSON으로 변환 
const json = JSON.stringify(data)
console.log(json)

//JSON 문자열을 다시 자바스크립트 객체로 변환
console.og(JSON.parse(json))

<실행 결과>
[{"name":"혼자 공부하는 파이썬", "price":18000, "publisher":"한빛미디어"}, {"name":"HTML5 웹 프로그래밍 입문", "price":26000, "publisher":"한빛아카데미"}] -> 매개변수 하나만 넣으면 한 줄로 변환, 일반적으로 이렇게 사용

Array(2)
  0: {name: '혼자 공부하는 파이썬', price: 18000, publisher: '한빛미디어'}
  1: {name: 'HTML5 웹 프로그래밍 입문', price: 26000, publisher: '한빛아카데미'}
  length: 2
  __proto__: Array(0)

7. Math 객체

-Math : 수학과 관련된 기본적인 연산을 할 때 사용
-Math.random() : 랜덤한 숫자를 생성할 때 사용

👍 마무리

1. 다음 코드 예측

const num = 52000
num.원 = function() {
  return this.valueOf() + '원'
}

console.log(num.원())

답
오류 : num은 기본자료형이므로 메소드가 추가되지 않았기 때문이다.

2. 다음 코드 예측

function printLang(code) {
  return printLang._lang[code]
}
printLang_.leng = {
  ko: '한국어',
  en: '영어', 
  ja: '일본어',
  fr: '프랑스어',
  es: '스페인어'
}

console.log('printLang("ko"):', printLang('ko'))
console.log('printLang("en"):', printLang('en'))

답
printLang("ko"): 한국어 printLang("en"): 영어

3. 사인 90도의 값을 구하여라. 참고로 사인 90도는 1이다. 단순하게 생각해서 구현하면 0.8939966636005579라는 결과가 나온다. 이를 어떻게 해아 제대로 사용할 수 있는지 구글 검색 등을 활용해 알아보고 코드를 수정해라.

선택 미션으로!!

4. 다음 중 어떤 종류의 객체들이 모두 공유하는 속성과 메소드를 추가할 때 사용하는 객체의 이름을 골라라.

① classProp
② prototype
③ sample
④ frame

답
② prototype

06-3. 객체와 배열 고급

1. 속성 존재 여부 확인

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

if(object.author) {
  console.log('author 속성이 있습니다.')
} else {
  console.log('author 속성이 없습니다.')
}

2. 배열 기반의 다중 할당

-사용방법
[식별자, 식별자, 식별자, ...] = 배열

> let [a, b] = [1, 2] ---> a = 1, b = 2가 할당된다.
undefined

> console.log(a, b)
1, 2
undefined

> [a, b] = [b, a] --> a에 b가 할당되고, b에 a가 할당되므로 값이 서로 교환된다.
(2) [2, 1]

> console.log(a, b)
2, 1
undefined

> let arrayA = [1, 2, 3, 4, 5]
undefined

> const [a, b, c] = arrayA
undefined

> console.log(a, b, c)
1 2 3 --> 앞에 있는 3개의 값만 할당되었다.
undefined

3. 배열 전개 연산자

얕은 복사

예시(얕은 복사 이해하기)

//사야 하는 물건 목록
const 물건_200301 = ['우유', '식빵']
const 물건_200302 = 물건_200301
물건_200302.push('고구마')
물건_200302.push('토마토')

//출력
console.log(물건_200301)
console.log(물건_200302)

<실행 결과>
(4) ["우유", "식빵", "고구마", "토마토"]
(4) ["우유", "식빵", "고구마", "토마토"]

물건_200301과 물건_200302가 같은 값이 나오게 된다.

깊은 복사

깊은 복사라면 복사한 두 배열이 완전히 독립적으로 작동한다.
전개 연산자 사용 방법
[...배열]
예시(전개 연산자를 사용해 배열 복사하기)

//사야 하는 물건 목록
const 물건_200301 = ['우유', '식빵']
const 물건_200302 = [...물건_200301] --> 전개 연산자를 사용해 배열 복사
물건_200302.push('고구마')
물건_200302.push('토마토')

//출력
console.log(물건_200301)
console.log(물건_200302)

<실행 결과>
(2) ["우유", "식빵"]
(4) ["우유", "식빵", "고구마", "토마토"]