흰둥씨의 개발장

자바스크립트는 싱글 스레드(=실행 창구가 하나다)이다. 그러니까 실행은 순서대로 되겠찌? 슬프게도 Nope... 그러나 웹 브라우저 (=자바스크립트 실행기) 작동방식에 의해 web APIs를 통한 비동기 실행이 가능하다. 비동기실행이란? 순차실행하다가 오래걸리는 연산을 만났다고 할 때, 기다렸다가 다음을 실행하는 것이 아니고, 일단 재껴두고 다음꺼 요청 넣음 웹 브라우저의 비동기 작업방식 짧게 요약 : 일단 오래 걸리는거 될때까지 webAPIs로 보내서 완료되면 큐->실행스택으로 올라오게 해서 실행하고, 오래걸리는거 저렇게 처리할동안 실행스택에서는 다음 코드를 실행요청 들어감 = webAPIs의 기능이 그런 편 (ex. setTimeout(), setInterval() 오래걸리는연산()-> 함수2() 순..

//truthy "글자가있는문자열"? console.log(true) : console.log(false);//true []? console.log(true) : console.log(false); //true(빈배열) let obj = {} ? console.log(true) : console.log(false); //true(빈객체) Infinity ? console.log(true) : console.log(false); //true 25 ? console.log(true) : console.log(false);//true 1 ? console.log(true) : console.log(false); //true //falsy 0 ? console.log(true) : console.log(fals..

javascript의 sort는 자바스크립트의 sort가 아닌 "브라우저엔진의 sort"임 => ECMAscript에서 정렬 알고리즘을 규제하고 있지 않고, 브라우저 벤더사에 정렬 알고리즘을 맡겨서, 실행브라우저마다 결과 다를수 있음 ㄴChrome70(2018.10배포버전)은 Timsort (그전에는 삽입정렬(10개이하)과 퀵정렬(10개초과)을 동시 사용했음) ㄴMozilla는 병합정렬 ㄴsafari는 선택정렬 아래의 예시는 브라우저사마다 발생할수있는 에러 없이 사용할수 있는 정렬방뻐 단순 숫자열 정렬시 data.sort(); // [1, 10, 11, 2, 20, 22, 30, 40] //자바스크립트의 정렬은 앞자리부터 비교하기 때문에 위와 같은 결과 나옴 data.sort((a,b)=> a - b);..

Array.prototype.at(인덱스번호) = 배열 인덱스 번호 위치 값 반환 at() 메서드는 정수 값을 받아, 배열에서 해당 값에 해당하는 인덱스의 요소를 반환 양수와 음수 모두 지정할 수 있고, 음수 값의 경우 배열의 뒤에서부터 인덱스를 셉니다. array[array.length - 1] 값은 array.at(-1)와 동일하다. 주어진 인덱스가 배열에 없으면 undefined를 반환 const colors = ['빨강', '초록', '파랑']; colors.at(-2); //'초록' 반환 colors.at(0); //'빨강' 반환 Array.prototype.concat() concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환 const array1 = ['..

or연산자 0, "", false, undefined와 같은 falsy한 값을 전부검사한다. const or검사 = false || A; ->or검사는 A를 반환한다. ??연산자 undefined 와 null과 같은 nullish한 값만 검사한다. (그렇기 때문에 falsy한 상황은 검사되지 않는다) const 물음표검사1 = false ?? A; ->물음표검사1은 false를 반환한다. const 물음표검사2 = A ?? B; ->물음표검사2은 A가 undefied이거나, null이 아닌 이상 B를 반환한다. 안정성 관련 이슈 때문에 ??는 &&나 ||와 함께 사용하지 못한다. ??의 연산자 우선순위는 대다수의 연산자보다 낮고 ?와 = 보다는 높다. 그렇기때문에 복잡한 표현식에서 ?? 를 사용할때는 (..

async & await 란? 프로미스를 좀 더 쉽게 사용할 수 있게 만든 비동기 함수 - promise 객체를 반환하는 함수를 다시 함수로 리패키징 - 해당 패키징 함수에 async 키워드 작성 - 해당 패키징 함수 안쪽 반환하는 promise 함수 앞에 await 지정 - await로 지정된 함수가 끝날 때까지 그 다음 함수는 동기화 const result = document.querySelector('#result'); const URL = 'https://jsonplaceholder.typicode.com/users'; /* fetch(URL) .then(res => res.json()) .then(users => conso..

모던 js 정리 https://ko.javascript.info/ ​ 자바스크립트 엔진 V8 chrome, opera Spider-monkey - fire fox Trident or chakra -IE(버전마다 다름) chakraCore -Microsoft Edge squirrelFish-Safari ​ 자바스크립트와 함께 쓸수있는 언어들 1. Coffe script : 자바스크립트를 위한 syntactic sugar Type script :ms가 개발, 개발을 단순화하기위한 목적의 언어 Flow :focebook이 개발, 단순화 위함이나 타입스크립트랑 다른방법 Dart :브라우저 아닌 환경에서 동작하는 고유엔진을 가진언어, 모바일앱과같은 내용작동, google이 개발 ​ -자바스크립트 추가되는 기능을 ..

https://ko.javascript.info/article/size-and-scroll/metric-all.svg 모니터 해상도 너비(브라우저아님): window.screen.width 모니터 해상도 높이(브라우저아님): screen.height 모니터 화면의 작업표시줄 제외 너비(브라우저아님): screen.availWidth 모니터 화면의 작업표시줄 제외 높이(브라우저아님): screen.availHeight 브라우저 전체너비: outerWidth 브라우저 전체높이: outerHeight 스크롤바 포함 브라우저 내부너비(순수화면사이즈): window.innerWidth 스크롤바 포함 브라우저 내부높이: innerHeight //.documentElement 문서전체 (new)스크롤바 영역 미포함 ..

이벤트(Event) ? 웹브라우저나 사용자가 행하는 어떠한 동작 / 시스템에서 일어나는 사건(action)혹은 발생(occurrence) - 표준 이벤트 모델 eventTarget.addEventListener(); 대상: element, Document, window, XMLHttpRequest.... .addEventListener('이벤트 이름', 콜백함수event handler); ㄴ대상을 지정하지 않으면 전역객체 window를 바인딩 한다. ㄴaddEventListener안의 콜백함수명 작성시 ()를 포함하여 작성하면 즉시실행된다, 이벤트 발생하면 함수가 실행되도록 하기위해서는 함수명만을 기입한다. - 고전 이벤트 모델 .onclick, .onblur , .onmouseenter... .on접두..

함수 Function이란? ㄴ특정 기능에 포함된 명령어가 여러가지 일 때 그 명령을 한번에 실행할 수 있게 한 덩어리로 묶어둔 것 (즉, 여러 동작을 묶은 덩어리임 ex. a랑 b를 더하고 x로 나누는 기능을 모아둔 것과 같음) 1. 특정 기능을 실행하기 위한 코드의 집합으로 호출을 통해 재사용가능 2. 객체 자료형중 하나이기 때문에 변수 대입가능 3. 함수는 선언 함수와 함수표현식 (익명 함수, 화살표함수, 즉시 실행 함수)으로 생성가능 4. 자바스크립트에 내장된 함수도 있는데 그것은 메서드(method)라고 함 ex.)alert prompt...etc - 선언함수 : 이름을 가진 함수 선언문 ㄴ선언함수의 경우 어느 곳에서나 호출 가능 ㄴ함수명 ();

var, let, const를 사용해 변수(variable)를 선언할 수 있고, 선언된 변수엔 데이터를 저장할 수 있습니다. 변수는 마치 '이름이 붙은 데이터 저장소’와 같습니다. let banana;// 변수 선언 console.log(banana); //선언후 아무것도 대입하지 않으면 undefined. banana = 1000;// 변수 banana에 숫자 1000을 '대입' 했다. banana = 5000;//값의 재할당 console.log(banana); //콘솔에 변수값 출력 * 지역변수 : {} 영역 안에서만 적용 * 전역변수 : 문서 전체에 적용 > let apple=1+1; function calc(){} 와 같이 밖에서 함수 밖에서 선언된 경우 ㄴ변수키워드 (var , let, con..

1. 산술 연산자 =(대입 혹은 할당), +(더하기), -(빼기), *(곱하기), /(나누기), %(나머지값), **(거듭제곱) 자바스크립트의 연산은 사칙연산의 방식을 대부분을 그대로 따릅니다 + , - 연산자만 있을때 왼쪽에서 오른쪽으로 순차연산하고, * , / 연산자만 있을 때 왼쪽에서 오른쪽으로 순차 연산하며, +,-,*,/ 가 함께 있을때는 곱하기, 나누기가 먼저 연산되고 더하기, 빼기는 나중에 연산됩니다. 또, (...)가 있는 경우 (...)먼저 연산 후 나머지를 연산합니다. - 피연산자 : 연산자가 연산을 수행하는 대상('피연산자’는 '인수(argument)'라는 용어로 불리기도 함) ex) 2*9 ; 곱하기 연산자의 왼쪽연산자는 2, 오른쪽연산자는 9입니다 - 단항(unary) 연산자 : ..