WEB2 - JavaScript 30 (객체, object)

2021. 9. 28. 23:48·youtube.com|user|egoing2/WEB2 - JavaScript
728x90

객체 쓰기와 읽기

잠깐 복습을 해보면 배열은 정보를 담는 그릇이면서 동시에 정보가 순서대로 저장된다는 특징이 있다.

그렇다면 순서 없이 정보를 저장할 수 있는 것이 있지 않을까?

그게 바로 객체이다. 

그렇다고 데이터를 무작위로 넣는 것이 아니다. 

객체는 이름이 있는 정리정돈 상자라고 생각하면 되겠다. 

 

Tip. 배열은 [대괄호], 객체는 {중괄호}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>object</h1>
    <h2>Create</h2>
    <script>
      var coworkers = {
        "beginner":"livebyfaith117"
        "programmer":"egoing"
      };
    </script>
  </body>
</html>

coworkers 라는 객체에 livebyfaith117 라는 정보를 beginner 라는 딱지를 붙여서 저장한 것이고,

egoing 이라는 정보를 programmer 라는 딱지를 붙여서 저장한 것이다. 


반대로 꺼내올때는 어떻게 할까? 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>object</h1>
    <h2>Create</h2>
    <script>
      var coworkers = {
        "beginner":"livebyfaith117"
        "programmer":"egoing"
      };
      document.write("beginner:"+coworkers.beginner);
    </script>
  </body>
</html>

document.write("beginner:"+coworkers.beginner); 에서 

coworkers 와 beginner 사이에 있는 점은 object access operator 라고 불린다.

즉 앞에 있는 객체 coworkers 에 접근하는 오퍼레이터.


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>object</h1>
    <h2>Create</h2>
    <script>
      var coworkers = {
        "beginner":"livebyfaith117",
        "programmer":"egoing"
      };
      document.write("beginner:"+coworkers.beginner+"<br>");
      document.write("programmer:"+coworkers.programmer);
    </script>
  </body>
</html>

지금 객체를 만드는 방법과 만들어져 있는 객체에서 데이터를 가져오는 방법을 살펴봤다. 


이미 객체가 만들어진 다음에 정보를 추가하고 싶다면 어떻게 하면 될까?

coworkers 라는 변수에 .점을 찍고 

coworkers.bookkeeper="duru";
document.write("bookkeeper:"+coworkers.bookkeeper);

또 data scientist 를 추가하고 싶다.

여기서 data 와 scientist 사이에 띄어쓰기가 들어간다. 이러면 문법적으로 오류이다. 어떻게 해결할까? 
배열에서 어떤 정보를 가져올 때 [대괄호]를 쓴다. 이것을 사용한다.

coworkers["data scientist"]="taeho";
document.write("data scientist:"+coworkers["data scientist"]);

  • ex10.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>object</h1>
    <h2>Create</h2>
    <script>
      var coworkers = {
        "beginner":"livebyfaith117",
        "programmer":"egoing"
      };
      document.write("beginner:"+coworkers.beginner+"<br>");
      document.write("programmer:"+coworkers.programmer+"<br>");
      coworkers.bookkeeper="duru";
      document.write("bookkeeper:"+coworkers.bookkeeper+"<br>");
      coworkers["data scientist"]="taeho";
      document.write("data scientist:"+coworkers["data scientist"]);
    </script>
  </body>
</html>

이렇게 객체 생성법, 객체의 데이터를 가져오는 법, 데이터를 넣는 법까지 살펴봤다.

저작자표시 (새창열림)

'youtube.com|user|egoing2 > WEB2 - JavaScript' 카테고리의 다른 글

WEB2 - JavaScript 32 (객체프로퍼티와 메소드)  (0) 2021.09.29
WEB2 - JavaScript 31 (객체와 반복문)  (0) 2021.09.29
WEB2 - JavaScript 29 (객체 'object' 의 예고)  (0) 2021.09.27
WEB2 - JavaScript 28 (함수의 활용)  (6) 2021.09.24
WEB2 - JavaScript 24 to 27 (함수, function)  (4) 2021.09.23
'youtube.com|user|egoing2/WEB2 - JavaScript' 카테고리의 다른 글
  • WEB2 - JavaScript 32 (객체프로퍼티와 메소드)
  • WEB2 - JavaScript 31 (객체와 반복문)
  • WEB2 - JavaScript 29 (객체 'object' 의 예고)
  • WEB2 - JavaScript 28 (함수의 활용)
ro117youshin
ro117youshin
코딩 / 외국어공부 (영어, 중국어) / 독서 등 자기계발을 기록합니다.
  • ro117youshin
    Taking an extra step
    ro117youshin
  • 전체
    오늘
    어제
    • 분류 전체보기 (153)
      • DDD (5)
      • JAVA (13)
      • Spring Boot (2)
      • Spring (4)
      • MySQL (1)
      • C (1)
      • Algorithm & Data Structure (34)
        • study (15)
        • programmers (0)
        • boj (18)
        • assignments (1)
      • CS: Computer Science (6)
        • CS50 2019 (4)
        • Network (2)
        • Database (0)
      • Git (3)
      • foreign language (16)
        • English (0)
        • Chinese (16)
      • BOOK (2)
      • ETC (2)
      • youtube.com|user|egoing2 (64)
        • WEB1 - HTML & Internet (5)
        • WEB2 - CSS (9)
        • WEB2 - JavaScript (18)
        • JavaScript Immutability (0)
        • DATABASE1 (4)
        • DATABASE2 MySQL (12)
        • JAVA1 (16)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
    • 글쓰기
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    나의 앱 만들기
    ddd
    HTML
    javascript
    Java자료구조
    Java
    백준
    mysql
    최범균
    자바
    코딩공부
    HSK6급필수어휘
    JAVA1
    객체
    Domain Driven Design
    variable
    개발공부
    조건문
    생활코딩
    HSK6급모의고사
    HSK6급공부
    중국어공부
    도메인 주도 설계
    알고리즘문제
    DATABASE2
    HSK6급
    css
    BOJ
    baekjoon
    js
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
ro117youshin
WEB2 - JavaScript 30 (객체, object)
상단으로

티스토리툴바