TIL - 220915

22.09.15 목요일

📝 for in()

    const person = {
      name: "Lee",
      address: "seoul"
    };

    for (const key in person) {
      console.log(key); // name, address
      console.log(person[key]) // Lee,seoul
    }

for in 문을 실행하면,
객체의 key와 key값을 모두 받아 올 수 있다.

📝javascript-27 : fon in()문 (객체전용 반복문)

testData라는 객체 리터럴에 여러가지 키(key)들이 정적으로 작성되있다.

const testData = {
  name : "jeongyeonju",
  address : "Daejeon",
  region : "Daedeokgu",
  child : "homil"
}

for(let keyName in testData){
  console.log(keyName);
}
// name, address, region, child

📝javascript-28 : textContent vs innerHTML

차이점 : 문자열 중 태그형태로 된 데이터를 해석(parsing) 하는가 유무
textContent : 문자열 자체로만 해석
innerHTML : 태그의 형태로 보이면, 태그로 해석

🏆 결과값

📝javascript-29 : 동적으로 마크업

📝javascript-30 : '동적 요소' 제어

📝 javascript-31 : 생성자함수(constructor function)

객체를 찍어내듯 만들어주는 생성자함수

function objectMaker (name, age, address, stack){
  this.name = name;
  this.age = age;
  this.address = address;
  this.stack = stack;
}

const instanceObject = new objectMaker ("홍길동",18,"대전","js");

console.log(instanceObject);
// objectmaker { name: '홍길동', age: 18, address: '대전', stack: 'js' }

this : 만들어'질'객체를 가리킴
name : 만들어'질'객체의 키(key) 프로퍼티가 됨
= : 대입연산자 사용
매개변수 : 매개변수로 나중에 값을 결정함

instanceObject : 새로만들어질 객체의 이름
: 객체를 생성자함수로부터 동적으로 데이터를 생성하였다. --> 해당 상수는 인스턴스를 가리키고 있다.

objectMaker : instance --> 함수의 형태를 하고있지만, 사실상 객체의 데이터를 가지고 있게 됨

출력 --> 생성자 함수에 의해 객체가 만들어진다.