JavaScript 코드로 html 생성 / forEach, for in 반복문 / arrow function

javascript 코드로 html 생성

- 생성하는 법 1

<div id="test">
  
</div>

<script>
  var a = document.createElement('p');
  a.innerHTML = '안녕';
  document.querySelector('#test').appendChild(a);
</script>

1. document.createElement() 쓰면 html 자료를 하나 생성해준다.
2. innerHTML 을 이용하여 코드를 넣어준다.
3. appendChild() 을 넣으면 html이 생성된다.

---

- 생성하는 법 2

<div id="test">
  
</div>

<script>
  var a = '<p>안녕</p>';
  document.querySelector('#test').insertAdjacentHTML('beforeend', a);
</script>

1. 문자자료로 html을 생성
2. insertAdjacentHTML() 안에 넣으면 된다.
3. 'beforeend' 이건 안쪽 맨 밑에 추가하라는 뜻 (필수는 아님)

---

- 생성하는 법 3

<div id="test">
  
</div>

<script>
  var a = '<p>안녕</p>';
  document.querySelector('#test').append(a);
</script>

1. append는 안쪽 맨 밑에 추가하라는 뜻

forEach 반복문 (Array)

var pants = [28, 30, 32];

pants.forEach(function(a){ // pants 라는 변수에 array 갯수만큼 안에 코드를 실행
    console.log(a) // a는 array 에 들어있는 변수를 추출
});

for in 반복문 (Object)

var obj = { name : 'kim', age : 20 }

for (var key in obj){
  console.log(key)
}

for in 반복문 쓰면 object 자료 안에 있는 key 와 value 를 다 출력해볼 수도 있다.
key 라고 작명하는 부분은 반복문이 돌 때 마다 object 자료 안에 있던 key 값이 된다.

---

var obj = { name : 'kim', age : 20 }

for (var key in obj){
  console.log(obj[key])
}

key 값이 아닌 실제 object 변수의 value 값을 출력하고 싶다면

console.log(obj[key])

해당 코드를 출력하면 된다.

arrow function

• 기존 function

function(){};

• arrow funtion

() => {};

• 차이점

1. 기존 function 함수는 함수 안에서 this를 알맞게 재정의 해준다.

2. arrow function은 함수 안에서 this를 재정의해주지 않고 바깥에 있던 this를 그대로 쓴다.

이벤트리스너 콜백함수안에서 this를 써야하면 arrow function 쓰면 의도와 다르게 동작할 수도 있다.