JS 따라잡기

Console 객체와 script태그 학습

var, let, const 변수 학습

호이스팅에 대한 개념과 원리 학습

JS의 타입 유형 종류와 개념 학습

타입 변환 (Type Conversion) JS에서의 변수는 새 변수 및 다른 데이터 유형으로 변환 가능 Number -> String String -> Number Date -> Number Number -> Date ![](https://velog.velc

기본 연산 + : 덧셈 - : 뺄셈 * : 곱셈 / : 나눗셈(몫을 반환) % : 나머지(몫 제외 나머지를 반환) Math Object Math.E : 오일러의 수를 반환 Math.PI : 원주율을 반환 Math.SQRT2 : 2의 제곱근 반환 Math.SQRT1

Template Literal backtick(`) 문자를 사용해 문자열 표현한 것 특징 쉬운 줄 바꿈 문자열 내부에 표현식 포함 가능 줄 바꿈 그 전의 ES5기준 '\n'을 넣어야지 줄 바꿈 가능 ES6부터는 그냥 줄 바꿔서 입력시 줄 바꿈 인식 내부 표현

반복문 종류 for : 코드 블록을 여러 번 반복 for/in : 객체 속성을 따라 반복 while : 지정된 조건이 true 동안 코드 블록 반복 do/while : while의 변형, true 검사 전 코드 블록 한 번 실행 후 조건 검사 for stat 1 : 루프 시작되기 전에 실행 stat 2 : 루프 실행위한 조건 stat 3 : 루프 실...

reload() : 페이지 재로드

출처 : dimension85.com렌더 엔진이 문서를 읽어들인 후 파싱어떤 내용을 페이지에 렌더징할 지 결정브라우저가 DOM과 CSSOM을 결합하는 곳화면에 보이는 모든 콘텐츠와 스타일 정보를 모두 포함하는 최종 렌더링 트리 출력화면에 표시되는 모든 노드의 콘텐츠 및

Ex ) querySelector('.className') -> .className 이라는 이름의 클래스 태그 접근

출처 : https://ko.javascript.info/dom-navigationparentNode : 해당 노드의 부모 노드 반환childNodes : 해당 노드에 대한 자식 노드들 반환firstChild : 첫 번째 노드 반환 (= childNodes0)

createElement document.createElement(tagName); => 태그 이름을 넣어서 요소 생성 생성한 element에 속성 넣기 .className : class 추가하기 .id : id 추가하기 .setAttribute(속성, 이름) :

Event Listener 이벤트 발생 시 어떤 액션을 위한 함수 호출 addEventListener() 이벤트 발생 시 이벤트 리스너 호출을 위한 해당 객체나 요소에 등록해주는 함수 element.addEventListener(이벤트명, 실행 함수명(listener), 옵션); element : 이벤트 발생에 의한 함수 호출할 요소 click : 클릭...

Event 종류 UI load : 문서나 객체가 로드 완료 시 발생 change : 객체 내용이 변동되거나 focus 잃었을 때 발생 resize : 객체 크기가 변하면 발생 scroll : 스크롤바 조작 시 발생 마우스 click : 객체 클릭 시 발생 dbclick : 객체 더블클릭 시 발생 mousedown : 마우스 클릭 시 발생 mouseout...

Event Bubbling 중첩된 요소에 이벤트 발생 시 이벤트가 위로 전달 되는 것 타깃 이벤트에서 시작해 요소를 거쳐 document객체 만날 때 까지 각 노드에서 모두 발생 몇 이벤트는 window객체까지 거슬러 올라가기도 함 3번에 이벤트 발생하고, 3번, 2번, 1번에 이벤트에 대한 핸들러가 있다면 3 -> 2 -> 1 순으로 핸들러 실행 이렇...

Event Capturing Event Bubbling과는 반대로 제일 상단에 있는 요소에서 아래로 이벤트가 내려오는 것 Capturing 확인 addEventListener의 capture 옵션 true Event Flow 이벤트 발생 시 크게 3단계 흐름

하위 요소에서 클릭 이벤트를 감지(이벤트 버블링)

메소드에서 this : 해당 객체를 가리킴(참조) this -> audio 객체 : play this 출력 후 audio 객체 반환 함수에서 this : window 객체를 가리킴 ![](https://velog.velcdn.com/images/j2an/post/ae6e5c4f-555f-44be-8639-bb8724c65538/imag

Intro 일반 함수에서 사용되는 this는 window객체를 가리키는데, 객체를 참조하는 방법은 없을까? call() : 함수를 호출하는 함수 첫 번째 매개변수로 어떠한 것을 전달 시 호출되는 함수의 this 안에 window 객체가 아닌 전달받은 것을 받게됨 ![](https://velog.velcdn.com/

삼항 연산자에 대한 개념 학습

Ex) 대학생이 되는 법 : 고등학교 1학년 -> 2학년 -> 3학년 -> 대학교 입학Ex) 취직하는 법 : 토익 공부, 자격증 취득, 면접 준비 등출처 : https://blog.sessionstack.com/how-does-javascript-actuall

Closure? : 다른 함수 내부에 정의된 함수가 있는 경우 외부 함수가 실행을 완료하고, 해당 변수가 해당 함수 외부에서 더 이상 액세스할 수 없는 경우에도 해당 내부 함수는 외부 함수의 변수 및 범위에 액세스 가능하게 함 코드 구조 1. outerFunctio

구조 분해 할당? : 배열이나 객체의 속성을 분리하여 그 값을 개별 변수에 담을 수 있게하는 JS 표현식 : Clean Code위해 사용 인자로 받은 animalData객체의 속성을 지역 변수로 할당한 구조이다. => 이를 구조 분해 할당으로 간략하게 표현할 수 있다. 객체 구조 분해 할당 ![]

전개 연산자? : ES6에서 새롭게 추가된 특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 때 사용 : 연산자는 "..." 사용 배열 조합 arr2, arr3의 배열을 arr1에 합쳐서 새로운 배열을 생성한다 할때 concat함수를 이용하면 되지만 간편하게 ...을 붙여서 배열을 합치는 방법도 있다. 이 방식은 apply함수에서는 더...

Map : 배열 내 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환 array1 배열의 각 요소를 x로 받아 *2한 값을 모아 새로운 배열을 반환 구조 : arr.map(callback(currentValue[, index[, arra

undefined, null : 둘 다 원시 자료형(primitive) : 각 타입에 대한 유일한 값 (undefined -> undefined, null -> null) undefined : 아무 값도 할당받지 않은 상태 var 키워드로 선언한 변수는 호이스팅으로

JSON.stringify()함수로 각 객체의 값을 반환하여 비교하기에 true로 반환하게 된다.

\_.cloneDeep() 함수로 깊은 복사

함수 선언은 호이스팅 되어 코드 실행되기 전에 로드된다. 따라서 오류 없이 alert코드 실행이 된다

root: null -> 뷰포트 기준으로 관찰threshold: 0.1 -> 타겟 요소의 10%가 보일 때 콜백 함수를 실행entries 배열을 순회하면서 관찰 대상에 대해 처리isIntersecting 속성으로 뷰포트에 들어왔는지 확인.list 클래스 가진 요소 선택

같은 입력값이 주어졌을 때, 언제나 같은 결괏값을 리턴사이드 이펙트를 생성하지 않는다클린 코드쉬운 테스팅쉬운 디버깅독립적인 코드특정 함수가 다른 함수에 미치는 예기치 못한 영향 최소화함수 생성 후 실행 시 어떤 결괏값을 리턴할지 예측 가능=> 프로젝트 중 Impure

커링 ? : f(a, b, c)처럼 단일 호출로 처리하는 함수를 f(a)(b)(c)처럼 각각의 인수가 호출 가능한 프로세스로 호출된 후 병합될 수 있게 변환 : 함수를 호출하는 것이 아닌 변환하는 것 : 함수와 함께 사용하는 고급기술, JS뿐 아니라 다른 언어에도 존재 sum 같은 경우 단일 호출로 값들이 다 들어가있기에 결괏값 반환 curriedSum ...

기존 조용히 무시되던 에러들을 throwingJS 엔진의 최적화 작업을 어렵게 만드는 실수들을 잡음엄격 모드의 코드는 가끔 비-엄격 모드의 동일 코드보다 더 빨리 작동

이 함수를 할당받을 변수 지정즉시 호출IIFE로 Closure 가능하게 해 내부 함수에서 외부함수에 잇는 변수 접근 가능

바깥에서의 접근을 막아 보안 강화 및 코드 관리에 용이

프로토타입 ? : JS 객체가 다른 객체로부터 메소드와 속성을 상속받는 메커니즘 = 프로토타입 체인 객체에 name: John, age: 45를 받고 있다 hasOwnProperty() 속성 즉 객체에 email이란 속성 갖고 있는지 묻고 있다 이 hasOwnProp

static 메소드 호출 시 인스턴스가 아닌 클래스 이름으로 접근한 것을 알 수 있다

4\. 여기에 introduce 확인 되었기에 여기서 introduce 사용

소스 코드에 대한 떨어지는 가독성에러 처리 시 모든 콜백 함수에 각각 에러 핸들링 부여

Symbol ? : ES6에서 추가된 원시 타입 : 유니크한 식별자를 생성하기 위한 목적 Symbol()으로 Symbol 타입 생성 유니크한 식별자 위해 사용되는 것이기에 각 Symbol 내부는 다른 값을 가짐 description : Symbol 값이 어떤 심볼

Iterator Iterable : 반복이 가능하다, 배열은 반복 가능한 객체 : for...of 이용 가능하거나 Symbol.iterator 값을 가지면 iterable Iterator : 반복자는 next() 호출해서 {value: , done: } 2 개의 속성을 가지는 객체 반환하는 객체 숫자 배열을 makeIterator 매개변수에 넣어 호출 n...

출처 : https://www.freecodecamp.org/news/singleton-design-pattern-with-javascript/

Ex) 볼륨 제어 가능한 프로그램에서 한 사용자가 8로 설정하면 프로그램 전체에 설정하나의 객체로 내에서 메소드들을 통해 기능 생성하는 구조를 싱글톤이라 한다

Factory Pattern : 비슷한 객체 많이 만들 수 있는 장점으로 반복적으로 생성해야 하는 경우에 사용 동일 코드를 계속해서 반복할 필요 없이 동일 속성을 공유한느 여러 객체 생성 시 유용 환경, 사용자별 구성에 따라 사용자 지정 객체를 쉽게 반환 가능 보통

중재자 패턴 : 객체 그룹에 대한 중앙 권한을 제공 3명 유저가 채팅한다고 가정한다면 서로에게 메시지 보내고, 채팅방에서 라우팅 처리 여기서 Mediator가 채팅 받고, 라우팅으로 채팅을 전달하는데 정크 메시지 받지 않도록 필터와 규칙 등 Mediator에 추가하여

현재 상태카운트상태 변경 : 변경에 대한 횟수를 10회로 설정시작

클릭 이벤트로 subject가 notify를 보내면 해당 데이터를 각 옵저버들 인자에 보내어 호출

모듈 패턴 : 코드를 더 작고, 재사용 가능한 조각으로 분할하는 것 모듈 내의 값은 기본적으로 모듈 내 비공개로 유지되고, 수정 불가하기에 코드 캡슐화를 촉진 export 키워드 사용해 명시적으로 내보낸 값만 다른 파일에서 액세스 가능 일반적으로 작성되는 input을 위한 함수와 연산 처리 위한 함수가 있다 이를 각 다른 파일에 정의를 내려 수행하는 것...