JAVASCRIPT (22) 썸네일형 리스트형 <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 키워드를 이용해 상속한 다음 잠재적으로 새로은 프로퍼티와 메소드를 추가한다. 상속을 하면 상속의 대상을 부모클래스 상속을 받은 대상을 자식 클래스라고 한다. +) 자식클래스를 서브 클래스라고도 한다. 그리고 상속과 인스턴스화의 가장 큰 차이점은 정적 메소드에 접근할 수 있느냐 없느냐이다. 일단 간단한 클래스를 만들고 그 클래스를 상속받은 클래스를 써.. <TypeScript, JavaScript> Class 란? -1. 클래스의 개념 / 정적 메소드 / 동적 메소드 / 프로퍼티 / 일단 TS에 대해 공부하려면 class에 대한 개념이 무조건 잡혀있어야 한다. 단순히 변수의 데이터 타입을 지정해주는 걸 넘어서 함수의 리턴 값의 데이터 형태나 클래스에 포함되어야 하는 데이터 및 함수 등등을(이 용도로 가장 많이 쓰인다!!!) 폭 넓게 지정해줄 수 있기 때문이다 그리고 - 내 개인적인 경험으로는 클래스에 대해서 개념을 익히기 전과 후로 공부 및 코드를 이해하는데 정말정말 크게 달라진만큼 꼭 한번은 class에 대해 짚고 넘어갔으면 하는 바램이다. 클래스를 붕어빵과 붕어빵 틀에 비유하는 예시를 가장 많이 봤을 것이다. (나도 항상 봤던 비유이다ㅋㅋ) 그런데 일차적으로 용어가 헷갈리는 상태에서 헷갈리는 용어들을 갖고 개념을 이해하려니 더 뒤죽박죽 섞여서 전혀 이해할 수 가 없었다ㅋㅋㅋ 그래.. 이전 1 2 3 다음
