혼공스 Chapter.6

▶요소 : 배열 내부에 있는 값.

▶속성 : 객체 내부에 있는 값.

▶메소드 : 속성 중에 함수 자료형인 것.

▶this 키워드 : 객체 내부의 머소드에서 객체 자신을 나타내는 키워드.

▶동적 속성 추가/제거 : 객체 생성 이후에 속성을 추가하거나 제거하는 것.

 

▶확인 문제

1. 다음과 같은 대상을 자바스크립트 객체로 선언하라. 자료형은 알맞다고 생각하는 것으로 지정하라.

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

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

2. 다음 중 객체에 동적으로 속성을 추가하는 문법은?

1. add 객체[속성] = 값
2. 객체.add('속성',값)
3. 객체[속성] = 값        (O)
4. 객체[속성] add 값

3. 다음 중 객체에 동적으로 속성을 제거하는 문법은?

1. delete 객체[속성]         (O)
2. 객체.delete('속성')
3. delete 객체 from 속성
4. delete 속성 from 객체

4. 다음 코드에 메소드라고 부를 수 있는 속성을 찾고 코드를 실행하라.

<script>
 const object = {
    ko: '빵',
    en: 'bread',
    ja: 'パン',
    fr: 'pain',
    es: 'pan',
    lang: {
        ko: '한국어',
        en: '영어',
        ja: '일본어',
        fr:'프랑스어',
        es: '스페인어'
    },
    print: function (lang) {
        console.log(`${this.ko}는 ${this.lang[lang]}로 ${this[lang]}입니다.`)
    }
 }

 Object.print('es')
</script>

메소드 : print

 

▶ 기본 자료형 : 실체가 있는 것 중에서 객체가 아닌 것. 숫자, 문자열, 불이 대표적인 예이다.

▶ 객체 자료형 : 객체를 기반으로 하는 자료형. new 키워드를 활용하여 생성한다.

▶기본 자료형의 승급 : 기본 자료형이 일시적으로 객체 자료형으로 변화하는 것.

▶prototype 객체 : 객체의 틀을 의미하며 이곳에 속성과 메소드를 추가하면 해당 객체 전체에서 사용할 수 있다.

 

▶확인 문제

1. 다음 코드를 실행하고 오류를 설명하라.

<script>
    const num = 5200
    num.원 = function () {
        return this.valueOf() + '원'
    }

    console.log(num.원())
</script>

Uncaught TypeError: num.원 is not a function >> num은 기본자료형이므로 메소드가 추가되지 않음. 대응되는 객체 자료형의 프로토타입에 메소드를 추가해야함.

2. 다음 코드를 실행하라.

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

    console.lang('printLang("ko"):', printLang('ko'))
    console.lang('printLang("en"):', printLang('en'))
</script>

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

3. 모질라 문서에서 Math 객체와 관련된 내용을 읽고 사인 90도의 값을 구해라. 사인 90도는 1이다.

<script>
    const degree = 90

    const radian = degree * (Math.PI / 180)
    console.log(Math.sin(radian))
   </script>

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

1. classProp
2. prototype
3. sample      (O)
4. frame

5. 다음과 같은 배열을 이름(name)으로 오름차순 정렬하라.

<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: '머신러닝 딥러닝 실전 개발 입문',
 price: 30000,
 publisher: '위키북스'
 }, {
 name: '딥러닝을 위한 수학',
 price: 25000,
 publisher: '위키북스'
 }]
 console.log(_.orderBy(books, (book) => book.name))
</script>

 

▶ 속성 존재 여부 확인 : 객체 내부에 어떤 속성이 있는지 확인하는 것을 의미. 객체에 없는 속성은 접근하면 undefined가 나옴.

▶다중 할당 : 배열과 객체 하나로 여러 변수에 값을 할당하는 것

▶얕은 복사(참조 복사) : 복사하는 행위가 단순하게 다른 이름을 붙이는 형태로 동작하는 복사를 의미.

▶깊은 복사 : 복사 후 두 객체를 완전하게 독립적으로 사용할 수 있는 복사를 의미.

 

▶확인 문제

1. 다음 중 전개 연산자의 형태로 올바른 것은?

1. ~
2. ...     (O)
3. @
4. spread

2. 구글에 "popular javascript libraries 2020"등으로 검색해서 자바스크립트 라이브러리를 둘러보아라.

리액트, 뷰, 제이쿼리, 플라스크, 스프링 등등

---

오늘도 어려웠다 언제는 안어려웠겠냐만은... 그래도 이번에는 웹개발 종합반에서 썼던 것들의 개념을 배우는 느낌이라 받아들이기에 거부감은 없던 것 같다. 이제 코딩테스트를 풀어볼건데 못하면 뭐...울면서 해야지 ^_^....