[TIL #8-2 WECODE] 객체의 반복문 작성 / 로그인 구현

210222 WECODE #8-2

객체의 key를 변수로 접근하기

<script>
  const information = {
    name: '김우영'
  }
  const act = 'developes'
  const project = 'facebook'
</script>

• act의 값을 키(key)로 사용해야 하고,
  project의 값을 그 키의 값(value)로 사용한다고 했을때

information[act] = project // [A]
information.developes = 'facebook' // [B]

• A와 같이 변수로 할당이 가능하다.
• B의 방식으로도 가능하지만, 이 경우 key와 value은 해당 고정 값이 되어버린다.
• 하지만 A와 같은 방법은 변수들에 다양한 key와 value값을 선언할 수 있게 된다!

객체의 반복문 작성

• 객체는 length 키가 따로 주어져있지 않고, 인덱스도 없기 때문에 일반적인 반복문은 불가능하다.

1. Object.keys() Object.values() Object.entries()

-객체를 key배열, value배열, 배열로 추출하는 메서드

<script>
  const obj = {
    name: 'peach',
    weight: 300,
    price: 6500,
    isFresh: true
  }
  Object.keys(obj); 
  Object.values(obj); 
  Object.entries(obj);
  
  //['name', 'weight', 'price', 'isFresh']
  //['peach', 300, 6500, true]
  /*[
     ['name', 'peach'],
     ['weight', 30],
     ['price', 6500],
     ['isFresh', true]
    ]*/

    
    const keys = Object.keys(obj);
    for (let i = 0; i < keys.length; i++) {
      const key = keys[i] // 각각의 키
      const value = obj[key] // 각각의 키에 해당하는 value값
      console.log(value) // === Object.values(obj)
    }
     console.log(value) // ReferenceError: value is not defined
</script>

2. for-in문

for-in문은 배열뿐 아니라 객체에서도 작동한다.

getElementsByClassName()[0]의 이유

const thisIsButton = document.getElementsByClassName('login-btn')[0];

• getElementsByClassName은 여러 요소가 담긴 배열이 반환된다.

const thisIsPw = document.getElementById('password');
const thisIsCode = document.getElementById('code');

• 아까 getElementsByClassName 으로 요소를 찾으면 배열이 return 되어서 [0] 으로 접근해야 했는데,
• getElementById는 바로 사용할 수 있습니다.
• (id는 중복이 될 수 없으므로 배열이 return되지 않고 요소가 return되기 때문!)

<script>
thisIsPw.addEventListener('keydown', function(e) {
  if (e.keyCode === 13) {
     //로그인 함수로 이동
  }
});
</script>

• 비밀번호까지 입력하고 엔터를 누르는 기능 구현!