객체와 순환문의 조합 for-in

먼저 배열을 복습

배열 만드는 법

const Supercell = [ '클래시오브클랜', '브롤스타즈', '클래시로얄' ];

대괄호 사용, 값들이 순서대로 저장되어 있음, 값들을 index라고 함

배열도 객체이다

객체만드는 법

const Supercell = {
"company": "게임사",
"game": "클래시오브클랜",
"2019히트작": "브롤스타즈";
};

중괄호 사용, 순서를 보장하지 않음

프로퍼티 키(이름)와 프로퍼티 값으로 구성

객체 다루어 보기

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style></style>
</head>
<body>
  <h1>객체를 만들고 값 추가 해보기</h1>
  <h2>1. 객체 생성<h2>
  <script>
const mobile = {
  "samsung": "galaxy",
  "apple": "iphone",
  "google": "nexus"
};
 </script>
 <h2>2. 객체 출력 그리고 추가</h2>
  <script>
  document.write(mobile.samsung+'<br>')
  document.write(mobile.apple+'<br>');
  document.write(mobile.google+'<br>'+'======'+'<br>');
  //blackberry를 추가합니다 이름이 띄어쓰기가 있다면 대괄호 []를 사용합니다
  mobile["black berry"] = "blackberry";
  document.write(mobile["black berry"]+'<br>');
  //xperia를 추가합니다 위 코드와의 차이점에 주목하세요
  mobile.sony = "xperia";
  document.write(mobile.sony);
  </script>
</body> 
</html>

객체를 순환문으로 출력해보자

<h1>for in</h1>
<script>
  const month = {
    "첫번째": "1월",
    "두번째": "2월",
    "세번째": "3월",
    "네번째": "4월"
  }
  </script>
<h2>
  객체의 프로퍼티 key를 출력
</h2>
  <script>
  for(let key in month) {
    document.write(key+'<br>');
  }
</script>
<h2>
  객체의 프로퍼티 값을 출력
</h2>
  <script>
    for(let key in month){
    document.write(month[key]+'<br>');
    }
  </script>
<h2>
  객체의 key와 값을 함께 출력
</h2>
<script>
  for(let key in month){
  document.write(key+'는'+month[key]+'<br>')
  }
</script>

배열(array)에 for in을 사용할 경우, 배열의 요소만 순회하지 않는 문제점이 있다. 그래서 객체(object)에만 for in을 사용했다.

ES6에서 for-of 문이 도입하여 문제를 해결했다.

객체(object) 프로퍼티를 순회 for-in쓰자

배열(array) 요소를 순회 for-of쓰자

꼭 읽을것

poiemaweb 객체 프로퍼티 접근 for-in 부분 참고할것

Last updated