동기 처리와 비동기 처리 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다 -> 함수를 실행할 수 있는 창구가 단 한개 -> 동시에 2개 이상의 함수를 실행 X 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 싱글 스레드는 한 번에 하나의 태스크만 실행할 수 있다-> 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹이 발생 [!] 브라우저에 내장된 자바스크립트의 엔진이 싱글 스레드이고 브라우저는 멀티 스레드로 동작함 만약, 모든 자바스크립트 코드가 자바스크립트 엔진에서 싱글 스레드 방식으로 동작하면 비동기로 동작이 불가능하다 동기 처리 방식 태스크를 하나씩 처리 -> 실행 순서 보장 / 1번 태스크 종료때까지 2번 태스크 블로킹 비동기 처리 방식 태스크 상태 상관없이 ..

DOM(Document Object Model) HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조 노드 Hello div / class / greeting / Hello / div start tag / attribute name / attribute value / contents / end tag 요소 노드 : div / 어트리뷰트 노드 : class:"greeting" / 텍스트 노드 : "Hello" 노드 객체들로 구성된 트리 자료구조를 DOM / DOM트리라고 한다 출처 : https://poiemaweb.com/js-dom 문서 노드(Document Node) 트리 최상위의 루트노드, HTML 문서당 document는 유일함..

Node.js -> 자바스크립트 서버?? X -> 구글의 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경 -> 서버 사이드 애플리케이션 개발에서도 사용 가능 *파싱 파싱(구문 분석 syntax analysis)은 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해(어휘 분석)하고, 토큰의 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스트리 parse tree/syntax tree를 생성하는 일련의 과정을 말한다. [ 내용을 토큰으로 분해 -> 토큰의 문법적 의미와 구조를 반영하여 파스트리 생성 ] *토큰 : 언어가 사용하는 기본 단어 ( 구문적 의미의 최소 단위) ex) string, void ... *렌더링 : HTML..

Set 객체는 중복되지 않는 유일한 값들의 집합이다 구분 배열 Set 객체 동일한 값을 중복하여 포함할 수 있다 O X 요소 순서에 의미가 있다 O X 인덱스로 요소에 접근할 수 있다 O X Set은 수학적 집합을 구현하기 위한 자료구조다 ( 교집합 , 합집합등등) Set 객체 중복은 존재불가 / 모든 값을 요소로 저장가능 / ===로 다른값도 set에서는 같다고 생각함 const set=new Set() // 빈 set 객체 생성 const set1=new Set([1,2,3,3]) // 중복된 3은 하나만 저장함 const set2=new Set(["hello"]) // "h" "e" "l" "o" 마찬가지로 중복값은 하나만 //중복 제거 const uni=arr=>[...new Set(arr)] /..

스프레드 문법은 for...of 문으로 순회가능한 이터러블에 한정된다 ...[1,2,3] 을 하면 1 2 3이 나옴 이때 1 2 3은 값들의 목록이다 값이 아니라 개별적인 값들의 목록이기에 스프레드 문법의 결과는 변수에 할당이 불가능하다 const test=...[1,2,3] //SyntaxError Rest 파라미터와 차이 Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받기 위해 스프레드는 펼치기 위해 function foo(...rest){ console.log(rest); //[1,2,3] } foo(...[1,2,3]) 배열 리터럴 내부에서 사용하는 경우 const arr=[...[1,2],...[3,4]] console.log(arr); //[1,2,3,4] const arr1=[..

32장 String 생략 33장 Symbol 생략 이터레이션 프로토콜 순회 가능한 데이터 컬렌션을 만들기 위해 미리 약속한 규칙 이터러블 프로토콜( Iterable protocol) Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 Symbol,iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 이러한 규약을 이터러블 프로토콜이라고 하며 , 이터러블 프로토콜을 준수한 객체를 이터러블이라고 한다 이터러블은 for...of 문으로 순회할 수 있으며 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용가능 이터레이터 프로토콜 이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레..

Number(28장)~Data(30장)까지 생략 RegExp(정규 표현식) 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어(formal language) 정규 표현식은 문자열을 대상으로 패턴 매칭 기능을 제공한다. 패턴 매칭 기능 : 특정 패턴과 일치하는지 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말한다 const tel='010-1234-567팔' const regExp=/^\d{3}-\d{4}-\d{4}$/; regExp.test(tel) // false const target='Is this all there is?' //패턴 is //플래그 : i => 대소문자를 구별하지 않고 검색한다 방식1 : const regexp=/is/i 방식2 : cont regexp=..

객체와 배열 구분 객체 배열 구조 프로퍼티 키와 값 인덱스와 요소 값의 참조 프로퍼티 키 인덱스 값의 순서 X O length 프로퍼티 X O 배열 자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조를 말한다. 즉, 배열의 요소는 하나의 데이터 탕비으로 통일되어 있으며 연속적으로 인접해 있다. -> 이를 밀집배열(dense array)라고 한다 검색 대상 요소의 메모리 주소 = 배열의 시작 메모리 주소 + 인데스 * 요소의 바이트 수 메모리 주소가 100이고 각 요소가 8바이트면 아래처럼 계산된다 100 + 0*8 =100 100 + 1*8 =108 배열의 요소가 연속적으로 이어져 있지 않은 배열을 희소 배열(sparse array)라고 한다 자바스크립트의 배열은 ..

ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다 ES6 함수의 구분 constructor prototype super arguments 일반 함수 O O X O 메서드 X X O O 화살표 함수 X X X X 메서드 ES6 사양에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다 const obj={ x:1, //메서드인 foo와 일반함수인 bar foo(){return this.x}, bar: function(){return this.x} } console.log(obj.foo()); console.log(obj.bar()); 생성자 함수로서 호출 new obj.foo() -> TypeError new obj.bar() -> bar {} 생성자..

문제 1. 배열 2개가 주어지고 첫번째 배열에서 제곱한 값이 두번째 배열안에 있는 수와 같으면 True 다르면 False를 반환해라 내 풀이 /* O(n^2) => for문안에 indexOf 문제: 배열 2개가 주어지고 첫번째 배열에서 제곱한 값이 두번째 배열안에 있는 수와 같으면 True 다르면 False를 반환해라 방법은 많지만 그중 O(n)의 시간 복잡도를 가질수 있게 풀어보는게 목적 -> 빈도수 세기 패턴(?) */ function squareArr(arr1,arr2){ if (arr1.length!==arr2.length){ console.log('false : different length') return false } for (let i = 0; i < arr1.length; i++) { l..