[WEB/JS] 자바스크립트 객체 이해하기(선언, 반복문)

[객체 생성하기]

배열은 정보가 0번째부터 n번째까지 순서대로 저장된다는 특징이 있다.

하지만 객체는 순서에 상관없이 저장되는 특징을 가지고 있다.

 

객체를 생성하는 법은 스크립트 태그 안에서

var 변수명 = { 저장하고 싶은 데이터 };

를 작성해주면 된다.  

조금 더 자세하게 보자면 아래와 같다.

<script>
      var fruit = {
        "yellow": "banana",
        "red": "apple"
      };
</script>

banana라는 정보를 넣는다면 그냥 넣지 말고 yellow라는 이름을 가진 수납상자(?)에 넣는다고 생각하면 편하다.

apple도 마찬가지로 red라는 수납상자에 넣는다고 생각하면 편하다.

---

[꺼내는 법]

저장한 정보를 꺼내는 법은 역시 document.write(); 를 사용한다.

<script>
      var fruit = {
        "yellow": "banana",
        "red": "apple"
      };
      document.write(fruit.yellow + "<br>");
      document.write(fruit.red + "<br>");
</script>

fruit.yellow의 의미는 'fruit 중에서 yellow라는 수납상자에 있는 정보를 꺼내라'라는 의미이다.

fruit.red도 마찬가지로  'fruit 중에서 red라는 수납상자에 있는 정보를 꺼내라'라는 의미이다.

---

[정보 추가하기]

객체를 만든 후에 추가해야될 상황이 있을 수 있다.

이때, 객체를 추가하는 법은 아래와 같다.

fruit.purple = "grapes";

그래서 완성된 코드를 보면

<h1>Create</h1>
    <script>
      var fruit = {
        "yellow": "banana",
        "red": "apple"
      };
      document.write(fruit.yellow + "<br>");
      document.write(fruit.red + "<br>");

      fruit.purple = "grapes";
      document.write(fruit.purple + "<br>");
</script>

만약 kiwi를 추가하고 싶어 수납상자의 이름을 dark brown으로 설정해 작성한다면 오류가 발생할 것이다.

그 이유는 이름 중간에 띄어쓰기가 있기 때문이다.

그렇기 때문에 다른방법으로 객체를 선언 해주어야 한다.

fruit["dark brown"] = "kiwi";
document.write(fruit["dark brown"] + "<br>");

위에와 같이 .을 사용하는 것이 아니라 [ ]를 사용해서 객체를 선언한다.

불러올때도 마찬가지로 [ ]를 통해 불러온다. 

---

[객체를 이용한 반복문]

반복문을 할때 while문과 for문을 사용해 봤는데 

객체에서 반복문을 사용할 때는 for-in을 사용한다.

for-in의 사용 예를 보면 아래와 같다.

<h1>Loop</h1>
    <script>
      for(var key in fruit){
        document.write(key+"<br>");
      }
    </script>

for(var key in fruit)의 의미를 해석해보자면

fruit라는 변수에 키값의 수만큼 반복문이 실행된다는 것이다.

여기서 키값은 yellow, red, purple, dark brown이 된다.

그래서 document.write(key+"<br>");를 실행 시키면

키값들이 출력이 된다.

키값들이 가지고 있는 정보를 출력하기 위해서는 어떻게 해야할까?

<h1>Loop</h1>
    <script>
      for(var key in fruit){
        document.write(fruit[key]+"<br>");
      }
    </script>

위에와 같이 fruit[key]를 해주게 되면 키값이 가지고 있는 정보를  출력할 수 있다.

한 코드로 정리를 하지면 이렇게 된다.

<h1>Loop</h1>
    <script>
      for(var key in fruit){
        document.write(key+" : "+fruit[key]+"<br>");
      }
    </script>

---

참고한 생활코딩 자료

https://opentutorials.org/course/3085/18853

객체 - 생활코딩