Jerry

자바스크립트에서 함수 호출 방식에 따라(어떻게 호출되었는지에 따라) this에 바인딩되는 객체가 동적으로 달라진다. 수의 상위 스코프를 결정하는 방식인 렉시컬 스코프(Lexical scope)는 함수를 선언할 때 결정된다. this 바인딩과 혼동하지 않도록 주의하기 바란다. 함수의 호출하는 방식 1. 함수 호출 2. 메소드 호출 3. 생성자 함수 호출 4. apply/call/bind 호출 var foo = function () { console.dir(this); }; // 1. 함수 호출 foo(); // window // window.foo(); // 2. 메소드 호출 var obj = { foo: foo }; obj.foo(); // obj // 3. 생성자 함수 호출 var instance = ..

동기식 처리 모델(Synchronous processing model) 직렬적으로 태스크(task) 수행한다 태스크는 순차적으로 실행되며 어떤 작업 수행 중이며 다음 작업은 대기한다 서버에서 데이터 요청을 받아 화면에 표시하는 작업 수행 시, 서버에 데이터 요청 후 응답될 때까지 태스크들은 블로킹(blocking, 작업 중단)이 된다. function first() { console.log('first'); second(); } function second() { console.log('second'); third(); } function third() { console.log('third'); } first(); 비동기식 처리 모델(Asynchronous processing model / Non-Blo..

let과 const 호이스팅 + TDZ(Temporal Dead Zone) let과 const로 선언한 변수도 호이스팅 대상이다. 호이스팅 시 let은 undefined로 변수 초기화 하지 않음 이 상태에서 선언한 let 키워드 호출 ⇒ 예외 발생 (에러) | 에러 발생 이유: 일시적 사각지대(TDZ: Temporal Dead Zone) 변수 스코프의 맨 위에서 변수의 초기화 완료 시점까지의 변수는 "일시적 사각지대"(Temporal Dead Zone, TDZ)에 들어간 변수라고 표현 TDZ인 이유는 사각지대가 코드의 작성 순서(위치)가 아니라 코드의 실행 순서에 의해 형성되기 때문 // TDZ Example function do_something() { console.log(bar); // undefi..

var 키워드 Scope of var : var 키워드의 범위 범위는 기본적으로 변수를 사용할 수 있는 위치 의미 var 선언은 전역 범위 혹은 함수 범위로 지정 var 변수가 함수 외부 선언 => 범위는 전역 (전체 윈도우 상) var 변수가 함수 내부 선언 => 범위는 함수 블록 내부 var hello = 'a'; function person() { var world = 'b'; } console.log(world); // world is not defined console.log(hello); // hello var의 호이스팅 호이스팅이란 변수와 함수 선언이 맨 위로 이동되는 자바스크립트 매커니즘 = 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것 console.log (gre..

var 호이스팅 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것 var 로 선언한 변수의 경우 호이스팅 시 undefined로 변수 초기화 var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이뤄진다 let과 const로 선언한 변수의 경우 호이스팅 시 초기화하지 않음 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것 변수 정의 코드보다 사용 코드가 앞서 등장할 수 있음 함수 선언도 위와 동일 // #1 Case function catName(name) { console.log("제 고양이의 이름은 " + name + "입니다"); } catName("호랑이"); /* 결과: "제 고양이의 이름은 호랑이입니다" */ // #2 Case catName..

기본적으로 태그 내부의 값을 선택할 때는 textContent를 사용하는 게 맞지만, 입력 태그만 value를 사용합니다. input은 대표적인 입력 태그입니다. 다른 입력 태그로는 select와 textarea가 있습니다. 입력태그.value // 입력창의 값을 가져옴 입력태그.value = 값 // 입력창에 값을 넣음 입력태그.focus() // 입력창을 하이라이트 다음 태그들의 내부 값을 가져올 때 둘 중 어떤 속성을 사용해야 하는지 표시해 보세요. ① input (value / textContent) => input.value https://www.w3schools.com/tags/att_input_value.asp HTML input value Attribute W3Schools offers f..

객체 객체(object)는 자료형의 일종으로 다양한 값을 모아 둔 또다른 값입니다. 객체의 종류는 크게 배열(array), 함수(function), 배열이나 함수가 아닌 객체로 나눌 수 있습니다. 배열 맨 앞에 값을 추가하려면 unshift라는 기능 배열 맨 뒤에 값을 추가하려면 push라는 기능 배열 맨 뒤에 값을 제거하려면 pop이라는 기능 배열 맨 앞에 값을 추가하려면 unshift라는 기능 배열 중간 또는 원하는 위치의 값을 추가/제거 하려면 splice라는 기능 배열 안의 요소를 찾으려면 includes라는 기능 (true / false) 배열 안의 임의 값의 위치를 찾으려면 indexOf / lastIndexOf라는 기능 const인데 수정 가능한 이유는 뭔가요? const에는 새로운 값을 대..

논리연산자 !연산자: 식 앞에 !를 붙이면 반대 논리값으로 변한다 이 성질을 이용해 다른 자료형을 불 값으로 형 변환할 수도 있습니다. ! 연산자를 연이어 두 번 쓰면 됩니다. > !!'a'; !!false !!'' !!0 !!NaN !(2 !2 < 0; < false ※ 연산자 우선순위 | MDN 연산자 우선순위 - JavaScript |..