[JavaScript] Array.from()으로 배열 만들기 (유사 배열 객체)
JavaScript 2022. 12. 18. 20:29

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

[JavaScript] 배열의 Iterator 객체 생성 (Array.entries()...)
JavaScript 2022. 12. 12. 20:00

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..

[JavaScript] 텍스트 속성 innerHTML, innerText, textContent
JavaScript 2022. 12. 4. 16:11

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은 가장 일반적이고 많이 사용되는 속성 중 하나이다. 사실 텍스트 속성이라고 하기에도..

[JavaScript] 엘리먼트 요소의 상대 좌표와 절대 좌표 구하기
JavaScript 2022. 11. 28. 21:05

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

[JavaScript] 스프레드 연산자(Spread Operator)를 쓰는 이유
JavaScript 2022. 11. 23. 21:54

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..