Topic

자바스크립트

A collection of 197 posts
자바스크립트

[Javascript] ES13 클래스의 스태틱 필드와 메서드, 스테틱 블록의 기초

ES13의 새로운 지시자인 static은 스테틱(정적) 필드(변수, 속성)와 스테틱 메서드를 클래스에 구현해 줍니다. 스테틱으로 선언한 클래스 필드와 메서드는 클래스 객체를 동적으로 생성하지 않아도 접근할 수 있고, 스테틱 메서드로 스테틱 필드의 값을 읽고 쓸 수 있습니다. 스테틱 메서드와 스테틱 필드를 포함해서 선언한 클래스는 전역으로 컨텍스트가 선언되어 유지됩니다. 따라서 다른
5 min read
자바스크립트

[Javascript] 심볼(Symbol) 사용 기초

심볼(Symbol)은 ES6에서 추가된 데이터 타입입니다. 문자열 값을 기초로 유일한 식별자를 생성하고 싶을 때 심볼을 사용합니다. 사용 빈도가 높지는 않지만, 용도에 맞게 사용하면 강력한 효과를 발휘합니다. 셋(Set)과 유사한 특징들을 여러 가지 가지고 있습니다.   1. 심볼의 생성 심볼은 다음과 같이 생성합니다. 반환받은 값은 유니크한 식별자 값입니다. 물론 식별할
6 min read
자바스크립트

[Javascript] 객체 배열을 다루는 메서드와 처리 기법

다음과 같은 객체 배열에서 원하는 결과를 얻는 다양한 기법을 알아보겠습니다. 객체 배열은 배열의 각 요소가 객체로 이루어진 배열을 말합니다. 프리미티브 데이터 타입이 아니기 때문에 사용할 수 있는 배열 메서드들 중에서 함수를 인자로 넘겨서 배열의 각 요소에 해당하는 객체의 속성에 접근해 처리를 할 수 있는 메서드를 사용해야 합니다. const products = [ { name:
3 min read
자바스크립트

[Javascript] 아주 큰 정수를 표현하는 BigInt 데이터 타입의 기초

자바스크립트의 단점 중 하나인 아주 큰 정수 값을 표현할 수 없는 한계점을 해결해 주는 새로운 숫자 타입입니다. Number와 구분되는 프리미티브 숫자 타입으로, 그동안 자바스크립트에서는 표현할 수 없었던 아주 큰 숫자를 표시하고, 연산할 수 있습니다. Number 타입과 구분하기 위해 숫자 끝에 "n"을 붙여서 BigInt 숫자임을 표시해서 구분합니다. 나머지 사용법은 Number와
5 min read
자바스크립트

[Javascript] ES13 클래스(Class)의 보안성을 높여주는 프라이빗 지시자 "#" 과 스테틱(static) 지시자 기초

1. 클래스 프라이빗 지시자 # 자바스크립트의 클래스는 클래스(Class) 객체의 모습을 하고 있지만, 다른 언어의 클래스에 비해 많이 부족합니다. 가장 큰 단점은 클래스 객체 안의 모든 속성과 메서드가 퍼블릭이어서 객체 외부에서 모든 속성가 메서드에 제한 없이 접근이 가능합니다. 보안성이 없다 보니, 사이드 이펙트가 발생하기도 하고, 게터/세터(get/set) 같은 속성
5 min read
자바스크립트

[Javascript] 배열을 검색해서 원하는 요소를 찾는 방법 총정리

1. indexOf 배열을 검색한다고 하면 90%는 이 함수로 배열에서 원하는 요소의 위치를 찾는 것입니다. 대체로는 단일 데이터 타입으로 된 배열에서 원하는 요소를 빠르게 찾는 단순한 검색에 사용됩니다. const array=['라이언','어피치','24','콘','프로도',24,'무지',undefined,null,24]; console.log(array.indexOf('콘'));//3 console.log(array.indexOf(
3 min read
자바스크립트

[Javascript] 중첩 배열을 1차원 배열로 바꾸는 더 나은 방법들

자바스크립트는 다차원 배열이 없기 때문에 배열을 중첩해서 다차원 배열을 표현해야 합니다. 경우에 따라서는 중첩 배열을 중첩되지 않은 1차원 배열로 재 가공을 해야 할 필요가 있는데, 이때 우리가 일반적으로 사용하는 방법이 다음처럼 함수를 사용해서 배열 요소들을 순차적으로 합쳐나가는 방식입니다. 배열의 내장 함수가 2개 등장합니다. reduce() reduce() 함수의 첫 번째 인자로 누적
4 min read
자바스크립트

[Javascript] 배열을 이용한 카드 섞기(Card Shuffle) 구현 알고리즘 기초

카드 섞기는 랜덤 함수로 랜덤 값을 발생시켜서 랜덤 값을 공통적으로 사용합니다. 랜덤 값을 어떻게 사용하는지에 따라 구현 방식이 달라진다고 생각하면 됩니다. 예제로 사용하는 카드의 개수는 12장이고 1~12까지의 숫자를 랜덤 하게 섞는 것을 구현하지만, 배열에 들어있는 배열 요소들이 꼭 숫자가 아니어도 되고, 순서를 가지거나 대소를 비교할 수 있는 값이 아니어도
4 min read
자바스크립트

[Javascript] 배열을 다루는 펼침연산자 활용법

1. 배열에서 최대/최소값을 구하기 자바스크립트의 수학 함수중 최소값/최대값을 구하는 min()/max() 메서드는 여러 개의 인자를 받아서 인자로 받은 숫자들 중에서 가장 큰 값을 반환합니다. 펼침 연산자는 배열을 풀어서 여러 개의 인자 값으로 넘기는 기능을 제공합니다. const array = [101,4,23,83,2355,-1,17,0]; console.log(Math.
4 min read
자바스크립트

[Javascript] 화면 갱신을 하거나 웹페이지를 벗어나려고 할 때 알림창을 표시하는 방법 - beforeunload 이벤트 핸들링

자바스크립트의 "beforeunload" 이벤트를 이용하면 방문자가 화면 갱신을 하려고 하거나 현재 페이지에서 벗어나려고 할 때 저장되지 않은 데이터가 있는지 확인하는 알림을 표시할 수 있습니다. 회원 가입 폼을 작성 중이었거나, 장바구니에서 결제를 하던 도중 벗어날 때, 화면 갱신, 또는 페이지를 벗어날 것인지 확인하는 알림 창을 표시해서 실수로 작성 중이던 데이터를 잃어버리는 일이
6 min read