[JavaScript] 객체와 메소드와 반복문

Front-End

[JavaScript] 객체와 메소드와 반복문

SI-AH 2023. 6. 28. 23:13

객체(object):
서로 연관된 함수와 변수를 같은 이름으로 그룹핑해 잘 정리하기 위한 도구
→ 함수 위에 존재

매소드(method):
객체에 속해있는 함수

1. 객체 생성

객체는 { }를 이용해 생성한다

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

      //   이미 존재하는 객체에 정보를 추가할 때
      coworkers.bookkeeper = "duru";
      document.write("bookkeeper : " + coworkers.bookkeeper + "<br>");

      coworkers["data scientist"] = "taeho";
      document.write("data scientist : " + coworkers["data scientist"] + "<br>");
    </script>
  </body>
</html>

정보를 넣을 때, 정보에 대한 이름을 함께 넣어줘야한다.

위 코드에서는 grogrammer과 designer가 정보에 대한 이름이고, egoing과 leezche가 정보이다.

만약 이미 존재하는 객체에 정보를 추가하고 싶을 땐,

객체.정보에 대한 이름 = 정보

와 같은 형태로 작성해주면 되는데,

정보에 대한 이름에 공백이 포함되어 있다면 배열과 같은 형태로 정보를 추가할 수 있다.

2. 반복문

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <h1>Object</h1>
    <script>
      var coworkers = {
        programmer: "egoing",
        designer: "leezche",
      };
      coworkers.bookkeeper = "duru";
      coworkers["data scientist"] = "taeho";
    </script>

    <h2>Iterate</h2>
    <script>
      for (var key in coworkers) {
        document.write(key + " : " + coworkers[key] + "<br>");
      }
    </script>
  </body>
</html>

JavaScript에서의 반복문으로 객체에 있는 모든 key들과 각 key에 해당하는 정보를 한 번에 가져올 수 있다.

3. Property & Method

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <h1>Object</h1>
    <script>
      var coworkers = {
        programmer: "egoing",
        designer: "leezche",
      };
      coworkers.bookkeeper = "duru";
      coworkers["data scientist"] = "taeho";
    </script>

    <h2>Property & Method</h2>
    <script>
      coworkers.showAll = function () {
        for (var key in this) {
          document.write(key + " : " + coworkers[key] + "<br>");
        }
      };
      coworkers.showAll();
    </script>
  </body>
</html>

객체에 소속된 함수를 method 라고 하며, 객체에 소속된 변수는 property라고 한다.

coworkers.showAll 조차도 coworkers에 소속된 데이터이기 때문에 화면에 표시가 된다.

(나중에 if문으로 제외시키고 화면에 표시되도록 할 수 있다.)

반복문을 함수로 만들면서, this를 사용해 coworkers를 나타냈는데,

this로 쓰면 나중에 객체의 이름이 바뀌어도, 이 함수를 사용한 모든 곳을 바꾸지 않고도 사용할 수 있다.