객체의 순환

객체의 키를 변수로 접근해보자

const information = {
	name: '김개발'
}

const verb = 'developes';
const project = 'facebook';

information[verb] = project; // [1]
information.developes = 'facebook'; // [2]

위와 같이 객체의 키를 변수로 접근할 수 있다.
1번과 2번 똑같은 방법이지만 차이가 있는데
1번은 변수들 verb와 project가 갖는 값에 따라 다른 키와 다른 값을 가질 수 있지만 2번은 키와 값이 항상 고정된다.

배열은 length와 인덱스로 순회가 가능했는데 객체도 순회가 가능할까?
물론, 객체도 순회가 가능하다
밑의 코드를 살펴보자

conset obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

for (let key in obj) {
	console.log("키: ", key);
    console.log("벨류: ", obj[key]);
}

이렇게 반복문을 돌려서 변수 key는 객체의 키 값이 되고 이를 이용해서 변수값도 구할 수 있다.

이렇게 객체의 키값들만, 벨류값들만 또는 키,벨류 묶어서 추출하는 것도 가능하다.

let keys = Object.keys(obj);
let values = Object.values(obj);
let = entries = Object.entreis(obj);

console.log('키값들: keys');
console.log('벨류값들: values');
console.log('키와벨류쌍: entries');

객체복사

let user = {
  name: "John",
  age: 30
};

let clone = {};


for (let key in user) {
  clone[key] = user[key];
}

console.log(clone);
console.log(user === clone);

false가 뜨는 이유?
객체 자체가 복사된것이 아니라 그 안의 내용이 복사된 것이다.
clone과 user의 객체 주소가 다르므로 false가 뜬다.

DOM과 관련된 함수들

createElement: 태그를 생성한다

• document.createElement('p') // p태그를 생성한다.
  className: 클래스를 붙인다
• document.querySelector('p').className = 'hi' // querySelector로 p태그를 찾은뒤 hi 클래스를 붙인다
  innerHTML: 안에 내용을 집어넣는다.(대소문자 주의!)
• document.querySelector('p').innerHTML = 'hello'
  appendChild: 수정한 요소를 어느 부모 밑에 위치시킬 것인가를 정한다.
• document.body.appendChild(p) // body태그 밑에 수정한 p태그를 위치시킨다.

이벤트

• 특정요소에 interactive한 반응을 할 수 있게끔 도와주는 것. addEventListener 함수를 이용한다.
• 클릭, 마우스, 스크롤, 터치, 리사이즈 등등 다양한 이벤트들이 있다.

요소.addEventListener(이벤트종류, function() {
  //이벤트가 일어났을 때 실행할 내용
});

• 주로 사용되는 이벤트들
  click: 사용자가 클릭했을 때,
  keydown: 사용자가 키를 처음 눌렀을 때
  keyup: 키를 뗄 때
  keypress: 사용자가 눌렀던 키의 문자가 입력되었을 때
  submit: 사용자가 버튼을 눌러 폼으로 정보를 제출할 때