혼공 자바스크립트 - Chapter 06

✨06-1 객체의 기본

📌 객체

객체object란 추상적 의미로, 객체는 한 마디로 정의하면 '실제로 존재하는 사물'을 의미하고
'이름'과 '값'으로 구성된 속성propetty을 가진 자바스크립트의 기본 데이터 타입으로 이야기 할 수
있습니다. 이전에 살펴봤던 배열도 객체라고 할 수 있습니다.

자바스크립트에서 여러 자료를 다룰 때는 객체를 사용합니다. 배열도 여러 자료를 다룰 수 있습니다.
배열을 typeof로 실행해보면 어떤 자료형이나올까요?
object라는 문자열이 출력됩니다.
이때 출력한 object가 바로 객체 입니다.

배열에는 인덱스index 와 요소element가있습니다. 각각의 요소를 사용하려면 배열 이름뒤에
인덱스로 접근합니다

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

array[0]    -> 사과
array[1]    -> 바나나

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

배열은 요소에 점근할 때 인덱스를 사용하지만, 객체는 키key를 사용합니다.

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

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

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

product['제품명']
product['유형']


// 온점(.)도 사용이 가능하다
product.제품명
product.유형

📌 속성과 메소드

배열 내부에 있는 값을 요소 라고 합니다. 반면 객체 내부에 있는 값은 속성 이라고 합니다.
객체의 속성도 모든 형태의 자료형을 가질 수 있습니다.

• 속성과 메소드 구분하기
  객체의 속성 중 함수 자료형인 속성을 특별히 메소드method라고 부릅니다.
  다음 코드에서 객체 person은 name속성과 eat속성을 가지고 있는데, eat 속성처럼 입력값을
  받아 무언가 한다음 결과로 도출해내는 함수 자료형을 특별히 eat()메소드 라고 부릅니다.

        const person = {
           name : '구름',
           eat : function (food){}
       }
       
       //메소드를 호출합니다.
       person.eat()

  
  

• 메소드 내부에서 this 키워드 사용하기
  메소드 내부에서 자기 자신이 가진 속성을 출력하고 싶을 때는 자신이 가진 속성임을 분명하게
  표시해야합니다. 자기 자신이 가진 속성이라는 것을 표시할 때는 this 키워드를 사용합니다.

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

  
  

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

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

• 동적으로 객체 속성 추가하기
  객체를 생성한 후에 속성을 지정하고 값을 입력하면 됩니다.

        // 객체를 선언합니다.
      const student = {}
      student.이름 = '윤인성'
      student.취미 = '악기'
      student.장래희망 = '생명공학자'
  
      // 출력합니다.
      console.log(JSON.stringify(student, null, 2))

• 동적으로 객체 속성 제거하기
  객체의 속성을 제거할때는 delete키워드를 사용합니다.
  delete 객체.속성

        // 객체를 선언합니다.
      const student = {}
      student.이름 = '윤인성'
      student.취미 = '악기'
      student.장래희망 = '생명공학자'
  
      // 객체의 속성을 제거합니다.
      delete student.장래희망
  
      // 출력합니다.
      console.log(JSON.stringify(student, null, 2))

  
  

📌 메소드 간단한 선언 구문

funcion(){} 형태로 메소드를 선언할 수 있다고 배웠습니다. 최신 버전의 자바스크립트에서는
메소드를 조금 더 쉽게 선언할 수 있는 전용 구문이 있습니다.

       // 객체를 선언합니다.
     const pet = {
       name: '구름',
       eat (food) {
         alert(this.name + '은/는 ' + food + '을/를 먹습니다.')
       }
     }

     // 메소드를 호출합니다.
     pet.eat('밥')

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

        // 변수를 선언합니다.
      const test = {
        a: function () {
          console.log(this)
        },
        b: () => {
          console.log(this)
        }
      }
  
      // 메소드를 호출합니다.
      test.a()
      test.b()
      
                //출력
      			window 객체를 출력합니다.

  

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

📌 객체 자료형

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

속성과 메소드를 가질 수 있는 모든 것은 객체입니다. 배열도 객체 입니다.

      > const a = []
      undefien
      
      > a.sample = 10
      10
      
      >a.sample
      10

함수도 객체입니다.

      > function b() { }
      undefien

      > b.sample = 10
      10

      >b.sample
      10

그래서typeof 연산자를 사용해서 배열의 자료형을 확인해보면 "object"라고 객체가 출력됩니다.
배열인지 확인하려면 Array.isArray()메소드를 사용합니다. (Array도 메소드를 갖고 있으므로 객체)

    > typeof a
    "object"

    > Array.isArray(a)
    true

함수는 '실행이 가능한 객체' 라는 특이한 자료로 typeof연산자를 사용해서 자료형을 확인하면
"function"을 출력합니다. 함수는 객체의 특성을 완벽하게 가지고 있으므로 자바스크립트에서 함수를
일급객체에 속한다고 표현합니다.

> typeof b
"function"

📌 기본자료형

실체가 있는것( undefined 와 null 등이 아닌 것 ) 중에 객체가 아닌 것을 기본자료형 이라고 부릅니다.
숫자, 문자열, 불이 바로 기본 자료형 입니다.

이러한 자료형은 객체가 아니므로 속성을 가질 수 없습니다.

      > const c = 100
      undefined

      > c.sample = 10
      10

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

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

자바스크립트는 기본 자료형을 객체로 선언하는 방법을 제공합니다. 숫자,문자열, 불 등으로
자료형을 변환하는 함수(Number, String, Boolean)는 다음과 같이 사용합니다.
const 객체 = new 객체 자료형 이름()

이렇게 사용하려면 숫자 객체, 문자열 객체, 불 객체를 생성할 수 있습니다.

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

단순한 기본 자료형이 아니므로 이전과 다르게속성을 가집니다.

      > const f = new Number(100)
      undefined

      > typeof f
      "object"

      > f.sample = 11			// 속성을 가질 수 있습니다.
      11
      
      > f						// 콘솔에서 단순하게 f를 출력하면 객체 형태로 출력합니다
      Number {100, sample : 11}
      
      > f + 0
      100
      
      > f.valueOf()				// 숫자와 똑같이 활용할수 있고 valueof()메소드를 사용해서 값을
      100						// 추출할 수도있습니다.

📌 기본 자료형의 일시적 승급

자바스크립트는 사용의 편리성을 위해서 기본 자료형의 속성과 메소드를
호출할 때( 기본 자료형 뒤에 온점을 찍고 무언가 하려고 하면) 일시적으로 기본 자료형을 객체로 승급시킵니다. 그래서 속성과 메소드를 사용할 수 있는 것입니다.
이러한 상급은 일시적입니다.

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

      > h.sample = 10
      10

      > f.sample
      undefined

따라서 기본 자료형의 경우 속성과 메소드를 사용할 수는 있지만, 속성과메소드를 추가로 가질 수는
없다고 생각하면 됩니다.

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

그렇다면 승급 때 일시적으로 입는 새옷 자체를 변경하면 어떨까요? 숫자 객체 전체에어떤 속성과메소드를 추가할 수 있다면 기본 자료형 숫자도 속성과 메소드를 사용할 수 있습니다.

prototype객체에 속성과메소드를 추가하면 모든 객체( 와 기본 자료형 ) 에서
해당 속성과 메소드를 사용할 수 있습니다.
객체 자료형 이름.prototype.메소드이름 = function() { }

      > Number.prototype.sample = 10
      10

      > const i = 100
      undefined

      >i.sample
      10

모든 숫자 자료형이 어떤 값을 공유할 필요는 없으므로, 일반적으로 프로토타입에 속성을 추가하지않습니다. 하지만 프로토타입에 메소드를 추가하면 다양하게 활용할 수 있습니다.

      // 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))

코드에서this.valueOf()로 숫자 값을 꺼냈습니다. 그냥 this ** n을 해도 아무 문제 없이 계산됩니다.
하지만객체내부에서값을 꺼내 쓰는 것임을 명확하게하기 위해서 4행처럼 valueOf() 메소드를
사용하는 것이 일반적입니다.

contain()메소드 구현해보기

      // 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))

📌 Number 객체

• 숫자 N번째 자릿수까지 출력하기 : toFixed()
  Number 객체에서 자주 사용하는 메소드는 toFixed() 메소드 입니다. 소수점 이하 몇 자리까지만
  출력하고 싶을때사용합니다.

        > const l = 123.4567
       undefined
  
       > l.toFixed(2)
       "123.46"
       
       > l.toFixed(3)
       "123.457"
  

  
  

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

        // isNaN
       
       > const m = Number('숫자로 변환할 수 없는 경우')
       undefined
       
       > m
       NaN
       
       > m === NaN
       false
       
       > Number.isNaN(m)
       true
  
       // Infinity
       
       > const n = 10 / 0
       undefined
       
       > n
       Infinity
       
       > const o = -10 / 0
       undefined
       
       > 0
       Infinity
       
       > Number.isFinite(n)
       false
       
       > Number.isFinite(o)
       false
       
       > Number.isFinite(1)
       true
       
       > Number.isFinite(10)
       true

  
  

📌 String 객체

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

  "     안녕하세요    "   =>  "안녕하세요"

  
  

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

📌 JSON 객체

인터넷에서 문자열로데이터를 주고 받을 때는 CSV, XML, CSON 등의 다양한 자료 표현 방식을
사용할 수 있습니다. 현재 가장 많이 사용되는 자료 표현 방식은 JSON객체 입니다.
JSON은 JavaScript Object Notation 의 약자로 자바스트립트의 객체처럼자료를 표현하는 방식입니다.

		//하나의 자료 예
{
	 "name" = "혼자 공부하는 자바스크트립트",
	 "price" = 18000,
	 "publisher" = "한빛미디어"
}

		//여러개의 자료 예
[{
	 "name" = "혼자 공부하는 자바스크트립트",
	 "price" = 18000,
	 "publisher" = "한빛미디어"
}, {
	 "name" = "혼자 공부하는 파이썬",
	 "price" = 15000,
	 "publisher" = "한빛아카메디"
}]

JSON형식의 추가 규칙
. 값을 표현할 때는 문자열, 숫자, 불 자료형만 사용할 수 있습니다.( 함수 등은 사용 불가 )
. 문자열은 반드시 큰따옴표로 만들어야 합니다
. 키 에도 반드시 따옴표를 붙여야 합니다

자바스크립트 객체를 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))
     
     		// null -> 2번째 매개변수는 객채에서 어떤 속성만 선택해서 추출하고 싶을때 사용하거나
           				거의 사용하지 안ㅇ흐며, 일반적으로 null을 넣습니다
           // 2  ->    들여쓰기 2칸으로 설정합니다.

JSON.parse() 메소드

      // 자료를 생성합니다.
     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))

📌 Math 객체

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

> Math.PI
3.141592653

> Math.E
2.71828182

Math.random()메소드를 사용해서 '랜덤한 숫자 만들기'

     const num = Math.random()

     console.log('# 랜덤한 숫자')
     console.log('0~1 사이의 랜덤한 숫자:', num)		// 0 <= 결과 < 1 의 범위를 갖습니다.
     console.log('')
     
     console.log('# 랜덤한 숫자 범위 확대')
     console.log('0~10 사이의 랜덤한 숫자:', num * 10)			// 0 <= 결과 < 10 의 범위를 갖습니다.
     console.log('0~50 사이의 랜덤한 숫자:', num * 50)
     console.log('')

     console.log('# 랜덤한 숫자 범위 이동')
     console.log('-5~5 사이의 랜덤한 숫자:', num * 10 - 5)		// -5 <= 결과 < 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 파일 읽어들이기

외부 자바스크립트 파일을 읽을 때 scrip태그를 사용합니다. 그리고 src속성에 읽어들일 파일의
경로를 입력하면 됩니다.

main.html


<!DOCTYPE html>
<html>
 <head>
   <title></title>
   <script src="test.js"></script>
   <script>
     console.log('# main.html의 script 태그')
     console.log('sample 값:', sample)
   </script>
 </head>
 <body></body>
</html>

test.js


console.log('# test.js 파일')
const sample = 10

실행결과
# test.js 파일
# main.html의 script 태그
sample 값 : 10

main.html 파일에서5행의 외부 자바스크립트를 읽어들이는
script 태그 <script src="test.js"></script>가 6~9행의 코드가 적혀 있는 script 태그보다
위에 있으므로 먼저 실행된 것입니다.

✨06-3 객체와 배열 고급

속성 존재여부 확인

객체에 없는 속성에 접근하면 undefined 자료형이나옵니다. 따라서 조건문으로 undefined 인지
아닌지 확인하면 속성 존재여뷰를 확인할 수 있습니다.

      // 객체를 생성합니다.
     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 속성이 없습니다.')
     }

간단한 코드이지만, 개발자들은 일반적으로더 간단하게 검사하려고 다음과 같이 사용하기도 합니다.
객체의 특정 속성이 false로변환될 수 있는 값( 0, false, 빈 문자열 등 )이 아닐때와 같은
전제가 있어야 안전하게 사용할 수 있는 코드입니다.

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

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

	  // 객체 내부에 속성이 있는지 확인 합니다.
     object.name || console.log('name 속성이 없습니다.')
     object.author || console.log('author 속성이 없습니다.')

이러한 내용을 활용해서 객체의 기본 속성을 지정하는 경우도 많습니다. 객체의 속성이 있는지
확인 하고 있다면 해당 속성을, 없다면 문자열을 지정하는 코드입니다.

      // 객체를 생성합니다.
     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))

📌 배열 기반의 다중 할당

최신 자바스크립트부터 배열과 비슷한 작성 방법으로 한 번에 여러 개의 변수에 값을 할당하는
다중 할당 기능이 추가되었습니다.
[식별자, 식별자,식별자, ...] = 배열

> let [a, b] = [1, 2]		// a=1, b=2가 할당됩니다.
undefined
> console.log(a,b)
1, 2


> [a, b] = [b, a]
(2) [2, 1]

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

할당 연산자(=) 왼쪽에 식별자(변수 또는 상수 )의 배열을 넣고,오른쪽에 배열을 위치시키면 배열의
위치에 맞게 값들이 할당됩니다. 처음에 [a, b] = [1, 2]라고 할당했으므로 a에 1이 할당되고,
b에 2가 할당됩니다. 이때 let[a,b]형태로 선언했으므로 a와b는 변수가 됩니다.

참고로 (1) 배열의 크기는 같을 필요도 없고, (2) const 키워드로도 사용할 수 있습니다.

📌 객체 기반의 다중 할당

최신 자바스크립트에는 객체 내부에 있는 속성을 꺼내서 변수로 할당할 때 다음과 같은 코드를
사용할 수 있습니다.


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

{ 속성 이름, 속성 이름 } = 객체
{ 식별자 = 속성 이름, 식별자 = 속성 이름 } = 객체

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

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

전산 연산자를 사용한 배열 요소 추가
[...배열, 자료, 자료, 자료]

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

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

📌 객체 전개 연산자

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

      const 구름 = {
        이름: '구름',
        나이: 6,
        종족: '강아지'
      }
      const 별 = 구름
      별.이름 = '별'
      별.나이 = 1

      console.log(JSON.stringify(구름))
      console.log(JSON.stringify(별))

전개 연산자를 사용해서 깊은 복사를 하면 두 객체가 독립적으로 동작하는 것을 볼 수 있습니다.

      const 구름 = {
        이름: '구름',
        나이: 6,
        종족: '강아지'
      }
      const 별 = {...구름}
      별.이름 = '별'
      별.나이 = 1

      console.log(JSON.stringify(구름))
      console.log(JSON.stringify(별))

전개 연산자를 사용한 객체 요소 추가
{...객체, 자료, 자료, 자료}
예를 들어 '구름'이라는 객체에 변경하고 싶은 속성만 넣어서 추가로 입력한다면 다음과 같이 할 수
있습니다.

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

      console.log(JSON.stringify(구름))
      console.log(JSON.stringify(별))

전개를 어떤 위치에서하는지에 따라결과가 달라집니다. 이전코드에서 전개 부분을 뒤로 옮기면
다음과 같이 출력합니다.

      const 구름 = {
        이름: '구름',
        나이: 6,
        종족: '강아지'
      }
      const 별 = {
        이름: '별',
        나이: 1,
        예방접종: true,
        ...구름				// 뒤에 입력하면 구름이라는 객체가 모두 덮어 씁니다.
      }

      console.log(JSON.stringify(구름))
      console.log(JSON.stringify(별))