JAVASCRIPT (23) 썸네일형 리스트형 <Javascript> 프로퍼티 조회와 변수 호이스팅 프로그래머스 문제를 풀다가 콘솔을 확인해보는데 다음과 같이 작성한 콘솔 로그에서 undefined가 떴다.const a = 2;const b = 2;const c = 2;const d = 2;const arr = [a, b, c, d];const counts = {};for (const num of arr) { console.log(counts[num]); counts[num] = (counts[num] || 0) + 1;} 내 처음 생각은 '엥? 왜 호이스팅이 안됐지?' 였다. 바보.... 하지만 저 콘솔 부분은 객체의 프로퍼티 접근 이지 변수 선언이나 함수 선언이 아닌 것....당연히 counts[num]에 대한 정의가 이뤄지기 전이라 undefined가 떴던 것이었고....정의가 이뤄진 다음에.. <JAVASCRIPT> 호이스팅?? let과 const는 호이스팅이 된다? 안된다? 호이스팅이란? - 변수와 함수의 선언이 최상단으로 끌어올려지는 것 처럼 보이는 현상 JS를 공부하는 중이라면 아마 호이스팅에 대해 한번쯤은 들어봤을 것이다. 처음엔 단순하게 코드의 최상단으로 변수선언 한걸 끌어올려줘서 함수나 변수를 선언한 위치와 상관없이 인식한다고만 알고 있었는데 사실은 끌어올려주는게 아니라 그런 '것 처럼' 보이는 현상이다. 바로 예시로 확인해보자! console.log(a); myFn(); var a = 1; function myFn() { console.log("함수 선언문 호이스팅"); } 예시1을 실행시키면 결과가 어떻게 나올까? 변수에 값을 할당하고 함수를 선언한 것보다 호출하는 코드가 먼저 쓰였다. 결과는...?? 띠용!!!! undefined가 떴다. 분명 .. <JAVASCRIPT> 이터러블이란? iterable / iterator 지난 글 제너레이터에 짝궁같은 느낌으로 이터러블이라는 놈이 있다고 한다. 일단 이터러블에 대해서 개념부터 알아보자 이터러블(iterable )과 이터레이블(iterable)이란? - iterable : 반복가능한 객체, 배열을 일반화한 객체이다. 이터러블이라는 개념을 사용하면 어떤 객체에든 for ~of 반복문을 사용할 수 있다. 배열이 대표적인 이터러블이며 배열외의 다수의 내장 객체가 반복 가능하다. 문자열 역시 이터러블의 예시이다. - iterable/iterator protocol : iterable 을 for of, 스프레드 연산자 등과 함께 동작하도록 한 규약 - javascript의 Array, set, map은 iterable/iterator protocol 을 따르고 있다. 아.... 그러.. <JAVASCRIPT> 제너레이터(Generator)란? / 제너레이터와 일반함수의 동작차이 / next() 면접을 보고나니 기본이 얼마나 중요한지 다시금 깨닫게 되었다ㅠㅠ 비슷한 기능을 구현하는 것은 인터넷에 뒤져보면 얼마든지 나온다. 하지만 에러가 발생했을 때 고치거나 로직을 변경해야할때 왜 이렇게 썼는지에 대해 말하기 위해서는 기본 개념이 정말... 정말 잘 잡혀있어야 한다는거..... 여튼 그래서 제너레이터가 무엇인가에 대해서 알아보자! 1. 제너레이터란? - 일반함수는 하나의 리턴값만 반환하지만 제너레이터를 사용하면 여러개의 값을 필요에 따라 하나씩 반환(yield)할 수 있다. 그러니까 조건문처럼 길지 않지만 때에 따라 원하는 반환값이 나온다. switch (age) { case age 10 : var ticket = 12; break; default: break; } 이런식으로 작동하는게 아닐까? .. < JAVASCRIPT> 이벤트가 바인딩 되어있는지 확인하기 / 이벤트 확인하기 / addEventListener란? 이벤트를 바인딩하는 함수 addEventListener에 이어서 내가 붙여놓은 이벤트가 뭔지 확인해 보려면 어떻게 해야할까? 결과적으로 말하자면 그런 함수는 자체적으로 지원하지 않는다 나도 찾아보다가 getEventListners() 로 이벤트가 얼마나 바인딩 되어있는지 확인해 볼 수 있는 함수라고 해서 써봤는데 에러가 났다. doc에서 이런 함수가 잇는지 찾아봤지만 역시나 없었다ㅋㅋㅋ https://nodejs.org/docs/latest-v16.x/api/events.html#emitteraddlistenereventname-listener Events | Node.js v16.20.0 Documentation Events# Source Code: lib/events.js Much of the Nod.. <JAVASCRIPT> JS에서 이벤트란? 이벤트 리스너? 흨흨... 기본적인 부분일텐데 숙지가 안되어있어서 다시 정리한다. 내가 생각하는 js의 이벤트란 '트리거를 건드리면 발생하는 어떤 기능' 이라고 생각했는데 정확한 정의에 대해서 알아보자 JAVASCRIPT 에서 이벤트란? - 이벤트(event)란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다. 오.... 그럼 이벤트는 어떻게 만들지?? 에 대한 답은 이벤트 리스너 인 것 같다. 이벤트 리스너란? - 이벤트가 발생했을때 그 처리를 담당하는 함수를 가리킨다. 이벤트 핸들러라고도 한다. 그리고 이벤트 리스너는 먼저 객체나 요소에 등록되어야 호출 할 수 있다. > 사용방법 1. 이벤트의 대상이 되는 객체나 요소에 프로퍼티로 등록하기 2. 객체나 요소의 메서드에 이벤트 리스너를 전달하는 방법.. < 중간 퀴즈 > Class에 대한 중간퀴즈 / class 의 constructor란? 1. class 의 constructor란? 2. 정적메소드란? 3. 상속의 개념? 4. 추상 클래스란 무엇인가? 5. 싱글톤 클래스의 개념? 정답 1. class 의 constructor란? class의 constructor는 예약어이다. 해당 클래스와 연결되며 객체가 생성되면서 실행되는 클래스에 기반해 만드는 모든 객체에도 연결되는 함수이다. 이를 활요해 구축하는 객체에 대한 초기화 작업을 수행할 수 있다. 2. 정적 메소드란? 클래스를 기반으로 생성된 객체가 아니라 클래스에서 직접 호출하는 메소드입니다. 3. 상속의 개념? 상속을 사용하면 일부 공통적인 기능을 공유하면서 특수화된 청사진을 생성할 수 있다. 4. 추상 클래스란 무엇인가? 인스턴스화 될 수 없고 확장되어야 하는 클래스이다. 5. 싱글톤.. <TypeScript, JavaScript> Class 란? -2. 클래스, 인스턴스화와 상속의 차이 / super() 이전 글에서 new 키워드로 클래스를 인스턴스화 해서 설계도에 비교하는 것 까지 정리를 했었다. 이번에는 상속에 대해서 정리해보자. 그리고 상속을하면서 super() 가 도대체 무엇인지 궁금했었는데 이번 기회에 정리를 하게 되었다. 단순히 ' 상속 = 부모 클래스를 복사해서 쓰는 것 ' 이상으로 상속이란? 다른 클래스에 있는 프로퍼티와 메소드를 extends 키워드를 이용해 상속한 다음 잠재적으로 새로은 프로퍼티와 메소드를 추가한다. 상속을 하면 상속의 대상을 부모클래스 상속을 받은 대상을 자식 클래스라고 한다. +) 자식클래스를 서브 클래스라고도 한다. 그리고 상속과 인스턴스화의 가장 큰 차이점은 정적 메소드에 접근할 수 있느냐 없느냐이다. 일단 간단한 클래스를 만들고 그 클래스를 상속받은 클래스를 써.. 이전 1 2 3 다음
