Javascript 48

논리연산자: !(not) !!(double not) 불리언 값 다루기 (truthy, falsy)

논리 연산자 ! NOT operator : 표현식 값의 불리언 반대값을 반환함 truthy값이면 false로 변환 let x = true; let y = !x; console.log(y); // false falsy값이 있으면 ! operator는 true를 반환함 let x = ''; let y = !x; console.log(y); // true !! double not operator 어떤 값이던 불리언으로 변환함. let x = true; let y = !!x; console.log(y); // true truthy값이면 true로 반환 let x = ''; let y = !!x; console.log(y); // false falsy값이면 false로 반환 MDN | truthy MDN | fa..

Javascript 2023.03.07

[이벤트] mouseDown과 click의 차이

MDN | Element: click event MDN | Element: mousedown event 이벤트 실행 순서 mousedown -> mouseup -> click click mousedown 발현되는 시점 포인터가 요소 내부에 있을 때, 포인팅 장치의 버튼이 눌리고, 떼일 때 만약 버튼이 한 요소에서 눌리고, 다른 요소에서 떼진다면 두 요소가 포함된 상위 요소에서 이벤트가 발현됨 포인터가 요소 내부에 있을 때, 포인팅 장치의 버튼이 눌릴 때 (떼기 전) 포인팅 장치 마우스의 왼쪽 클릭 마우스의 아무 버튼 사용처 간단한 상호 작용 -링크 열기, form 제출 복잡한 상호작용 -드래그 앤 드롭, 텍스트 선택, 선 그리기 등

Javascript 2023.03.06

some과 every의 차이

JavaScript에서 some과 every는 주어진 조건에 대해 배열의 요소를 테스트하는데 사용되는 배열 메서드입니다. some()메서드는 배열의 요소 중 하나 이상이 조건을 충족하는지 확인하고 불리언 값을 반환합니다. 조건을 만족하는 요소가 하나 이상 있으면 true를 반환합니다. 그렇지 않으면 false를 반환합니다. syntax // 화살표 함수 some((element) => { /* … */ }) some((element, index) => { /* … */ }) some((element, index, array) => { /* … */ }) // 콜백 함수 some(callbackFn) some(callbackFn, thisArg) // 인라인 콜백 함수 some(function (eleme..

Javascript 2023.03.01

ISO 8601 국제표준시간(2016-10-27T17:13:40Z) 날짜만 나오게 자르기

위키백과 | ISO 8601 ISO란? ISO 8601 은 날짜와 시간과 관련된 데이터 교환을 다루는 국제 표준 그레고리력 (proleptic Gregorian도 가능)에서의 날짜와 (부가적으로 시간대 정보를 포함하는) 24시간제에 기반하는 시간, 시간 간격(time interval) 그리고 그들의 조합에 대한 표현과 형식에 적용됨 조합된 UTC 날짜 및 시간: 2016-10-27T17:13:40Z 날짜: 2016-10-27 const date = new Date(); console.log(date.toISOString());//2022-12-19T14:24:36.447Z 문제 위와같이 나오는 형태를 날짜만 제외하고 T부터 없애기 위해서 substring과 indexOf사용 Stack overflow |..

Javascript 2022.12.19

Redux는 무엇인가 (코딩애플, 생활코딩, Udemy 노트필기)

참고 2022.11.18 - [React] - useReducer 2022.07.07 - [React] - UseContext(Context API) Redux는 무엇인지? cross-component 또는 app-wide state를 위한 state관리 시스템 A predictable state container for Javascript apps 자바스크립트로 만든 어플리케이션을 위한 예측 가능한 상태의 저장소 예측 가능 1) 코드의 복잡성을 낮추어, 코드가 예측 가능하게 만들어 줌 Single Source of Truth 상태는 객체임 state={} 하나의 객체안에 app에서 필요한 모든 데이터를 다 넣는다 2) 외부로 부터 철저히 차단시킨다 인가된 담당자(함수)만 사용할 수 있음. dispatc..

Javascript 2022.12.06

class

자바스크립트는 프로토타입 기반 객체지향 언어, 객체지향 프로그래밍 능력이 있음 클래스가 필요 없음. ES5까지는 클래스 없이, 생성자 함수+프로토타입으로 객체지향 언어의 상속 구현 가능 ES6부터 클래스 기반 언어를 사용하는 프로그래머들을 위하여 C#, Java와 비슷한 새로운 객체 생성 메커니즘 제시 클래스는 함수 Class vs. 생성자 함수 class 생성자 함수 new연산자 없이 호출 X 에러 발생 O 일반 함수로 호출됨 상속을 지원하는 extends와 super키워드 제공 O X 호이스팅 X O 함수 선언문으로 정의된 생성자 함수는 '함수' 호이스팅 function hi(){} 함수 표현식으로 정의한 생성자 함수는 '변수' 호이스팅 let hi = function(){} strict mode 실..

Javascript 2022.11.28

생성자 함수와 new 연산자

객체 let person = {} person.name = 'egoing'; //name은 프로퍼티 person.introduce = function(){ //introduce는 메서드 return 'my name is ' + this.name; //this.name에서 this는 function()이 속해있는 객체 person을 말함 } document.write(person.introduce()) // my name is egoing 객체 만든 것과 내용이 떨어져 있어서 집중도가 떨어짐 let person = { 'name' : 'egoing', 'introduce' : function(){ return 'my name is' + this.name; } } document.write(person.in..

Javascript 2022.11.26

This

this란? this는 함수 내에서 함수 호출 맥락(context)를 의미한다 맥락: 의미가 고정되어 있지 않고, 상황에 따라 달라짐 this는 Javascript함수 '안'에서 사용되는 약속되어 있는 변수 변수 안에 들어 있는 값은 그 함수를 어떻게 호출했냐에 따라 달라짐 함수 호출시 this의 값 function func(){ if(window === this){ document.write("window === this"); } } func(); //window === this window는 client자바스크립트 (웹브라우저 자바스크립트)의 전역객체 이름이 window임 window와 function안에서 this가 같은지 확인해서, 같으면 화면에 출력 this는 함수안에서 전역객체인 window를..

Javascript 2022.11.26

실행 컨텍스트 execute context, 호출 스택 call stack

참고) 생활코딩 | JavaScript - Execute context 1. debugger의 고급 사용법을 익힐 수 있습니다. 2. 변수의 유효범위에 대해서 이해할 수 있습니다. 3. var, let, const의 차이점에 대해서 알 수 있습니다. 4. closure, hosting과 같은 주제에 대한 이해를 얻는 발판을 마련할 수 있습니다. 2022.04.27 - [Javascript] - 변수의 선언과 var, let, const 의 차이 자바스크립트는 변수를 읽으려고 할때 scope에서 변수를 찾음. script에 없으면 global에서 찾음 Global 실행 컨텍스트에서 저장되는 곳 아무것도 붙이지 않는 변수: global var : global let: script const: script *..

Javascript 2022.10.31