본문 바로가기

반응형

자바스크립트

(96)
[javascript] copyWithin(target, start, [end]) | 같은 배열에서 특정 요소들을 복사하여 배열의 일부에 덮어씌운 새로운 배열을 반환하는 메소드 Array.Prototype.copyWithin(target, start, [end]) 이 메소드는 start 인덱스 부터 end 인덱스-1 까지의 요소를 복사하여 target 인덱스 지점을 기준으로 순차적으로 복사한 값을 덮어 씌운 후 새로운 배열을 반환한다. - end 는 생략이 가능하며, 생략하는 순간 start 인덱스 부터 배열의 마지막 요소 까지 복사한다. - 빈 슬릇이 존재(희소) 하는 경우, 빈 슬릇을 그대로 복사하여 target 인덱스 지점 부터 덮어씌운다. 즉, 희소를 보존한다. 이렇게 보면 바로 이해가 되지 않기 때문에 예시 코드를 살펴보자 const originArray = [1,2,3,4,5] const newArray = originArray.copyWithin(0,1,2); co..
[javascript] reversed, toReversed | 배열의 순서를 뒤짚는 메서드 자바스크립트에는 배열의 순서를 뒤짚는 메소드로 두 가지를 지원한다. reversed 와 toReversed 이다. 이들 각각은 모두 배열의 순서를 뒤짚는 것은 동일하지만, reversed 는 원본 배열을 파괴한다. 그러나 toReversed 는 원본 배열은 그대로 두고, 복사본을 반전시켜 새로운 배열로 반환하는 점에서 차이가 있다. 이를 각각 살펴 보자. Array.Prototype.reversed() 배열 a 가 있을 때, reversed( ) 를 사용하면 원본 배열 자체를 변형시킨 결과를 반환한다( 파괴적 메소드). const a = [1, 2, 3]; console.log(a); // [1, 2, 3] a.reverse(); console.log(a); // [3, 2, 1] reversed 는 희..
[javascript] async ~ await 에 대한 정리 async ~ await 란? async 함수는 항상 Promise를 반환하고, await 키워드는 비동기 작업이 완료될 때까지 기다린다. 특히 AJAX 호출, 파일 읽기/쓰기, 타이머 함수 등과 같이 비동기적으로 처리해야 하는 작업이 있는 경우 유용하게 활용할 수 있다. 다르게 말하면, async 는 비동기를 의미하며, await 은 비동기 처리에 대한 Promise 를 반환받기 전 까지 다음 코드 실행을 대기토록 하는 키워드 이다. 이는 내부적으로 Promise 를 추상화하였기 때문에 promise.then 으로 일일이 접근할 필요 없이 준비된 데이터를 즉시 반환받을 수 있다. promise 는 비동기적 데이터를 가져올 때, 이 데이터를 정상적으로 사용하려면 .then() 메소드에 접근 후 콜백함수의..
[javascript] reduce 메서드의 다양한 활용 reduce 를 활용하면, 정말 복잡한 계산도 편리하게 처리할 수 있다. 오늘은 이 메서드를 이용해서 간단하게 활용할 수 있는 예시를 정리해볼 것이다. 평균 계산 reduce 의 가장 편리한 점 중 하나는 누적값을 반환하는 변수가 내장되어 있다는 점이다. 이를 활용하면 조건에 일치하는 지점에서 평균을 쉽게 구할 수 있다. const numbers = [10, 20, 30, 40, 50]; const average = numbers.reduce((acc, current, index, array) => { acc += current; if (index === array.length - 1) { return acc / array.length; } else { return acc; } }, 0); console..
[JS] 자바스크립트에서 innerHTML 을 사용하지 말라고 하는 이유에 관한 정리 innerHTML 이란? 웹 개발에서 사용되는 JavaScript의 속성 중 하나로, 해당 요소의 내부 HTML 콘텐츠를 변경하거나 삽입하는 데 사용된다. 바닐라 자바스크립트에서 innerHTML 을 사용하면 다음과 같은 형태가 된다. const H1 = document.querySelector('h1') H1.innerHTML ="안녕하세요!" 사실 이 자체만 본다면, 간편하게 HTML 요소를 브라우저에 표시할 수 있으니까 문제가 없어 보인다. 그럼 왜 문제가 된다는 걸까? 사용하지 말아야 하는 이유 보안 취약점 innerHTML을 사용하면 사용자가 입력한 데이터를 직접 HTML에 삽입할 수 있다. 이렇게 하면 크로스 사이트 스크립팅 (XSS) 공격과 같은 보안 취약점이 발생할 수 있다. 악의적인 사용..
[JS] Map 에 대한 정리 Map 키와 값을 매핑하는 자료 구조로, ECMAScript 6 (ES6)부터 도입되었다. Map을 사용하면 데이터를 효과적으로 저장하고 검색할 수 있다. 다음과 같이 new 키워드를 사용해지만 생성할 수 있다. 만일 new 를 사용하지 않으면 typeerror 가 뜬다. const examMap = new Map(); Map 의 특징 - 키와 값을 매핑하는 자료 구조로, 키와 값 모두 다양한 데이터 유형을 가질 수 있다. - 키는 중복될 수 없다. 만일 중복된 키를 넣으려고 하면 마지막에 추가한 키의 값으로 업데이트 된다. - 원소를 추가한 순서대로 순서를 보존한다. - Map은 반복 가능한(iterable) 객체로, for...of 루프 등을 사용하여 순회할 수 있다. 이 때 오해하면 안 되는 점은 ..
[JS] 자바스크립트의 렌더링 블록과 방지방법에 대한 정리(defer 와 async) 렌더링 블록 렌더링 블록이란 이름 그대로 브라우저의 렌더링을 막는다는 의미이다. 즉, 브라우저가 HTML 를 렌더링하는 것을 막는 것을 뜻하는데, 이러한 현상은 HTML을 파싱하는 도중 자바스크립트(스크립트 코드)나 CSS 가 존재하는 경우 발생하게 된다. 블록 리소스 앞서 렌더링 블록이 브라우저의 렌더링을 막는 것이라 했는데, 여기서 렌더링을 막는 장애물을 블록 리소스라고 한다. 블록 리소스는 앞서 자바스크립트 코드나 CSS 가 해당된다. 자바스크립트의 렌더링 블록 렌더링 블록이 발생하는 이유 중 스크립트 태그로 인한 것이 있다. 보통 HTML 파싱 중에 스크립트를 만나게 되면 해당 스크립트를 파싱하기 위해 HTML 파싱은 잠시동안 중지되게 된다. 이로 인해 사용자는 로딩중인 빈화면을 오랫동안 보게 되..
[js] 클로저에 대한 정리 클로저에 대한 정의 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 여기서 어휘적 환경은 Lexical Environment 을 의미하며, 렉시컬 환경은 해당 범위에서 선언된 변수 및 함수 등의 정보를 저장하고 관리하는 자료구조이다. 여기서 왜 함수와 함수가 선언된 어휘적 환경의 조합이 클로저인가에 대해 생각해보기 전에 클로저 자체는 그리 특별한 현상은 아니라는 점 부터 알고 넘어가야 할듯하다. 클로저는 함수가 생성될 때 해당 함수가 정의된 렉시컬 환경에서 선언되어 있는 변수나 함수를 참조하는 현상을 의미한다. 즉, 함수가 생성되면 자동으로 발생하는 현상이 클로저 라는 소리이다. 그런데 이러한 클로저는 개념적으로 사용하는 경우와 실제 이 개념을 활용할 때 언급하는 클로저는 의미는 같지만, 목적은 ..

반응형