What배열을 선언하는 방법에는 여러 가지가 있다. const arr = [1, 2, 3] 처럼 변수에 배열을 담는 가장 일반적인 방식도 있고, Array(1, 2, 3) 처럼 생성자를 이용해서 배열을 생성하는 방식도 있다.* Array(10)처럼 인자에 한 개만 넣을 경우에는 배열의 length를 의미하고, Array(1, 2, 3)처럼 두 개 이상일 경우 배열의 값을 의미한다. Array.from()은 어떤 특정한 규칙을 갖는 값을 배열로 선언할 때 혹은 유사 배열 객체나 이터러블 객체를 새로운 배열로 선언하고자 할 때 사용한다. 또한, 문자를 한 글자씩 배열로 만들고자 할 때도 유용하게 사용된다. How문자열을 한 글자씩 떼서 배열로 선언하고 싶을 때const str = '안녕하세요';const a..

What Iterator란 반복자라고도 하며 배열과 비슷하지만 배열과 달리 next()라는 메서드를 가지고 있어야 하고, {value, done} 이라는 속성 값을 가지고 있는 객체이다. 본 글에서는 Iterator에 대한 기본 개념 및 자세한 설명보다는 entries()와 같은 메서드로 배열에서 생성된 Iterator 객체를 사용하는 방법에 대해서 간략히 다룰 예정이다. How Array.entries() : Iterator의 [index, value]를 반환 const arr = ['A', 'B', 'C']; const iterator = arr.entries(); for (const x of iterator){ console.log(x); } // Console [0, 'A'] [1, 'B'] [2..

What 자바스크립트를 이용해서 DOM을 제어할 때, 그 DOM의 텍스트 속성으로 자주 사용되는 것들이 있다. HTML 태그까지 모두 가져오는 innerHTML, 태그를 제외하고 오로지 텍스트만 가져오는 innerText, 텍스트 노드를 가져오는 textContent가 바로 이번에 다룰 DOM 텍스트 속성들이다. 각 속성별로 대표적인 특징이 무엇인지, 무슨 차이가 있는지 알아보도록 하자. How innerHTML Hello World! const app = document.getElementById('app'); console.log(app.innerHTML); // Console Hello World! innerHTML은 가장 일반적이고 많이 사용되는 속성 중 하나이다. 사실 텍스트 속성이라고 하기에도..

What 상대 좌표는 현재 우리가 보고 있는 브라우저 창의 크기(뷰포트)를 기준으로 위치를 나타날 때 쓰이고, 절대 좌표는 전체 페이지 내에서 해당 요소가 어디에 위치하였는지를 구할 때 쓰인다. 높이가 10,000px인 페이지가 있다고 할 때, 페이지 중앙에 있는 요소의 상대 좌표와 절대 좌표를 구해본다면 절대 좌표는 5,000px 정도가 나오더라도 상대 좌표는 1px 밖에 안 나올 수도 있는 것이다. How 윈도우 내부 (뷰포트) 크기 구하기 const width = window.innerWidth; // 뷰포트 너비 const height = window.innerHeight; // 뷰포트 높이 브라우저 창을 봤을 때, 상단의 주소창/북마크 바 및 우측의 스크롤바, 브라우저 창을 감싸고 있는 테두리 ..

What 스프레드 연산자란, ES6에서 추가된 '...'와 같은 형태의 문법을 말하는데 객체나 배열, 함수 등에서 값이나 인자를 한꺼번에 집어넣기 위한 역할을 수행하기 위해 태어난 아이라고 생각하면 된다. 말 그대로 펼친다는 의미의 스프레드 연산자를 이용하면 객체나 배열을 더 효율적으로 다룰 수 있다. How 배열에서 사용하는 경우 // 배열과 배열을 더하는 경우 const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [...arr1, ...arr2]; console.log(arr3); // [1, 2, 3, 4, 5, 6] // 기존 배열에 새로운 값을 추가하는 경우 const arr1 = [1, 2, 3, 4]; const arr2 = [...ar..