누가봐도 인생 1회차의 기록장

개발공부/JavaScript 책 45

코어 자바스크립트 #05 (콜백함수)

콜백함수 콜백함수callback function : 다른 코드의 인자로 넘겨주는 함수 콜백함수는 제어권과 관련이 깊다. '부르다, 호출(실행)하다'의 의미인 call과 '되돌아오다, 되돌다'의 back의 합성어로 '되돌아 호출하라'는 명령이다. 어떤 함수 X를 호출하면서 '특정 조건일 때 함수 Y를 실행해서 알려달라'는 요청을 함께 보내는 것. 이처럼 콜백 함수는 다른 코드 (함수 또는 메서드)에게 인자를 넘겨줌으로써 그 제어권도 함께 위임한 함수이다. 제어권 호출 시점을 스스로 판단해서 실행 (setInterval) 인자로 넘겨줄 값들 및 그 순서가 정해져 있음 (map 메서드) this : 콜백함수도 함수이기 때문에 기본적으로는 this가 전역객체를 참조하지만, 제어권을 넘겨받을 코드에서 콜백 함수에..

코어 자바스크립트 #04 (this - 2 명시적으로 this를 바인딩하는 방법)

call 메서드 메서드의 호출 주체인 함수를 즉시 실행하도록 하는 명령. 이때 call 메서드는 첫 번째 인자를 this로 바인딩하고, 이후의 인자들을 호출할 함수의 매개변수로 한다. 함수를 그냥 실행하면 this는 전역객체를 참조하지만 call 메서드를 이용하면 임의의 객체를 this로 지정할 수 있다. (메서드도 동일. 그냥 호출하면 this는 객체 참조, call 메서드를 이용하면 임의의 객체를 this로 지정) apply 메서드 call 메서드와 기능적으로 완전히 동일하지만 call 메서드는 첫번째 인자를 제외한 나머지 모든 인자들을 호출할 함수의 매개변수로 지정하는 반면, apply 메서드는 두 번째 인자를 배열로 받아 그 배열의 요소들을 호출할 함수의 매개변수로 지정한다. call / appl..

코어 자바스크립트 #03 (this - 1 상황에 따라 달라지는 this)

양치기 공부스타일이 맞는 건지 처음 봤을 땐 하나도 이해 못 했던 내용들이 여러 강의랑 책이랑 번갈아가면서 공부하니까 제법 용어들도 눈에 익고 어느 정도 이해된다 (한.. 5%..? ㅎㅎ) 다음번에 볼 때는 이 내용들이 더 친근하게 와닿길..! this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정되는데, 실행 컨텍스트는 함수를 호출할 때 생성된다. 즉, this는 함수를 호출할 때 결정된다. 함수를 어떤 방식으로 호출하느냐에 따라 값이 달라지는 것이다. 전역 공간에서의 this 전역 공간에서의 this는 객체를 가리킨다. 개념상 전역 컨텍스트를 생성하는 주체가 바로 전역 객체이기 때문이다. 전역 객체는 자바스크립트 런타임 환경에 따라 다른 이름과 정보를 가지고 있는데, 브라우저 환경에서 전역 객체는..

코어 자바스크립트 #02 (실행 컨텍스트, 호이스팅, 스코프 체인)

남들이 봤을 때도 딱 알아보기 쉽게 정리하고 싶은데 (그래야 내가 나중에 다시 보기에도 쉽고) 정리가 너무 조잡한 거 같네.. ㅠㅠ 스코프, 스코프 체인 개념은 다시 봐도 어렵다 헿^^ 실행 컨텍스트 실행 컨텍스트execution context : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 스택 : 출입구가 하나뿐인 깊은 우물 같은 데이터 구조, 저장할 수 있는 스택이 넘칠 때 에러가 남 (ex. 데이터를 a, b, c, d 순으로 저장했다면 d, c, b, a 순으로 꺼냄, 후입 선출) 이것이 스택오버플로우의 그 '스택'!! 큐 : 파이프처럼 양쪽에 입구와 출구가 있는 구조 (ex. 데이터를 a,b,c,d 순으로 저장했다면 a, b, c, d 순으로 꺼냄, 선입선출) 동일한 환경에 있는 코드들을..

코어 자바스크립트 #01 (데이터 타입)

인사이드 자바스크립트 후반부(프로토타입 체이닝 실행컨텍스트 스코프체인 클로저 등)는 거의 이해가 안되길래 책을 바꿔서 공부하고 다시 돌아가서 보려고 한다ㅎㅎ 목차를 보니 마침 내가 이해 못했던 부분 위주로 구성돼있음! 어차피 이쪽 책은 꾸준히 봐야 되니까...! 이것도 이해 못하면...? ㄱㅊㄱㅊ~! 다음 책 또 찜해놓음^^ . . 그런데... 그것이 일어나고야 말았다 저번책보다 더.. 어려운 책인 것 같다.. ㅎㅎ; 예제로 나오는 코드 이해를 못하겠어 ㅠ^ㅠ 데이터 타입의 종류 기본형(원시형Primative type) : 숫자number, 문자열string, 불리언boolean, null, undefined, 심볼Symbol(ES6 추가) 할당이나 연산시 복제 값이 담긴 주솟값을 바로 복제 불변성imm..

인사이드 자바스크립트 #10 (실행 컨텍스트와 스코프 체인)

실행 컨텍스트 개념 함수를 호출할 때 해당 함수의 호출 정보가 차곡차곡 쌓여있는 스택을 콜 스택call stack 이라 한다. 실행 컨텍스트는 콜 스택에 들어가는 실행 정보 하나와 비슷하다. 실행 컨텍스트는 "실행 가능한 코드를 형상화하고 구분하는 추상적인 개념" 으로 콜스택과 연관하여 정의하면 "실행 가능한 자바스크립트 코드 블록이 실행되는 환경" 이라고 할 수 있고, 이 컨텍스트 안에 실행에 필요한 여러가지 정보를 담고 있다. 여기서 말하는 실행 가능한 코드 블록은 대부분의 경우 함수가 된다. “현재 실행되는 컨텍스트에서 이 컨텍스트와 관련 없는 실행 코드가 실행되면 새로운 컨텍스트가 생성되어 스택에 들어가고 제어권이 그 컨텍스트로 이동한다. ” 실행 컨텍스트 생성 과정 활성 객체 생성 > argum..

인사이드 자바스크립트 #09 (프로토 타입 체이닝)

프로토타입의 두가지 의미 자바스크립트의 모든 객체는 자신의 부모인 프로토타입 객체를 가리키는 참조 링크 형태의 숨겨진 프로퍼티가 있다. 이러한 링크를 암묵적 프로토타입 링크implicit prototype link 라고 부르며 이러한 링크는 모든 객체의 [[Prototype]] 프로퍼티에 저장된다. 주의해야 할 점은 prototype 프로퍼티와 객체의 숨은 프로퍼티인 [[Prototype]] 링크를 구분해야 한다는 점이다. 자바스크립트에서 모든 객체는 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 프로토타입 객체를 자신의 부모 객체로 설정하는 [[Prototype]] 링크로 연결한다. 객체 리터럴 방식으로 생성된 객체의 프로토타입 체이닝 자바스크립트에서 객체는 자기 자신의 프로퍼티뿐만..

인사이드 자바스크립트 #08 (함수 호출과 this, 함수리턴) ☆★

함수호출 함수를 호출하여 코드를 실행하는 것 arguments 객체 C와 같은 엄격한 언어와 달리 자바스크립트에서는 함수를 호출할 때 함수 형식에 맞춰 인자를 넘기지 않더라도 에러가 발생하지 않는다. 정의된 함수의 인자보다 적게 함수를 호출했을 경우 : 넘겨지지 않은 인자에게 undefined 값이 할당 정의된 인자 개수보다 많게 함수를 호출 했을 경우 : 에러가 발생하지 않고, 초과된 인수는 무시 이러한 특성 때문에 함수 코드를 작성할 때, 런타임 시에 호출된 인자의 개수를 확인하고 이에 따라 동작을 다르게 해줘야할 경우가 있는데, 이를 가능케 하는 것이 바로 arguments 객체이다. arguments 객체는 매개변수 개수가 정확하게 정해지지 않은 함수를 구현하거나, 전달된 인자의 개수에 따라 서로..

인사이드 자바스크립트 #07 (함수 객체, 함수의 다양한 형태)

함수 객체 자바스크립트에서는 함수도 객체다 함수의 기본 기능인 코드 실행뿐만 아니라, 함수 자체가 일반 객체처럼 프로퍼티들을 가질 수 있다는 것이다. 자바스크립트에서 함수는 값으로 취급된다 자바스크립트에서는 함수도 일반 객체처럼 취급될 수 있다. 때문에 자바스크립트 함수는 다음과 같은 동작이 가능하다. 리터럴에 의해 생성 변수나 배열의 요소, 객체의 프로퍼티 등에 할당 가능 함수의 인자로 전달 가능 함수의 리턴값으로 리턴 가능 동적으로 프로퍼티를 생성 및 할당 가능 이와 같은 특징이 있으므로 자바스크립에서는 함수를 일급First Class 객체라고 부른다. 자바스크립트 함수의 기능은 입력한 값을 받아 처리한 다음 그 결과를 반환하는 구조다. 하지만 이러한 기본적인 기능 외에도 함수가 일급 객체이며 이는 ..

인사이드 자바스크립트 #06 (함수정의)

자바스크립트에서의 함수를 생성하는 방법은 3가지가 있다 함수 선언문 function statement 함수 표현식 function expression Function() 생성자 함수 함수 리터럴 자바스크립트에서는 함수도 일반 객체처럼 값으로 취급된다. 때문에 객체 리터럴 방식으로 일반 객체를 생성할 수 있는 것처럼 자바스크립트에서는 함수 리터럴을 이용해 함수를 생성할 수 있다. 함수 리터럴은 크게 네 부분으로 구성된다. function add (x, y) { return x + y; } ① function 키워드 : 자바스크립트 함수 리터럴은 function 키워드로 시작한다. ② 함수명 : 함수명은 함수 몸체 내부코드에서 자신을 재귀적으로 호출하거나 자바스크립트 디버거가 해당함수를 구분하는 식별자로 사..