혼공 JS 5주차

■ 내용설명

 

♣ 객체

 여러 자료형을 다룰때, 객체를 사용합니다.

 배열도 비슷하게 key, value형태를 사용하지만, 배열은 인덱스를 사용해서 접근하지만, 객체는 키를 사용해서 접근합니다.

 배열 : [ ] 형태를 사용하고, 객체는 { } 형태를 사용합니다.

// 키부분을 그냥 문자열, "", '' 어떠한 형태도 모두 가능하다
const product = {
    제품명 : "망고",
    유형 : "당절임",
    성분 : 'a,b,c,d',
    원산지 : '필리핀',
    "테스트1" : "tes1",
    '테스트2' : 'test2'

}

// 호출하기1 : 겍체['키']
console.log(product['제품명'])
console.log(product['성분'])
console.log(product.테스트1)
console.log(product.테스트2)

// 호출하기2 : 겍체.키
console.log(product.제품명)
console.log(product.성분)
console.log(product.테스트1)
console.log(product.테스트2)

 

함수 안에서는 자기자신이 가진 속성을 지칭하는 this를 사용하는 것이 좋습니다.

// name이 2군데 있습니다.
// 함수 안에서는 명시적으로 this.를 활용한 처리가 더 효과적인것을 확인할수 있습니다.
const name = "init구름";

const pet = {
    name : '구름',
    eat  : function (food) {
        console.log(this.name + food + '먹습니다.') // 구름치킨먹습니다.
        console.log(name + "/ " + this.name +  food + '먹습니다.') // init구름/ 구름치킨먹습니다.
    }
}

pet.eat('치킨')

 

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

의미 : 객체를 처음 만들고 추가,제거하는 것을 하는것

 

const aaa = {}
aaa.이름 = '홍길동'
aaa.취미 = "농구"
aaa.희망 = "부자"

// json객체로 만들기
console.log(JSON.stringify(aaa, null, 2))
// {
//     "이름": "홍길동",
//     "취미": "농구",
//     "희망": "부자"
// }

console.log(JSON.stringify(aaa);
// {"이름":"홍길동","취미":"농구","희망":"부자"}

 - 삭제하기

형식 : delete 객체.속성

const aaa = {}
aaa.이름 = '홍길동'
aaa.취미 = "농구"
aaa.희망 = "부자"
aaa.월급 = "100"
aaa.자동차 = "씽씽이"


delete aaa.이름
delete aaa['취미']
delete aaa["희망"]

// json객체로 만들기
console.log(JSON.stringify(aaa, null, 2))
// {
//     "월급": "100",
//     "자동차": "씽씽이"
// }
//

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

<script>
    const test = {
        a : function (){
            console.log(this)
        },

        b : ()  => {
            console.log(this)
        }
    }

    test.a();
    test.b();
</script>

 - this를 동일하게 호출하였지만, 결과가 다르게 나타납니다.

window객체는 웹브라우저에서 실행하는 자바스크립트의 핵심객체 입니다.

메소드 내부에서 this키워드 사용시 의미가 달라져서 화살표함수를 메소드로 사용하지 않는 편입니다.

 

 - test.a()결과 : 현재 코드에서 test객체를 출력합니다.

 - test.b()결과 : window객체를 출력합니다.

 

♣ 객체의 속성과 메소드 사용하기

 - 기본자료형과 객체 자료형이 서로 될수도 있습니다. 이런경우 prototype 객체를 알아봅니다.

 - 배열도 객체이다.

 - 함수도 객체이다. (속성을 가질수 있습니다)

// 배열도 객체이므로, {} / []을 통해서 동일하게 사용이 가능합니다.
const a = []
a.test = "aaaa";
a.test2 = "aaaa22"


const b = {}
b.test = "bbbb"
b.test2 = "bbbb22"

console.log(a.test)
console.log(a['test2'])
// aaaa
// aaaa22

console.log(b.test)
console.log(b['test2'])
// bbbb
// bbbb22


function c() {
    console.log(this.sample)    // undefined
    console.log(this.sample2)   // undefined
}
c.sample = 10;
c.sample2 = 20;
c()
console.log(c.sample)   // 10
console.log(c.sample2)  // 20

기본자료형에 객체 속소을 주입하면, 오류는 발생하지 않지만, 실제 속성을 가질수는 없습니다.

const a = "a";
let b = "b";
var c = "c";

a.memo = "atest"
b.memo = "btest"
c.memo = "ctest"

console.log(a.memo) // undefined
console.log(b.memo) // undefined
console.log(c.memo) // undefined

 

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

기본자료형을 객체로 선언할수가 있다. 이렇게 구성하면, 실제 속성값을 사용할수가 있다.

new를 통해서 구성한다. 

// new를 사용해서 구성 -> object형태이다.
const a = new Number(10);
let b = new String ("b");
var c = new Boolean(true);

console.log(typeof a)
console.log(typeof b)
console.log(typeof c)

a.memo = "atest"
b.memo = "btest"
c.memo = "ctest"

console.log(a) // [Number: 10] { memo: 'atest' }
console.log(a.memo) // atest
console.log(b.memo) // btest
console.log(c.memo) // ctest

// new를 사용하지 않으면 일반 자료형 변환기능의 역활만 한다.
// 당연히 객체 속성을 추가해서 사용하지 못한다
const a2 = Number(10);    
let b2 = String ("b");      
var c2 = Boolean(true);   

console.log(typeof a2); // number
console.log(typeof b2); //string
console.log(typeof c2); //boolean

 

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

p.262 / 기본자료형의 경우 속성과 메소드를 사용할수 있지만, 속성과 메소드를 추가로 가질수는 없다.

 

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

p. 262

승급때 일시적으로 새 옷 자체를 변경하면 어떻게 될까요?

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

 

어던 객체의 prototype이라는 속성이 바로 "객체 전용 옷"이라고 할수 있습니다.

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

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

 

책에서는 Number예시가 있지만, new Number를 통해서도 사용이 동일한 sample객체 사용이 가능한것을 확인

// prototype 객체 전용옷 사용
Number.prototype.sample = 10;
// number객체 생성
const i = 273
// 위에서 prototype을 통한 객체 입력한 값을 사용 가능
console.log(i.sample)   // 10


var i2 = 100;   // var 형태로 구성해보기
console.log(typeof i2)   // number 타입이 number이면 모두 사용 가능
console.log(i2.sample)   // 10

// new Number로 생성을 하였는데, 정상적으로 사용이 가능함!!
let i3 = new Number("123");
console.log(typeof i3)      // object
console.log(i3.sample)      // 10

// 타입을 String 타입으로 구성해서 사용 가능한지 확인해보기
const s = String("123")
console.log(typeof s)   // string
console.log(s.sample)   // undefined


// new String으로 object만들면 사용가능한지 살펴보기
// 여기서는 사용이 불가능
const s2 = new String("123")
console.log(typeof s2)   // object
console.log(s2.sample)   // undefined

 

this.valueOf / .valueOf으르 사용하는 이유는 "객체 내부에서 값을 꺼내 쓰는 것임을 명확하게 하기 위해서 사용"

// 같은 결과값을 출력합니다
const a = 100;
const b = 200;
const c = "300";

console.log(a)
console.log(a.valueOf())
console.log(b)
console.log(b.valueOf())
console.log(c)
console.log(c.valueOf())

// 100
// 100
// 200
// 200
// 300
// 300

 

Number.prototype.power = function (n = 2) {
    // 해당 예제에서 this는 a객체를 의미합니다.
    // 그래서 a.valueOf의 값을 의미합니다.
    return this.valueOf() ** n
}

const a = 12;
console.log(a.power())  // 기본값 2를 사용한다.
console.log(a.power(3))
console.log(a.power(4))

 

// testMetod를 기본형에서 아무곳이나 사용할수 있게 생성해보자

const a = "가나다라마바사";
const arr = ["가","나","다","라","마","사"]

// indexOf는 String, Array 모두 동일한 방식으로 사용가능합니다.
console.log(a.indexOf("다")) // 2
console.log(arr.indexOf("다")) // 2

// String, Array에서 기본적으로 제공하지 않는 함수를 만들어서 사용해보자
String.prototype.testMethod = function (data) {
    return this.indexOf(data) >= 0
}

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

console.log(a.testMethod("다")) // true
console.log(arr.testMethod("다다")) // false

 

그러면 prototype을 기본형 말고 일반 객체에 생성해보면, 동작이 되는지 확인해보자

일반 객체에 생성을 하면 오류가 발생합니다.

const mainBR = {}

//TypeError: Cannot set properties of undefined (setting 'checkpr')
mainBR.prototype.checkpr = function () {
    console.log("checkpr")
}

mainBR.aa = "100"
mainBR.bb = 200

console.log(mainBR.aa)

 

- 함수에 prototype을 이용해서 사용 할수는 있습니다.

function mainBR() {
    console.log("함수를 객체로")
}

//TypeError: Cannot set properties of undefined (setting 'checkpr')
mainBR.prototype.checkpr = function () {
    console.log("checkpr")
}

mainBR.aa = "100"
mainBR.bb = 200

console.log(mainBR.aa)          // 100
const a = new mainBR(); // 함수를 객체로
console.log(a.checkpr())        // checkpr

 

참고) prototype에 대해서 유전자로 개념을 정리한 내용
https://www.youtube.com/watch?v=wUgmzvExL_E 

 

- Array의 prototype의 constructor안에 선언된 함수들!!

 

 

참고) prototype과 __proto__에 대한 관계 설명
https://www.youtube.com/watch?v=wT1Bl5uV27Y

 

- Number객체 활용

// Number 객체에서 자주 사용하는 메소드
// 1. toFixed
const a = 122345;
a.toFixed(2)    // 122345.00

const b = 122345.948483;
b.toFixed(2)    // 122345.00



// 2. isNaN(), isFinite()
// 숫자 형태인지 체크, 무한값인지 체크

 

- String객체 활용

trim()

split() : 잘라서 배열로 return

 

 

♣ JSON

const data = {
    "이름" : "홍길동",
    "나이" : 100000,
    "특징" : "개발자"
}

console.log(typeof data)    // object

// 객체 -> json
// stringify을 사용
const data_to_json = JSON.stringify(data)
console.log(typeof data_to_json) // string

// json -> 객채
// parse을 사용
const json_to_data = JSON.parse(data_to_json)
console.log(typeof json_to_data) // object

 

♣ Lodash라이브러리
워낙 유명한 라이브러이여서 기본적으로 js 구현시 필요한 유용한 기능들이 많이 제공됩니다.

 

https://lodash.com/

Lodash

https://lodash.com/docs/4.17.15

Lodash Documentation

♣ 기타 유용한 라이브러리

1. 날짜, 시간 관련 
우리는 일반적으로 시간 포맷 yyyy-mm-dd 또는 시간 차이에 대해서 많이 사용합니다.

이러한 부분을 라이브러리를 이용하면 좋습니다.

 - Luxon : https://moment.github.io/luxon/#/

luxon - Immutable date wrapper

 - data-fns : 이것도 책에서 소개

 - 참고 : 다양한 라이브러리 소개 및 의견 https://jamie95.tistory.com/187

[JS] 날짜와 시간을 관리하기 위해 Luxon 라이브러리 사용하기

2. datagrid 화면 구성

- Handsontable : https://handsontable.com/

Handsontable is a JavaScript data grid that looks and feels like a spreadsheet - Available for React, Angular, and Vue

3. 차트 

 - 차트는 워낙 많음 d3.js, chartjs

4. 3d그래픽

 - three.js 

 

♣ 객체와 배열고급

- 객체 속성 여부 체크하는 방법

const sample = {
    "이름" : "길동",
    "나이" : 10000
}


// 방법1) 객체 속성 여부 체크
if(sample.취미 == undefined){
    console.log("취미 없음")
}

// 방법2) 객체 속성 여부 체크
if(!sample.취미) {
    console.log("취미 없음")
}

// 방법3) 객체 속성 여부 체크
sample.취미 || console.log("취미 없음")

 

- 객체에 기본 속성 지정하기

 객체에 취미가 없었는데, 신규로 초기값이 생성되었다.

const sample = {
    "이름" : "길동",
    "나이" : 10000,
}


// 객체 기본 속성을 지정합니다.
sample.취미 = sample.취미 !== undefined ? sample.취미 : "독서"
// 해당 패턴은 속성이 false로 변환될수 있는값이 안들어 오는 경우 전제하에 사용 가능
sample.점심 = sample.점심 || "중국집"


console.log(JSON.stringify(sample, null, 2))


{
  "이름": "길동",
  "나이": 10000,
  "취미": "독서",
  "점심": "중국집"
}

 

 

// 배열기반의 다중 할당
// 배열의 값 항목이 일치하지 않아도 된다.
const [a,b] = [11111,22222,3333,4444,5555]

console.log(a)  // 11111
console.log(b)  // 22222

 

- 더 복잡한 구현에서는 해당 객체기반 다중 할당이 많이 사용된다고 한다

// 겍체기반 다중 할당
const sample = {
    aaa : "길동",
    bbb : 10000,
    "ccc" : "농구",
    "ddd" : "오래된폰"
}

// 객체의 변수를 추출해서 객체를 다시 구성한다.
const {aaa, bbb} = sample;  // 정상동작
// const {"ccc", "ddd"} = sample; // 오류발생,

console.log(sample)
const {a = aaa, b = bbb} = sample;
console.log(a, b)   // 길동 10000
console.log(aaa, bbb)   // 길동 10000

console.log(sample)

♣ 배열전개 연산자

얕은 복사, 깊은 복사에 대한 용어로 정리됩니다.

기존 배열 요소에 영향이 미치는지, 새롭게 복사를 하여서 별도 구성이 되는지 여부가 중요합니다.

 

깊은 복사를 하는 방법에 대해서 알고 있어야 한다.

// 얕은 복사로, 기존 arr에 영향을 줍니다.
const arr = ["1",2,3]
const arr2 = arr

arr2.push(4)
arr2.push(5)
console.log(arr)    // [ '1', 2, 3, 4, 5 ]
console.log(arr2)   // [ '1', 2, 3, 4, 5 ]

// 깊은 복사
// [...배열]
const arr3 = [...arr]
arr3.push(6)
arr3.push(7)
console.log(arr)      // [ '1', 2, 3, 4, 5 ]
console.log(arr2)     // [ '1', 2, 3, 4, 5 ]
console.log(arr3)     // [ '1', 2, 3, 4, 5 , 6, 7]


const arr4 = ["김치", "라면", ...arr3, "물", "콜라"]
console.log(arr4)
// 이렇게 중간에 ... 깊은복사 개념을 넣을수 있다.
    // [
    // '김치', '라면', '1',
    //     2,      3,      4,
    //     5,      6,      7,
    //     '물',   '콜라'
    // ]

 

 

■ 기본미션

상단 설명에 자세히 설명함)

- 객체 : 실제로 존재하는 사물을 프로그램 입장에서 설명하는 이름

- 속성 : "이름"과 "값" 으로 구성된 표현항목

- 메소드 : 속성중에 동작(함수)에 대한 부분

P. 244 그림

 

■ 선택미션

const degree = 90

// PI값을 활용
console.log(Math.PI) //  3.141592653589793
const radian = degree * (Math.PI / 180)
console.log(Math.sin(radian))   // 1