개발나라 스용공주

[생활코딩] JavaScript 왕기초 11장 - Visual Studio Code / 객체 (Object) 본문

WEB/JavaScript

[생활코딩] JavaScript 왕기초 11장 - Visual Studio Code / 객체 (Object)

스용공주 2024. 9. 4. 20:03
728x90
728x90

이번 글은 아래 강의 내용을 바탕으로 작성되었습니다.

(생활코딩)

https://www.youtube.com/watch?v=2j04s1erzTs&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf&index=30

 

 

 

[ 객체란? ]

객체는 함수의 기반 위에 존재하는 개념으로 코드를 정리정돈하는데 사용되는 수단의 일부이다.

코드를 정리정돈하고 중복되는 코드를 묶어 사용하기 위해 함수가 사용되는 것처럼 함수와 그 함수 내 변수들이 증가하게 되면 서로 연관된 함수와 변수를 같은 이름으로 그룹화해주는 것이 '객체'이다.

 

=> ex. 객체의 예시로는 우리가 코드에서 흔히 document.write()를 작성할 때 document가 객체이름이고 write()는 document라는 객체에 속한 함수이다.

이때, 객체에 속한 함수는 메소드라고 부른다.

 

정보를 정리하는 것은 배열과 객체 2가지가 있지만 둘은 차이점이 존재한다.

배열은 순서에 따라 정보를 정리하고 [ ](대괄호)를 사용하고 객체는 순서 없이 정보를 정리하고 { }(중괄호)를 사용한다.

 

 

 

 

 

[ 객체 예제 실습 - 객체 생성하기 ]

아래 코드는 객체를 생성하고 객체의 데이터를 가져오는 코드이다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
    <h1>Object</h1>
    <script>
        var cafe = {
            "coffee" : "americano" ,
            "smoothie" : "blueberry"
        }
        
        document.write("coffee : " + cafe.coffee);
    </script>
</body>
</html>

 

 

아래 부분은 cafe라는 객체를 만드는 것이고 객체가 담고있는 값으로는 coffee라는 키(key)와 americano라는 값(value)로 구성되어져있고 키를 통해 값을 불러올 수 있다.

var cafe = {
     "coffee" : "americano" ,
     "smoothie" : "blueberry"
}

 

 

아래 방법과 같이 cafe.coffee를 쓰면 객체 cafe의 키 coffee를 불러온다는 말이다.

document.write("coffee : " + cafe.coffee);

 

 

실행결과는 아래 사진과 같이 객체 cafe의 키 중 coffee의 값인 americano를 가져오는 것을 확인할 수 있다.

 

 

 

 

 

 

[ 객체 예제 실습 - 객체에 데이터 추가하기 ]

만약 객체에 데이터를 추가하고 싶다면 아래 코드와 같이 작성해주면 된다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
    <h1>Object</h1>
    <script>
        var cafe = {
            "coffee" : "americano" ,
            "smoothie" : "blueberry"
        }
        document.write("coffee : " + cafe.coffee + "<br>");

        cafe.latte = "chocolate latte";
        document.write("latte : " + cafe.latte);
    </script>
</body>
</html>

 

 

아래 코드와 같이 작성해주면 객체 cafe에 latte라는 키 값을 생성하여 해당 값으로 chocolate latte를 생성한다는 의미이다.

cafe.latte = "chocolate latte";

 

 

실행결과는 아래와 같다.

 

 

만약 키의 이름을 위의 latte처럼 띄어쓰기가 없는 게 아닌 milk latte와 같이 중간에 띄어쓰기가 있는 이름일때 아래 코드와 같이 작성해주면 오류가 나게 된다.

cafe.milk latte = "chocolate latte";

 

 

띄어쓰기가 있는 키 이름을 생성할 경우엔 아래 코드와 같이 작성하는 것을 유의해야한다.

=> 객체명 ["키 이름"] = "값";

cafe.["milk latte"] = "chocolate latte";

 

 

728x90
728x90

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

[생활코딩] JavaScript 왕기초 12장 - Visual Studio Code / 객체 (Object) 데이터 모두 가져오기  (1) 2024.09.10
[생활코딩] JavaScript 왕기초 10장 - Visual Studio Code / 함수의 활용 - 리팩토링에 함수 이용하기  (3) 2024.09.02
[생활코딩] JavaScript 왕기초 9장 - Visual Studio Code / 반복문(loop)과 배열(array) 실습 2 - 동일한 태그를 활용한 반복문  (0) 2024.08.29
[생활코딩] JavaScript 왕기초 8장 - Visual Studio Code / 반복문(loop)과 배열(array)  (0) 2024.08.29
[생활코딩] JavaScript 왕기초 7장 - Visual Studio Code / 리팩토링(refactoring) - 중복 제거  (0) 2024.08.26
'WEB/JavaScript' Related Articles more
Comments