JavaScript(JS로 HTML 생성, forEach와 for in, arrow function)

■ JS로 HTML 생성

document.createElement(), appendChild()

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

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

document.createElement() 로 html 자료를 생성(p 태그)해서 '안녕' 텍스트를 넣습니다.

그리고 appendChild() 로 만들었던 p 태그를 새로운 자식 요소로 추가할 수 있습니다.

 

 

insertAdjacentHTML()

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

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

문자자료로 html 요소를 만든 후에 insertAdjacentHTML() 에 넣으면 요소가 추가가 됩니다.

beforeend는 안쪽 맨 밑에 추가하라는 뜻입니다.

문자자료로 html 요소를 만들 때 백틱기호(`)를 사용하면 엔터키도 쓸 수 있습니다.

 

 

append()

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

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

jQuery 로 쓰면 더 짧게 만들 수 있으며 안쪽 맨 밑에 추가할 수가 있습니다.

 

 

■ forEach와 for in

forEach()

var array = ['가', '나', '다', '라', '마'];

array.forEach(function(element, i) {
  console.log(element, i);
});
// 가 0
// 나 1
// 다 2
// 라 3
// 마 4

forEach()는 array 자료형에서 쓸 수 있는 반복문 함수로 배열수만큼 for 반복문을 실행해줍니다.

forEach() 안의 콜백함수에서 첫 번째 파라미터는 array 안의 데이터가 들어가고,

두 번째 파라미터는 0부터 1씩 증가하는 정수가 됩니다.

 

 

for in()

var person = { name: 'John', age: 30, location: 'korea' };

for (var prop in person) {
  console.log(`${prop}:${person[prop]}`);
}
// prop 으로 key 출력 , person[prop] 으로 value 출력
// name:John
// age:30
// location:korea

for in 반복문은 object 자료형에서 쓸 수 있는 반복문입니다.

prop 자리에는 key가 들어갑니다.

 

 

■ arrow function

arrow function 문법

(parameter1, parameter2, ..., parameterN) => {
  // 함수의 실행 코드
  return expression; // 반환 값
};

Arrow function(화살표 함수)은 함수를 간결하게 정의하는 방법 중 하나입니다.

Arrow function(화살표 함수)는 익명 함수로 사용되며, 함수를 표현하기 위해 function 키워드 대신 화살표(=>)를 사용합니다.

Arrow function(화살표 함수)는 일반 함수에 비해 간결하고 가독성이 좋으나,

주변 범위의 this 값을 상속하기 때문에 메서드, 생성자 함수, arguments 객체 등과 같이 this가 중요한 상황에서는 일반 함수를 사용하는 것이 적절할 수 있습니다.