본문 바로가기
Javascript/혼공자스

혼공자스 6 Chapter 객체

ddorongg 2022. 12. 2. 21:32

06 - 1 객체

객체 (object)

: 실제로 존재하는 사물을 의미. 이름 값(key)과 값(value)으로 구성된 속성(property)을 가진 자바스크립트의 기본 데이터 타입

 

 

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

배열도 여러 자료를 다룰 수 있음 → 배열도 객체이기 때문

 

배열 vs 객체  

배열은 요소에 접근할 때 인덱스(index) 사용

객체는 키(key)를 사용

 

객체는 중괄호{...}로 생성 자료를 쉼표(,)로 연결하여 입력

키: 값

 

객체의 요소에 접근하는 방법

product['제품명']

product['유형']

product['성분']

product['원산지']

 

또는

 

product.제품명

product.유형

product.성분

product.원산지

 

온점을 사용하는 것이 더 빠른 코딩을 가능하게 함

 

※ 식별자가 아닌 문자열을 키로 사용했을 때는 무조건 대괄호[...]를 사용해야 객체의 요소에 접근 가능

 

속성과 메소드 구분

배열 내부에 있는 값 - 요소(element) 

객체 내부에 있는 값 - 속성(property) 

 

객체의 속성 중 함수 자료형인 속성 - 메소드(method)

 

메소드 내부에서 this 키워드 사용

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

= this 키워드 사용

 

메소드 내부에서의 this 키워드 - this 키워드를 사용해 자신이 가진 속성에 접근

 

결과

 

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

객체를 처음 생성한 후에 속성을 추가하거나 제거하는 것

 

● 동적으로 객체 속성 추가

 <script>
      // 객체를 선언합니다.
      const student = {}
      student.이름 = '윤인성'
      student.취미 = '악기'
      student.장래희망 = '생명공학자'

      // 출력합니다.
      console.log(JSON.stringify(student, null, 2))
    </script>

 

실행 결과

 

● 동적으로 객체 속성 제거

delete 객체.속성 
 <script>
      // 객체를 선언합니다.
      const student = {}
      student.이름 = '윤인성'
      student.취미 = '악기'
      student.장래희망 = '생명공학자'

      // 객체의 속성을 제거합니다.
      delete student.장래희망

      // 출력합니다.
      console.log(JSON.stringify(student, null, 2))
    </script>

 

실행결과 

- 장래희망 속성 제거됨

 

메소드 간단 선언 구문

전에 것과 비교

첫번째 꺼가 더 이해가 쉽고 간편쓰 ㅎ

 

익명함수와 화살표 함수는 객체의 메소드로 사용될 때 this키워드를 다루는 방식이 다름

메소드 내부에서 this 키워드를 사용할 때 의미가 달라지므로 화살표 함수를 메소드로 사용하지 않는 편

 

 

 

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

 

자바스크립트의 자료형

  • 기본자료형 - 숫자, 문자열, 불
  • 객체자료형 - 함수, 배열, ... 이외 전부 ...

자바스크립트에서는 기본자료형이 객체자료형이 될 수도 있음 > prototype 객체

 

※ 불(bool)  자료형 - 참(True)과 거짓(False)을 나타내는 자료형

  • True - 참
  • False - 거짓

 

객체 자료형

속성과 메소드를 가질 수 있는 모든 것은 객체 배열, 객체 함수도 객체

type of 연산자를사용해서 배열의 자료형을 확인해보면 'object'라고 객체 출력 

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

함수는 '실행이 가능한 객체'라는 특이한 자료로 typeof 연산자 사용 자료형 확인하면 "function" 출력

함수는 객체의 특성을 완벽하게 가지고 있음 > 일급객체 first-class citizen

 

const a = []
//undefined

a.sample = 10  //a['sample'] = 10 키가 sample 값은 10

a.sample = 10

 

기본 자료형

실체가 있는 것(undefined와 null 등이 아닌 것) 중에 객체가 아닌 것 

객체가 아니므로 속성을 가질 수 없음 

const c = 273
//undefined

c.sample = 10
//10

c.sample
//undefined

c.sample = 10은 속성을 추가하는 것 처럼 보이지만, 그 다음 코드를 보면 c.sample이 undefined로 나오므로 속성이 추가되지 않았다는 것을 알 수 있다.

 

 

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

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

 

new Number(10)

new String('안녕하세요')

new Boolean(true)

이렇게 하면 객체 생성 완료 > 연산자 사용 가능, 속성과 메소드 활용 가능

 

※ new 키워드를 사용하지 않으면 함수가 자료형 변환 기능으로 작동

 

기본 자료형의 일시적 승급

문자열 자료형을 생성하고 온점을 찍으면 자동완성 기능으로 anchor, blink, bold, concat 등 메소드 들이 나옴

원래 기본 자료형은 속성과 메소드를 가질 수 없음. 그런데 어떻게 가지고 있는거쥐??

 

- 자바스크립트는 사용의 편리성을 위해서 기본 자료형의 속성과 메소드를 호출할 때 (기본 자료형 뒤에 온점을 찍고 무언가 하려고 하면) 일시적으로 기본 자료형을 객체로 승급 > 속성과 메소드 사용 가능해짐.이러한 승급은 일시적이라 추가되는 것 처럼 보이지만 실제로는 추가 되지 않음.

 

const h = "안녕하세요"
//undefined

h.sample = 10
//10

h.sample
//undefined

승급 때 잠시 속성이라는 새 옷을 입었다가 바로 뺏긴다,,!

 

따라서 기본 자료형의 경우 속성과 메소드를 사용할 수는 있지만, 속성과 메소드를 추가로 가질 수는 없음.

 

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

숫자 객체 전체에 어떤 속성과 메소드를 추가하면 기본 자료형 숫자도 속성과 메소드를 사용할 수 있음

 

어떤 객체의 prototype이라는 속성이 바로 객체 전용 옷(틀)이라고 할 수 있음.

prototype 객체에 속성과 메소드를 추가하면 모든 객체(와 기본자료형)에서 해당 속성과 메소드를 사용할 수 있음.

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

}

 

Number.prototype.sample = 10
//10

const i = 273
//undefined

i.sample
//10

모든 숫자 자료형이 어떤 값을 공유할 필요는 x

- 일반적으로 프로토타입에 속성을 추가하지 않음. 

하지만 프로토타입에 메소드를 추가하면 다양하게 활용 가능

 

제곱연산자(**)

2**2
//4

2**3
//8

2**4
//16

 

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

<script>
      // power() 메소드를 추가합니다.
      Number.prototype.power = function (n = 2) {
        return this.valueOf() ** n
      }

      // Number 객체의 power() 메소드를 사용합니다.
      const a = 12
      console.log('a.power():', a.power())
      console.log('a.power(3):', a.power(3))
      console.log('a.power(4):', a.power(4))
    </script>

this.valueOf()로 객체 내부에서 값을 꺼내 쓰는 것임을 명확하게 하기 위해 valueOf()메소드 사용

 

 

자바스크립트에서는 문자열 내부에 어떤 문자열이 있는지, 배열 내부에 어떤 자료가 있는지 확인할 때 indexOf() 메소드 사용. 문자열의 indexOf()메소드, 배열의 indexOf()메소드

 

✔ 문자열 내에 있는 문자열 : 해당 문자열이 시작하는 위치의 인덱스 출력

✔ 문자열 내에 없는 문자열 : -1 출력

 

"문자열.indexOf(문자열) >= 0" 등의 코드를 사용하면 문자열 내부에 어떤 문자열이 포함되었는지 true or false로 알 수 있음. "문자열.contain(문자열)" 했을 때 true 또는 false를  리턴하는 형태로 변경하면 편리하게 사용 가능

 

contain() 함수 : 해당 문자열에 지정 문자열이 포함되어 있는지 확인하는 함수

 

<script>
      // contain() 메소드를 추가합니다.
      String.prototype.contain = function (data) {
        return this.indexOf(data) >= 0
      }

      Array.prototype.contain = function (data) {
        return this.indexOf(data) >= 0
      }

      // String 객체의 contain() 메소드를 사용합니다.
      const a = '안녕하세요'
      console.log('안녕 in 안녕하세요:', a.contain('안녕'))
      console.log('없는데 in 안녕하세요', a.contain('없는데'))

      // Array 객체의 contain() 메소드를 사용합니다.
      const b = [273, 32, 103, 57, 52]
      console.log('273 in [273, 32, 103, 57, 52]:', b.contain(273))
      console.log('0 in [273, 32, 103, 57, 52]:', b.contain(0))
    </script>

 

실행 결과)

 

Number 객체 

 

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

- 소수점 이하 몇자리까지만 출력하고 싶을 때 

ex) 소수점 아래 2자리 toFixed(2) 소수점 아래 3자리 toFixed(3)

const l = 123.456789
//undefined

l.toFixed(2)
//"123.46"

l.toFixed(3)
//"123.457"

l.toFixed(4)
//"123.4568"

 

isNaN(), IsFinite()

어떤 숫자가 NaN(Not a Number - 숫자로 나타낼 수 없는 숫자)인지 또는 Infinity(무한 - 숫자를 0으로 나누는 것과 같이 무한대 숫자를 의미)인지 확인할 때는 Number.isNaN() 메소드와 Number.isFinite() 메소드 사용

 

NaN

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

m===nan
//false - NaN과 비교해서는 NaN인지 확인할 수 없음

Number.isNaN(m)
//true

 

 Infinity

const n = 10/0
//undefined

n
//infinity

const o =-10/0
//undefined

o
//-Infinity : 음의 무한대 생성

Number.isFinite(n)
//false
                        //isFinite(유한한 숫자인가?)가 false로 나옴
Number.isFinite(o)
//false

//================//

Number.isFinite(1)
//true
                        //일반적인 숫자는 셀 수 있으므로 true가 나옴
Number.isFinite(10)
//true

※ 무한대 값은 비교 연산자로 비교할 수 있음.

 

String 객체

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

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

 

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

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

* input.split('\n') - 줄바꿈으로 자르기

 

JSON 객체

JavaScript Object Notation의 약자. 자바스크립트의 객체처럼 자료를 표현하는 방식

[{
   "name" : "혼자 공부하는 파이썬", 1\
   "price" : 18000,
   "publisher" : "한빛미디어"
},{
   "name" : "HTML5 웹 프로그래밍 입문",
   "price" : 24000,
   "publisher" : "한빛미디어"
}]

 

JSON 규칙

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

자바스크립트 객체를 JSON 문자열로 변환할 때는 JSON.stringify()메소드 사용

 

 

JSON.stringify() 메소드

[{
   "name" : "혼자 공부하는 파이썬", 1\
   "price" : 18000,
   "publisher" : "한빛미디어"
},{
   "name" : "HTML5 웹 프로그래밍 입문",
   "price" : 24000,
   "publisher" : "한빛미디어"
}]

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

 

실행 결과)

 

 

JSON문자열을 자바스크립트 객체로 전개할 때는 JSON.parse() 메소드를 사용. 매개변수에 JSON형식의 문자열을 넣어주면 됨

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

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

      // JSON 문자열을 다시 자바스크립트 객체로 변환합니다.
      console.log(JSON.parse(json))
    </script>

 

실행 결과)

 

Math 객체 

Math 객체 속성으로 pi, e 메소드는 Math.sin(), Math.cos(), Math.tan() 같은 삼각함수 존재

 

Math.random() 메소드는 0 이상 1 미만의 랜덤한 숫자 생성 0 <= 결과 <1의 범위만 생성 

 

<script>
      const num = Math.random()

      console.log('# 랜덤한 숫자')
      console.log('0~1 사이의 랜덤한 숫자:', num)
      console.log('')
      
      console.log('# 랜덤한 숫자 범위 확대')
      console.log('0~10 사이의 랜덤한 숫자:', num * 10)
      console.log('0~50 사이의 랜덤한 숫자:', num * 50)
      console.log('')

      console.log('# 랜덤한 숫자 범위 이동')
      console.log('-5~5 사이의 랜덤한 숫자:', num * 10 - 5)
      console.log('-25~25 사이의 랜덤한 숫자:', num * 50 -25)
      console.log('')

      console.log('# 랜덤한 정수 숫자')
      console.log('-5~5 사이의 랜덤한 정수 숫자:', Math.floor(num * 10 - 5))
      console.log('-25~25 사이의 랜덤한 정수 숫자:', Math.floor(num * 50 - 25))
    </script>

 

Math.floor()

소수점 이하의 숫자를 버리고 정수를 생성

math.floor(math.random() * n

 

외부 script 파일 읽어들이기

외부 라이브러리 

다른 사람들이 만든 다양한 함수와 클래스를 묶어서 제공해주는 것 

 

유틸리티 라이브러리 

개발할 때 보조적으로 사용하는 함수들을 제공해주는 라이브러리 (underscore, Lodash 등)

- 최근엔 Lodash 라이브러리 많이 사용

 

Lodash 사이트 다운로드 페이지 - [Full Build] 클릭 곧바로 파일 다운로드가 될 경우 : 다운로드한 파일을 HTML 파일과 같은 위치에 놓고 읽어들임파일 내용이 출력될 경우 : 마우스 오른쪽 버튼을 클릭하고 [다른 이름으로 저장]을 선택한 뒤 HTML 파일과 같은 위치에 놓고 다운로드다운로드 페이지 [CDN copies] 클릭 - [lodash.min.js] 오른쪽 [Copy to Clipboard] 아이콘 클릭 - CDN 링크 복사 - 복사한 링크를 script 태그에 src 속성에 입력

 

CDN - 콘텐츠 전송 네트워크 min 버전 - 자바스크립트 코드를 집핑한 파일을 의미집핑 - 데이터의 용량을 줄이고자 소개를 줄이고 모든 코드를 응축

 

sortBy()메소드 - 배열을 어떤 것으로 정렬할 지 지정하면, 지정한 것을 기반으로 배열을 정렬해서 리턴해주는 메소드 

 <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: '머신러닝 딥러닝 실전 개발 입문',
        prie: 30000,
        publisher: '위키북스'
      }, {
        name: '딥러닝을 위한 수학',
        price: 25000,
        publisher: '위키북스'
      }]

      // 가격으로 정렬한 뒤 출력합니다.
      const output = _.sortBy(books, (book) => book.price)
      console.log(JSON.stringify(output, null,2))      
    </script>

 

실행결과

가격(price)으로 정렬한 결과 출력

 

 

확인문제 

1) num.prototype.원 이라고 prototype 추가해도 오류나는 이유는 ??

2) 어떤 종류의 객체들이 모두 공유하는 속성과 메소드를 추가할 때 사용하는 객체의 이름 👉sample

06 - 3 객체와 배열 고급

속성 존재 여부 확인

객체내부에 어떤 속성이 있는지 확인해보는 코드

객체에 없는 속성에 접근하면 undefined 자료형 나옴 👉 조건문으로 undefined인지 아닌지 확인하면 속성존재여부 알 수 있음. 

<script>
      // 객체를 생성합니다.
      const object = {
        name: '혼자 공부하는 파이썬',
        price: 18000,
        publisher: '한빛미디어'
      }

      // 객체 내부에 속성이 있는지 확인합니다.
      if (object.name !== undefined) {
        console.log('name 속성이 있습니다.')
      } else {
        console.log('name 속성이 없습니다.')
      }
      if (object.author !== undefined) {
        console.log('author 속성이 있습니다.')        
      } else { 
        console.log('author 속성이 없습니다.')
      }
    </script>

 

결과

name 속성이 있습니다.

author 속성이 없습니다.0

 

일반적이고 더 간단하게 검사 - 객체의 특성 속성이 false로 변환될 수 있는 값

(0, false, 빈 문자열 등이 아닐 때 안전하게 사용)

 <title></title>
    <script>
      // 객체를 생성합니다.
      const object = {
        name: '혼자 공부하는 파이썬',
        price: 18000,
        publisher: '한빛미디어'
      }

       // 객체의 기본 속성을 지정합니다.
       object.name = object.name !== undefined ? object.name : '제목 미정'
       object.author = object.author !== undefined ? object.author : '저자 미상'

       // 객체를 출력합니다.
       console.log(JSON.stringify(object, null, 2))
    </script>

 

결과)

  

더 짧게 줄이기

object.name || console.log('name 속성이 없습니다.') 
object.author || console.log ('author 속성이 없습니다.')

 

 

속성이 false로 변환될 수 있는 값이 들어오지 않을 것이라는 전제 🔘

많은 개발자들이 이렇게 쓴댄다.. 외우자,,^^

object.name = object.name || '제목 미정'
object.author = object.author || '저자 미상'

 

 

배열 기반의 다중 할당  = 구조 분해 할당

한번에 여러 개의 변수에 값을 할당하는 다중할당 기능

 

다중할당

[식별자, 식별자, 식별자, ...] = 배열

let [a, b] = [1, 2]

a = 1, b = 2 할당

 

 

객체 기반의 다중할당

객체 내부에 있는 속성을 꺼내서 변수로 할당

 

객체 속성 꺼내서 다중 할당하기

{ 속성 이름, 속성 이름 } = 객체
{ 식별자=속성 이름, 식별자=속성 이름 } = 객체
 
<script>
      // 객체를 생성합니다.
      const object = {
        name: '혼자 공부하는 파이썬',
        price: 18000,
        publisher: '한빛미디어'
      }

       // 객체에서 변수를 추출합니다.
       const { name, price } = object
       console.log('# 속성 이름 그대로 꺼내서 출력하기')
       console.log(name, price)
       console.log('')

       const { a=name, b=price } = object
       console.log('# 다른 이름으로 속성 꺼내서 출력하기')
       console.log(a, b)
    </script>

 

결과

 

 

배열 전개 연산자

배열과 객체는 할당할 때 얕은 복사가 이뤄짐

배열은 복사해도 다른 이름이 붙을 뿐! 👉 얕은 복사(참조 복사) ↔ 깊은 복사

 

깊은 복사 복사한 두 배열이 완전히 독립적으로 작동 

- 클론(clone)을 만드는 것

전개연산자 이용하면 손쉽게 만들어짐!

 

전개연산자를 사용한 배열 복사

[...배열]

이전과 다르게 두 배열이 독립적으로 작동

 

전개연산자를 사용한 배열 요소 추가

[...배열, 자료, 자료, 자료]

 

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

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

 

결과

위치를 원하는 곳에 놓아서 요소들의 순서를 바꿀 수 있음

 

객체 전개 연산자

객체도 얕은 복사, 깊은 복사 할 때 전개연산자 사용 가능

 

전개연산자를 사용한 객체 복사

{... 객체}

 

전개연산자를 사용한 객체 요소 추가

{...객체, 자료, 자료, 자료}

 

    <script>
      const 구름 = {
        이름: '구름',
        나이: 6,
        종족: '강아지'
      }
      const 별 = {
        ...구름,
        이름: '별',
        나이: 1,
        예방접종: true
      }

      console.log(JSON.stringify(구름))
      console.log(JSON.stringify(별))
    </script>

 

결과

참고) 객체는 전개 순서가 중요! 전개라는 이름처럼 전개한 부분에 객체가 펼쳐짐

 

전개부분 뒤로 이동

  <script>
      const 구름 = {
        이름: '구름',
        나이: 6,
        종족: '강아지'
      }
      const 별 = {
        이름: '별',
        나이: 1,
        예방접종: true,
        ...구름
      }

      console.log(JSON.stringify(구름))
      console.log(JSON.stringify(별))
    </script>

 

결과

'Javascript > 혼공자스' 카테고리의 다른 글

08 예외처리  (0) 2024.02.06
혼공자스 7 Chapter 객체  (0) 2022.12.16
혼공자스 Chapter 5 함수  (0) 2022.11.28
혼공자스 Chapter 4 반복문  (0) 2022.11.13

'Javascript/혼공자스' Related Articles

티스토리툴바