자바스크립트 객체와 배열 고급

자바스크립트 객체와 배열 고급

 

📌 속성 존재 여부 확인

객제 내부에 어떤 속성이 있는지 확인하는 것을 의미합니다.

객체에 속성이 접근하면 undefined 자료형이 나옵니다.

따라서 조건문으로 undefined인지 아닌지 확인하면서 속성 존재 여부를 확인할 수 있습니다. 

 

📌 속성 존재여부 확인1

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

 

📌 속성 존재여부 확인2

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

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

 

📌 속성 존재여부 확인3

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

---

📌 기본 속성 지정하기1

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

 

📌 기본속성 지정하기2

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

---

다중할당

배열과 객체 하나로 여러 변수에 값을 할당하는 것을 의미합니다.

 

📌 배열 기반 다중 할당

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

배열의 크기는 같을 필요도 없고 const 키워드를 사용할 수 있습니다.

 

> let arrayA = [1,2,3,4,5]
undefined

> const [a, b, c] = arrayA
undefined

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

---

📌 객체 기반의 다중 할당

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

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

 

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

---

📌 배열 전개 연산자

    <script>
        const 물건_200301 = ['우유', '식빵']
        const 물건_200302 = 물건_200301
        물건_200302.push('고구마')
        물건_200302.push('토마토')

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

배열을 복사해서 다른 이름을 붙였을 뿐, 자료를 저장하는 방식은 같으므로 같은 값이 출력됩니다.

이와 같이 단순하게 다른 이름을 붙이는 형태로 동작하는 복사를 얕은 복사(참조 복사)라고 합니다.

 

 

 

📌 전개연산자

[... 배열]

두 배열을 완전히 독립적으로 작동하기 위해서는 전개 연산자를 사용해야 합니다.

    <script>
        const 물건_200301 = ['우유', '식빵']
        const 물건_200302 = [...물건_200301]
        물건_200302.push('고구마')
        물건_200302.push('토마토')

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

 

이와 같이 복사 후, 두 객체를 완전하게 독립적으로 사용할 수 있는 복사를 깊은 복사라고 합니다.

 

전개연산자를 사용해 배열 요소를 추가할 수도 있습니다.

    <script>
        const 물건_200301 = ['우유', '식빵']
        const 물건_200302 = ['고구마', ...물건_200301, '토마토']

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

---

📌 객체 전개 연산사

배열과 마찬가지로 객체도 독립적으로 복사하고자 할 때 전개 연산자를 사용합니다.

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

        console.log(JSON.stringify(구름))
        console.log(JSON.stringify(별))
    </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>

 

---

📌 popular javascript libraries 2022

1. React JS

• most popular web framework in 2022, with over 40%
• open-source JavaScript library developed by Facebook
• highly responsive user interface
• to create complex UIs in a short time

2. jQuery 

• DOM(Document Object Model)
• open-source JavaScript library

3. Express

• use it with Node.js
• to create efficient web applications
• to create restful APIs to integrate with other apps

4. Angular

• open-source JavaScript library launched by Google
• use it on the frontend or backend to create dynamic Single Page Apps(SPAs) and Progressive Web Apps(PWAs)
• two-way data binding

5.  Vue.js

• open-source JavaScript library
• designed frontend frameworks like Angular and React
• It is a good for beginners

6. Node.js

• create server-side components
• allows app development from both front and back-end

7. Ember.js

• build complex web app on the frontend
• creat web and mobile apps

---

참고한 책 : 혼자 공부하는 자바스크립트