6. 배열, 객체

@객체와 객체 메소드==> 객체(Object)를 사용하여 여러 개의 값을 하나의 변수에 담고 관리할 수 있다.

1. 객체 생성

1-1. 기본적인 객체 생성 : 객체를 만들 때는 중괄호({})를 사용하며, 속성과 값을 콜론(:)으로 구분하여 작성 / 각 속성과 값은 쉼표로 구분

 

1-2. 생성자 함수를 사용한 객체 생성:

function Person(name, age, gender) {
    this.name = name
    this.age = age
    this.gender = gender
}

let person1 = new Person("홍길동", 30, "남자")
let person2 = new Person("홍길순", 20, "여자")

생성자 함수를 사용하면 객체를 일괄적으로 생성할 수 있다.

 

2. 객체 속성 접근

console.log('1', person.name)
console.log('2', person.age)
console.log('3', person.gender)

객체의 속성에 접근할 때는 (.)을 사용하여 속성 이름을 입력한다.

 

3. 객체 메소드

3-1. Object.keys() 메소드: 객체의 속성 이름을 배열로 반환한다.

 

3-2. Object.values() 메소드: 객체의 속성 값들을 배열로 반환한다.

 

3-3. Object.entries() 메소드:  객체의 속성 이름과 속성 값들을 2차원 배열로 반환한다.

 

3-4. Object.assign() 메소드:  기존 객체를 복사하여 새로운 객체를 만든다.

 

3-5. 객체 비교

let person1 = {
     name: "홍길동",
     age: 30,
     gender: "남자"
}
let person2 = {
     name: "홍길동",
     age: 30,
     gender: "남자"
}

console.log("answer => ", person1 === person2) //주소에 저장하는 형태이므로 false 값이 출력된다.
console.log(JSON.stringify(person1) === JSON.stringify(person2))

JSON.stringify() 함수를 사용하여 객체를 문자열로 변환하고 문자열 비교를 할 수 있다.

 

3-6. 객체 병합

let person1 = {
     name: "홍길동",
     age: 30,
}

let person2 = {
     name: "홍길동",
     gender: "남자"
}

// ... : spread operator
let perfectMan = {...person1, ...person2}
console.log(perfectMan)

객체 병합을 할 때는 전개 연산자(...)를 사용한다.

 

@배열과 배열 메소드==> 배열(Array)을 사용하여 여러 개의 값을 저장하고 관리할 수 있다.

1. 배열 생성

1-1. 기본적인 배열 생성: 배열을 만들 때는 대괄호([])를 사용하며, 각 요소는 쉼표(,)로 구분

 

1-2. 배열의 크기 지정: new Array()를 사용하여 배열의 크기를 지정할 수 있다.

 

2. 배열 요소 접근

console.log(fruits[0])
console.log(fruits[1])
console.log(fruits[2])

배열의 요소에 접근할 때는 대괄호 안에 인덱스 값을 넣는다.

 

3. 배열 메소드

3-1. push() 메소드: 배열의 끝에 요소를 추가한다.

 

3-2. pop() 메소드:  배열의 마지막 요소를 삭제

 

3-3. shift() 메소드: 배열의 첫 번째 요소를 삭제

 

3-4. unshift() 메소드: 배열의 첫 번째 요소 앞에 추가 요소를 생성

 

3-5. splice() 메소드: splice(start:number, delete할 개수, 삭제 부분에 넣을 것) / 배열의 요소를 삭제하거나, 새로운 요소를 추가할 수 있다.

 

3-6. slice() 메소드:  배열의 일부분을 새로운 배열로 만든다.

 

3-7. forEach() 메소드:  배열의 각 요소에 대해 콜백 함수를 실행

 

3-8. map() 메소드: 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과를 새로운 배열로 반환

 

3-9. filter() 메소드: 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소만 새로운 배열로 반환

 

3-10. reduce() 메소드

const numbers = [1, 2, 3, 4];

numbers.reduce((누산값, 현재요소값, 현재요소의index, 현재배열) => {
  return 다음누산값;
}, 초기누산값);

 

3-11. find() 메소드: 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 첫 번쨰 요소를 반환

 

3-12. some() 메소드: 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소가 하나라도 있는지 확인

 

3-13. every() 메소드: 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 모든 요소를 확인

 

3-14. sort() 메소드: 배열의 요소를 정렬한다.

 

3-15. reverse() 메소드: 배열의 요소를 역순으로 정렬한다.

---

확인 문제 풀이

@ 4-1 배열

 

1. 배열들의 2번째 인덱스에 있는 값을 찾기

① ["1", "2", "3", "4"]  --> ["3"]

② ["사과", "배", "바나나", "귤", "감"] --> ["바나나"]

③ [52 ,273, 32, 103, 57] --> [32]

 

2. 코드의 실행 결과를 예측하기

<script>
        const array = [1, 2, 3, 4]

        console.log(array.length)
        console.log(array.push(5))
    </script>

    4            // array의 length는 4이다

    5            // array에 push 메소드를 통해 배열 끝에 5를 추가한다.

 

3. 표시된 함수들이 파괴적 처리를 하는지 비파괴적 처리를 하는지 구분해 맞는 것에 0표시하기

 

파괴적 처리는 배열의 내용이 바뀐 것을 의미 비파괴적 처리는 배열의 성분이 변경, 추가 또는 삭제가 안된 배열상태를 의미

① 비파괴적 처리

② 파괴적 처리

③ 비파괴적 처리

④ 비파괴적 처리

@ 6-1 객체의 기본

1. 대상을 자바스크립트 객체로 선언하기

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

 

2. 객체에 동적으로 속성을 추가하는 문법

③ 객체[속성] = 값

 

3. 객체에 동적으로 속성을 제거하는 문법

① delete 객체[속성]

 

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에 동그라미 표시

결과: 빵는 스페인어로 pan입니다

 

@ 6-2 객체의 속성과 메소드 사용하기

1. 코드의 실행 결과를 예측하기, 예측과 다른 결과가 나온다면 왜 그런지 생각해보기

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

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

콘솔에 오류메시지가 뜬다. num은 기본자료형이다. 따라서 메소드가 추가되지 않을 것이다. 

==> Uncaught TypeError: num.원 is not a function

 

2. 코드의 실행 결과를 예측하기

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

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

printLang("ko"): 한국어
ex01.html:25 printLang("en"): 영어

 

3. 모질라 문서에서 Math 객체와 관련된 내용을 읽고 사인 90도의 값을 구하기. 사인 90도는 1이다. 단순하게 생각해서 구현하면 0.8939966636005579라는 결과가 나온다. 이 값이 왜 나오는지 이를 어떻게 해야 제대로 사용할 수 있는지 구글 검색 등을 활용해서 알아보고 코드를 수정하기

<script>
        const degree = 90

        console.log(Math.sin(degree))
    </script>

위에 코드를 이용하여 나온 결과 값은 0.8939966636005579이다. 이는 계산시 기본적으로 Math.sin()은 라디안을 이용하여 계산하기 때문이다. 라디안이란 반지름의 값과 호의 길이가 같을 때 중심각의 크기를 측정한 값이다. 따라서 우리가 원하는 값을 표현하기 위해선 90도를 90라디안으로 변경해줘야 한다. 원의 지름과 둘레의 비율을 이용해야하므로 Math.PI 사용한다.

라디안 = (원하는 각도)*Math.PI/180

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

계산하면 1이 출력된다.

 

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

 ② prototype - prototype 객체에 속성과 메소드를 추가하면 모든 객체에서 해당 속성과 메소드를 사용할 수 있다.

 

5. _.orderBy() 메소드도 한번 살펴보고 어떤 형태로 사용해야 하는지 직접 예제를 작성하기. 그리고 다음과 같은 배열을 이름(name)으로 오름차순 정렬하기

 

 _.orderBy() 메소드는 배열을 오름차순으로 정리 후에 다시 다음 부분에서 내림차순으로 순서를 지정한다.

_.orderBy(collection, [iteratees=[_.identity]], [orders])

<script>
        const people = [{
            name: 'John',
            age: 30,
            job: '한의사'
        }, {
            name: 'Michael',
            age: 21,
            job: '축구선수'
        }, {
            name: 'John',
            age: 29,
            job: '수영선수'
        }, {
            name: 'Michael',
            age: 38,
            job: '요리사'
        }]

        const output = _.orderBy(people, ['name','age'], ['asc','desc'])
        console.log(JSON.stringify(output, null, 2))
    </script>

속성이 겹치는 부분이 있을 때 정렬하는데 유용한 메소드로 보인다.

 

 - 문제 코드

<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: '위키북스'
        }]

        const output = _.sortBy(books, (book) => book.name)
        console.log(JSON.stringify(output, null, 2))

 - 결과 값

[
  {
    "name": "HTML5 웹 프로그래밍 입문",
    "price": 26000,
    "publisher": "한빛아카데미"
  },
  {
    "name": "딥러닝을 위한 수학",
    "price": 25000,
    "publisher": "위키북스"
  },
  {
    "name": "머신러닝 딥러닝 실전 개발 입문",
    "price": 30000,
    "publisher": "위키북스"
  },
  {
    "name": "혼자 공부하는 파이썬",
    "price": 18000,
    "publisher": "한빛미디어"
  }
]

 

@ 6-3 객체와 배열 고급

1. 전개 연산자의 형태로 올바른 것을 고르기

 ② ...

 

2. 구글에 'popular javascript libraries 2020' 검색해서 자바스크립트 라이브러리를 살펴보기

 

① jQuery - 브라우저에서 작동하는 사용하기 쉬운 API를 사용하여 HTML 문서 순회 및 조작, 이벤트 처리, 애니메이션 및 Ajax와 같은 작업을 훨씬 더 간단하게 만든다. 

 

② React.js - 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여준다. 선언형 뷰는 코드를 예측 가능하고 더버그하기 쉽게 만들어 준다. Front-end 개발자들이 주로 사용하고 있는 라이브러리다.

 

③ Express - 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 견결하고 유연한 Node.js 웹 애플리케이션 프레임워크이다.

 

④ Angular.js - HTML은 정적 문서를 선언하는 데 적합하지만 웹 애플리케이션에서 동적 보기를 선언하는 데 HTML을 사용하려고 하면 쉽지 않다. Angular JS를 사용하면 애플리케이션의 HTML 어휘를 확장할 수 있다. 결과적으로 풍부하고 읽기 쉬우며 빠르게 개발할 수 있게 도와준다.

 

⑤ Lodasg - 데이터의 필수적인 구조를 쉽게 다룰 수 있게 도움을 준다. 코드를 줄여주고, 빠른 작업에 도움이 된다.

 

⑥ D3.js -  데이터를 기반으로 문서를 조작하기 윈한 JavaScrip 라이브러리이다. HTML, SVG, 및 CSS를 사용하여 데이터에 생명을 넣을 수 있게 도와준다. 프레임워크에 얽매이지 않고 최신 브라우저의 모든 기능을 지공한다.

 

⑦ Flask - 간단한 웹사이트, 간단한 API 서버를 만드는데 특화 되어있다.