본문 바로가기
배열의 비교 예시 const arr1 = [1,2,3,4,5]; const arr2 = [2,4,6,8,10]; const arr3 = [1,2,3,4,5]; 1. stringify를 이용한 간단한 배열의 비교 아래와 같이 비교하려는 배열을 JSON.stringify()메서드를 통해 문자열로 변환한 뒤 비교할 수 있다. console.log(JSON.stringify(arr1) === JSON.stringify(arr2));//false console.log(JSON.stringify(arr1) === JSON.stringify(arr3));//true 2. 배열의 교집합 구하기 console.log(arr1.filter(v => arr2.includes(v)));//[2,4] console.log(arr1.filt.. 2022. 6. 25.
static 목차 스태틱이란? 문법 클래스 내에서 static 키워드 사용하기 다른 static 멤버 내에서 static 멤버 호출 non-static 메소드 내에서 static 멤버 호출하기 1. 스태틱이란? static키워드는 클래스 메소드나 클래스 속성을 정의함 스태틱 메소드나 스태티틱 속성은 클래스로 생성된 인스턴스에 의해 호출될 수 없으며, 클래스 그자체에 의해 호출됨 2. 문법 스태틱의 문법은 아래와 같으며 아래의 각각을 static 멤버라고 함 static 메소드명() { } static 속성명 [= 속성값]; // 클래스 static 초기화 코드 블럭 static { } 3. 클래스 내에서 static 키워드 사용하기 class tripler { static name = 'tripler'; static.. 2022. 6. 8.
history 인터페이스 목차 history란? history 객체의 속성(length, state) history 객체의 메서드(back, forward, go, pushState, replaceState) 1. history란? 브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 방법 제공하는 DOM 2. 속성 2-1. History.length 읽기 전용 속성 현재 페이지를 포함한 세션 기록의 길이를 나타내는 정수 반환 가령, 새로운 탭에 막 불러온 페이지의 세션 기록 길이는 1 history.length 2-2. History.state 기록 스택 최상단의(현 history에 위치하는) state를 나타내는 값 반환 pushState() 또는 replaceState()를 사용할 .. 2022. 5. 2.
객체3. class 개념 목차 클래스란? 클래스 정의하기 클래스 body와 method 클래스란? 객체를 생성하는 템플릿 클래스는 데이터와 데이터를 조작하기 위한 코드를 캡슐화 JS에서의 클래스는 프로토타입에 의해 작성되지만, ES5와는 다른 문법과 의미를 가짐 특별한 함수 1. 클래스 정의하기 클래스를 정의하기 위한 두 가지 방법 Class 선언 Class 표현식 1-1. 클래스 선언(class declaration) 클래스명과 함께 class 키워드 사용 class Classmates{ constructor(name,heights,gender,dob){ this.name = name; this.heights = heights; this.gender = gender; this.dob = dob; } } 끌어올리기(hoistin.. 2022. 4. 22.
객체2. this와 생성자(constructor) 목차 this란? 생성자란?(Constructor) 1. this란? 현재 코드가 동작되고 있는 해당 객체를 가리킴 하나 이상의 객체에서 생성된 모든 객체에 대하여 같은 메서드 속성/메서드를 사용할 수 있게 해줌 (단, 각각의 객체의 속성에 부여된 값에 따라 반환 값은 다르다) 가령, 아래와 같은 person1과 person2라는 객체가 있다고 가정해보자. 아래의 코드에서 보다시피 두 객체의 속성명은 동일하다. const person1 = { name: { first: 'Conan', last: `O'brien` }, age: 59, bio: function() { console.log(`${this.name['first']} ${this.name['last']} is ${this.age} years o.. 2022. 4. 22.
객체1. 기본 개념 목차 객체란? 객체 생성 객체의 속성/메서드에 접근하기 객체의 속성/메서드 설정하기 속성 부여 시, 괄호 표기법의 특이점 1. 객체란? 객체는 관련된 데이터 또는 함수의 집합 객체 내부에서 속성과 메서드라고 불리는 변수와 함수들로 구성됨 표준국어대사전에서 객체를 검색해보면 '작용의 대상이 되는 쪽'이라고 나온다. 그렇다. 우리가 객체를 쓰는 이유는 앞서 객체의 설명에서 보았듯이, 객체 내부의 속성과 메서드라는 항목들을 통하여 속성값에 특별한 작용을 하기 위해서이다. (쉽게 말해서, 속성값을 사용하기 위해서 객체를 씀) 이 점을 잘 기억해두면 객체를 이해하는데 큰 도움이 될 것이다. 자 그럼 다시 본론으로 돌아와서, 일반적인 방법으로 객체를 한번 생성해보자 2. 객체 생성 객체는 속성(properties).. 2022. 4. 22.
#2 비동기적인 자바스크립트 실행 목차 동기적 자바스크립트 비동기적 자바스크립트 비동기 코드스타일1 - 콜백 비동기 코드스타일2 -프로미스 코드의 동기/비동기적 실행 선택 #1. 동기적 자바스크립트 비동기적인 자바스크립트를 이해하려면 동기적인 자바스크립트가 무엇인지 알아야 한다. 앞선 게시글을 보았다면 자바스크립트가 싱글 쓰레드라는 것을 알게 되었을 것이다. 싱글쓰레드, 동기적 코드 실행이 어떤 의미인지 예제와 함께 살펴 보자 const btn = document.querySelector('button'); btn.addEventListener('click', () => { alert('ok를 눌러야만 다음 화면을 보여드려요'); let p = document.createElement('p'); p.textContent = 'ok를 눌렀.. 2022. 3. 7.
# 1 비동기 프로그래밍 개념 목차 코드의 동기적 실행과 비동기 개념 blocking 현상 쓰레드 자바스크립트는 싱글쓰레드이다. 비동기적 코드 # 1. 코드의 동기적 실행과 비동기 개념 일반적으로, 프로그램 코드는 좌측 상단에서 부터 순차적으로 실행되며, 한번에 하나씩 실행된다. (코드의 동기적 실행) 만약 어떤 함수가 다른 함수의 결과에 의존하게 된다면, 그 함수는 다른 함수가 끝나고 결과가 반환될 때까지 기다려야 할 것이다. 또한 유저의 관점에서 그동안은 모든 프로그램 동작이 멈춘 것처럼 보일 것이다. 이러한 당황스러운 경험에 대한 대안으로 비동기 프로그래밍이라는 개념이 있다. 컴퓨터 사용에서, 비동기라는 단어는 두개의 주요 맥락에서 사용된다. #1-1. Networking과 통신 비동기 통신은 메세지를 받은 후 즉시 처리가 아닌.. 2022. 3. 7.
배열의 반복 다음과 같은 배열이 있다고 가정하자 arr = [1,2,3,4,5] 1. arr.forEach let x = arr.forEach(v=>console.log(v)) //1 //2 //3 //4 //5 forEach 메서드는 return이 없다는 것이 아래 메서드들과의 가장 큰 차이점이다. forEach 메서드가 적용된 배열 반복의 반환값은 undefined이다. 2. arr.filter //arr배열에서 짝수만을 골라서 변수 evenNum에 담아보자 let evenNum = arr.filter(v => v%2==0 )//[2,4] 출력 filter 메서드의 return값은 불리언이며, return값이 true인 기존배열의 요소를 골라내어 배열 형태로 반환한다. 3. arr.map //arr배열의 모든 값.. 2022. 2. 9.

티스토리툴바