빠르게 성장하는 개발자

1. This어떠한 object를 가리키는 키워드python에서의 self함수가 호출될 때 암묵적으로 전달 받는다.JavaScript에서의 this는 일반적인 프로그래밍 언어의 this와 조금 다르게 동작한다.JS에서는 같은 함수라도, 어떻게 호출되었는지에 따라서 this가 동적으로 결정된다. 2. 함수 문맥에서의 this단순 호출전역 객체를 가리킨다.즉, 브라우저에서는 Window, Node.js 에서는 globalMethod(객체의 메서드로서)객체의 메서드이므로 해당 객체가 바인딩 된다.Nested콜백함수? ⇒ 함수 자체가 호출된 것이기 때문에 window를 가리킵니다.이 문제를 해결하기 위함이 ‘화살표 함수’ 이다.화살표 함수에서는 자동으로 한 단계 상위의 scope의 context를 바인딩한다.함..

1. EventDOM요소는 Event를 받고(수신) → 처리한다.Event처리는 주로 addEventListener()라는 Event 처리기를 html요소에 부착해서 처리한다.대상에 특정 EVENT가 발생하면, 할일을 등록한다.EventTarget.addEventListener(type, listener)EventTarget : Event를 지원하는 모든 객체(Element, Document, Window…)type : 반응할 이벤트 유형을 나타내는 대소문자 구분 문자열ex) input, click, submit …listener : 지정된 타입의 Event를 수신할 객체로 JavaScript function객체여야 한다.콜백 함수는 발생한 Event 데이터를 가진 Event 기반 객체를 유일한 매개변수..

DOM조작 순서는?⇒ 선택 → 조작 1. 선택 관련 메서드하나의 element 선택하기document.querySelector(selector)만족하는 첫번째 element 반환, 없다면 null 반환여러 element 선택하기document.querySelectorAll(selector)CSS selector를 만족하는 NodeList를 반환한다.반환 값은 정적 컬렉션이다 ⇒ DOM의 변경사항을 실시간으로 반영하지 않는다.실시간 반환을 원하면 Node.childnode 같은 다른 명령어를 사용하자.ex) DOM 조작 querySelector querySelectorAll Javascript Python console.log(document.querySelector('#title')) console.lo..

Browser APIs : 웹 브라우저에 내장 된 API로 복잡한 일을 수행하게 한다.→ 오늘은 그 중에서도 ‘DOM’ 을 공부한다.1. DOM?Document Object Model : 문서 객체 모델웹 페이지의 객체 지향 표현문서가 구조화 되어 있고 각 요소는 객체로 취급된다.DOM은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다.단순한 속성 접근, 메서드 활용 뿐만 아니라 프로그래밍 언어적 특성을 활용한 조작 가능2. WindowDOM을 표현하는 창Tab기능이 있는 창 하나하나가 다 Window이다.가장 최상위 개체3. Document브라우저가 불러온 웹페이지document는 window의 속성이다!!💡Parsing : 브라우저가 문자열을 해석해서 DOM Tree로 만드는 과정! Up..

1. 개요2. Object 관련 메서드1. 속성명 축약2. 메서드명 축약3. 계산된 속성4. 구조 분해 할당5. Spread syntax1. 개요객체는 속성의 집합이며, 중괄호 내부에 key와 value 쌍으로 이루어져있다.key : 문자열만 가능, 띄어쓰기 등의 구분자가 있으면 따옴표로 묶어서 표현value : 모든 타입 가능객체 요소 접근 : ‘.’ 또는 ‘[]’const mummur = {name:'mummur', age:25}; console.log(mummur.name) // mummur console.log(mummur['name']) //mummur2. Object 관련 메서드1. 속성명 축약객체를 정의할 때 key와 할당하는 변수 이름이 같으면, 축약할 수 있다.2. 메서드명 축약메서드 선..

1. forEach2. map3. filter4. reduce5. find6. some7. every1. forEach: 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행array.forEach((element, index, array){//do something})인자로 주어지는 함수를 배열의 각 요소에 대해서 한 번씩 실행한다.element: 배열의 요소index : 배열 요소의 인덱스array : 배열 자체반환값 없음 2. map: 콜백 함수의 반환 값을 요소로 하는 새로운 배열 한환array.map((element, index, array{//do something})배열의 각 요소에 대해서 콜백 함수를 한 번씩 실행콜백 함수의 반환 값을 요소로 하는 새로운 배열 반환⇒ 기존의 배열 전체를 다른 ..

1. 배열(Array)1. Declaration2. Index position3. append? push?4. shift & unshift5. splice6. Search!7. Join1. 배열(Array)키와 속성을 담고 있는 참조 타입의 객체순서를 보장한다1. Declaration[]를 이용하여 생성할 수 있다. ⇒ python이랑 완전 똑같아!!const arr1 = new Array(); const arr2 = [1,2];2. Index position 0 → 양의 정수로 인덱스 접근 가능 파이썬이랑 비슷!const fruits = ['apple', 'banana'] console.log(fruits) console.log(fruits.length) // 2 console.log(fruits[0]..

1. 함수의 정의1. 함수 선언식 (Function declaration)2. 함수 표현식 (Function expression)3. 화살표 함수 (Arrow Function)4. 즉시 실행 함수(IIFE)1. 함수의 정의1. 함수 선언식 (Function declaration)function func(a,b){ return a -b } func(7,2) // 5⇒ 변수의 var처럼 호이스팅이 발생한다.즉, 함수 호출 이후에 선언해도 동작한다.익명함수 불가능2. 함수 표현식 (Function expression)const func = function (a, b) { return a - b } func(1,2) // -1const func = function named_func(a, b) { return ..

1. 연산자 (Operators)1. String concatenation2. Assignment operators3. Increment, Decrement4. Comparison operators5. Logical operators6. Equality2. 조건문 (Conditional operators)3. 반복문(Loops)1. 연산자 (Operators)1. String concatenationconsole.log('my' + ' cat') // my cat console.log('1' + 2) // 122. Assignment operatorslet c = 0 c += 10 console.log(c)python과 마찬가지로, +=, -= 등을 지원한다. 연산자는 모두 같으니 기억하기 쉽다!3. I..

1. 식별자1. 식별자란?2. camelCase, PascalCase, SNAKE_CASE2. 변수1. const vs let2. var3. 데이터 타입1. 식별자1. 식별자란?변수를 구분할 수 있는 변수명반드시 문자, 달러 또는 밑줄로 시작한다.대소문자를 구분하며, 클래스 명 외에는 모두 소문자로 시작한다.예약어(ex. for, if, function …) 사용 불가능2. camelCase, PascalCase, SNAKE_CASEcamelCase : 변수, 객체, 함수에 사용PascalCase : 클래스, 생성자에 사용SNAKE_CASE : 상수에 사용2. 변수1. const vs let재선언재할당스코프letXO블록스코프read & writeconstXX블록스코프read only💡블록 스코프란?: 중..