[JavaScript] 자바스크립트 객체 활용법

728x90

SMALL

1. 객체에 접근하기

Object 클래스는 JavaScript의 데이터 유형 중 하나
JavaScript의 거의 모든 객체는 Object의 인스턴스

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>객체 활용법</title>
</head>
<body>
    <h2>객체 활용법</h2>
    <script>
        let dog = {
            name:'루시',
            age:14,
            'dog-weight':3.5,  // 특수문자가 포함된 key값 정의
            'dog-height':0.8
        }
        console.log(dog.name)
        console.log(dog['age'])

        dog.family ='포메라니안'
        console.log(dog.family)
        console.log(dog['family'])
        
        delete dog['dog-height']
        console.log(dog['dog-height']) //undefined
     </script>
</body>
</html>

1-1. 동적으로 객체 속성에 접근하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>객체 활용법</title>
</head>
<body>
    <h2>객체 활용법</h2>
    <script>    
    	let dog = {
            name:'루시',
            age:14,
            'dog-weight':3.5,  // 특수문자가 포함된 key값 정의
            'dog-height':0.8
        }
        
        function getValue(obj, key){
            //dog.name
            return obj[key] // obj의 value값을 리턴
        }
        console.log(getValue(dog, 'name'))
        console.log(getValue(dog, 'age'))

        function add_key(obj, key, value){
            obj[key] = value
        }

        add_key(dog, 'dog-height', 0.8 )
        console.log(dog)

        function deleteKey(obj, key){
            delete obj[key]
        }
        deleteKey(dog, 'dog-height')
        console.log(dog)


    </script>
</body>
</html>

1-2. 객체 생성 함수 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>객체 활용법</title>
</head>
<body>
    <h2>객체 활용법</h2>
    <script>
        function makeObj(name, age){
            return {name, age}
        }
        console.log(makeObj('apple',20))  // name, age key에 대한 각각의 value값
        console.log('-----------')

        const apple = {
            name:'apple',
            display: function(){
                console.log(`${this.name}:🍎`)
            }
        }

        const orange = {
            name:'orange',
            display: function(){
                console.log(`${this.name}:🍊`)
            }
        }
        console.log(apple)
        apple.display()
        console.log(orange)
        orange.display()

       
    </script>
</body>
</html>

✅Fruit 생성자를 만들고 위와 같은 결과를 동일하게 출력할 수 있게 객체를 만들어 출력해보자.

(단, Fruit(name, emoji) 형태로 만듦)

function Fruit(name, emoji){
    this.name=name
    this.emoji=emoji
    this.display = () => {
        console.log(`${this.name}: ${this.emoji}`)
    }
}
const lemon = new Fruit('lemon', '🍋')
const peach = new Fruit('peach', '🍑')

console.log(lemon)
lemon.display()
console.log(peach)
peach.display()

728x90

LIST

'Web > JavaScript' 카테고리의 다른 글

[JavaScript] URL & URI - 정의, 차이점, URL의 이스케이프 처리와 디코딩 (0)	2023.04.19
[JavaScript] wrapper class (0)	2023.04.19
[JavaScript] 자바스크립트의 함수 메모리 할당 & 함수 작성 팁 (0)	2023.04.14
[JavaScript] 정규 표현식으로 특정 패턴의 문자열 생성하기! (0)	2023.04.12
[JavaScript] 노드(node)란? & 노드 종류와 관계, 노드 생성/추가/제거/복제하기! (0)	2023.04.12