Chapter 06

6장

---

☃️6-1 객체의 기본

- 객체

자바스크립트에서 여러 자료를 다룰 때는 객체를 사용

배열도 여러 자료를 다룰 수 있다. 그렇게 할 수 있었던 이유는 배열도 객체이기 때문

 

배열을 typeof로 실행해보면 object라는 문자열이 출력

이때 출력한 object가 바로 객체이다.

 

객체는 중괄호[...]로 생성하며, 다음과 같은 형태의 자료를 쉼표(,)로 연결해서 입력

키: 값

객체선언

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

+키와 값 뒤에 쉼표(,)를 넣어 구분함

위에서 생성한 객체를 표로 나타내면 

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

 

- 객체의 요소에 접근할 수 있는 방법

1. 객체 뒤에 대괄호[...]를 사용하고 키를 입력하면 객체의 요소에 접근 할 수 있음

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

2. 온점(,)을 사용하기

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

+온점을 사용하면 보조기능을 활용 할 수 있음

 

- 속성과 메소드 

배열 내부에 있는 값을 요소(element)라고 함

반면 객체 내부에 있는 값을 속성(property)라고 함

<script>
    //변수 선언
    const pet = {
        name: '구름',
        eat: function(food){}
    }
    //메소드 호출
    pet.eat()
</script>

 

1. 속성과 메소드 구분하기

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

 

2. 메소드 내부에서 this 키워드를 사용하기

메소드 내에서 자기 자신이 가진 속성을 출력하고 싶을 때는 자신이 가진 속성임을 분명하게 표시해야 함

자기 자신이 가진 속성이라는 것을 표시할 때는 this 키워드를 사용

<script>
    //변수 선언
    const pet = {
        name: '구름',
        eat: function(food){
            alert(this.name + '은/는 ' + food + '을/를 먹습니다.')
        }
    }
    //메소드 호출
    pet.eat(밥)
</script>

결과

 

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

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

 

1. 동적으로 객체 속성 추가하기

JSON, stringify() 메소드 사용하기

 

2. 동적으로 객체 속성 제거하기

객체의 속성을 제거할 때는 delete 키워드를 사용

delete 객체.속성

 

- 메소드 간단 선언 구문

function () {} 형태로 메소드 선언

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

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

 

☃️6-2 객체의 속성가 메소드 사용하기

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

기본 자료형 : 숫자, 문자열, 불 

객체 자료형 : 함수, 배열, ...이외 전부...

 

- 객체 자료형

객체의 속성 중에 함수 자료형인 속성

new 키워드를 사용하여 생성

배열과, 함수도 객체 

+배열인지 확인하려면 Array.isArray()메소드를 사용

1. 일급 객체 (first-class object)

: 다른 객체들에게 적용가능한 연산을 모두 지원하는 객체 

자바스크립트에서 함수는 객체의 특성을 모두 갖고 있으므로 일급 객체에 속한다

 

- 기본 자료형

: 실체가 있는 것 중에 객체가 아닌 것.(숫자, 문자열, 불)

객체가 아니기 때문에 속성가 메소드를 추가할 수 없음

 

ex) 숫자 자료형에 속성이나 메소드를 사용하면 일시적으로 Number 객체로 변환되면서, 기본 자료형이지만 속성이나 메소드를 사용할 수 있음 하지만 직접 추가한 것이므로 추가하자마자 버려짐(이때 프로타입으로 바꾸면 속성과 메소드를 추가 할 수 있음)

 

- 프로토타입 객체

: 객체의 틀. 프로토타입 객체에 속성과 메소드를 추가하면 모든 객체에서 해당 속성과 메소드를 사용할 수 있음 -> 기본 자료형의 객체화 !

 

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

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

이렇게 사용하면 숫자 객체, 문자열 객체, 불 객체 생성할 수 있음

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

 

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

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

}

+ 최신 자바스크립트에는 제곱연산자(**)가 있음

이를 사용하면 숫자를 n제곱할 수 있음

 

- Number 객체 

1. 숫자 N번째 자릿수까지 출력하기 : toFixed()

Number 객체에서 자주 사용하는 메소드는 toFixed는() 메소드이다.

소수점 이하 몇 자리까지만 출력하고 싶을 때 사용. 소수점 아래 2자리까지 출력하고 싶다면 toFixed(2), 3자리까지 출력하고 싶다면 toFixed(3)형태로 사용

2. NaN과 Infinity 확인하기 : isNaN(), isFinite()

어떤 숫자가 NaN(Not a Number)인지 또는 Infinity(무한)인지 확인할 때는 Number.isNaN()메소드와 Number.isFinite() 메소드를 사용한다.

이 메소드들은 숫자 자료 뒤에 온점을 찍고 사용하는 것이 아니라 Number 뒤에 점을 찍고 사용한다.

 

NaN과 비교하면 모든 값이 false로 나오므로 isNaN() 메소드를 사용해야 NaN인지 확인할 수 있음

Infinity 사용하기

 

- String 객체 

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

: trim() 메소드를 사용하면 문자열 앞뒤 공백(띄어쓰기, 줄바꿈 등)을 제거 할 수 있음

2. 문자열을 특정 기호로 자르기 : split()

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

 

- JSON 객체

: 자바스크립트의 배열과 객체를 활용해 자료를 표현하는 방식.

이름과 값이 쌍으로 이루어진 데이터

• 값을 표현할 때 문자열(객체를 문자열로 변환할 때 JSON.stringify() 메소드를 사용함), 숫자, 불 자료형만 사용 가능
  (함수 불가)
• 문자열은 반드시 큰따옴표("")로 만든다
• 키(key)에도 반드시 따옴표를 붙인다

 

- Math 객체

수학과 관련된 기본적인 연산을 할 때는 Math 객체를 사용

Math 객체 속성으로는 Pi, e와 같은 수학 상수가 있음

메소드로는 Math.sin(), Math.cos(), Math.tan()와 같은 삼각함수도 있음

+ 랜덤한 숫자를 생성할 때는 Math.random()메소드를 사용

Math.random() 메소드는 0이상, 1미만의 랜덤한 숫자를 생성

 

- 유틸리티 라이브러리

: 개발할 때 보조적으로 사용하는 함수를 제공해주는 라이브러리.

underscore, Lodash 등의 다양한 라이브러리가 있음

 

- 콘텐츠 전송 네트워크(CDN)

: 콘텐츠 전송 네트워크

전 세계 여러 지역에 전송할 콘텐츠를 창고처럼 준비해두고, 멀리 떨어져 있는 사용자가 콘텐츠를 요청했을 때 가장 가까운 지역에서 콘텐츠를 빠르게 제공하는 기술