개발자 용어
- 런타임 // 코드가 돌아가는 환경
- AS IS 기존
- TO BE 이후
데이터 타입
기본형 = Number, String, Boolean, null, undefined, Symbol // 값이 담긴 주소값을 바로 복제(불변o)
// 나누는 기준 - 값의 저장방식과 불변성 여부
참조형(어떤 곳을 바라본다) = Array, Function, Date, RegExp, Map, set // 주소값을 복제(불변x)
변수 = 데이터
식별자 = 변수명
숫자 = 8byte 한글 = 2byte 영문 = 1byte
- 변수영역과 데이터영역은 참조형영역 서로 달리 보관한다.
복사된 객체는 같은 데이터를 가리키므로 객체 메모리 공간을 갈아끼워주면 새로운 객체를 보관하는 메모리가 생기므로 복사된 원래 객체 데이터 참조를 하지 않는다.
객체의 메모리 주소와 객체의 데이터가 다른 곳에 담긴다.
실행 컨텍스트(Execution context)는 우리가 작성한 코드가 실행되는 환경을 말하며, scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리를 말한다.
- 실행할 코드에 제공할 환경정보 (객체)
- VariabledErvironment , LexicalEnvironment, ThisBindigs
- 자바스크립트는 콜스택(LIFO) 늦게 들어간 게 첫번째로 나온다.
// 함수를 실행하면 밑으로 쌓이는데 마지막에 들어온 것이 실행되고 그 다음 들어가 있던 것을 실행한다. - record 식별자(변수NAME) 모음
- 호이스팅(끌어올린다)
// 함수, 매개변수, 식별자(변수NAME)을 위에 올리고 차례차례 실행한다. - 함수 선언식 호이스팅 전체 영역에 영향을 미친다.
- 함수 표현식 호이스팅 변수에만 영향을 미친다.
- var a = 1; // 전역 컨텍스트
function outer () { // outer 컨텍스트
function inner () { // inner 컨텍스트
console.log(a);
var a = 3;
console.log(a);
}
inner(); // inner가 실행될 때 outer의 LexcicalEnvironemnt를 outerEnvironmentReference로 참조한다.
console.log(a);
}
outer(); // outer가 실행될 때 전역 컨텍스트의 LexcicalEnvironemnt를 outerEnvironmentReference로 참조한다.
console.log(a);스코프
- 식별자에 대한 유효범위
스코프체인
- 식별자의 유효범위를 안에서부터 바깥으로 차례로 검색한다.
- 스코프가 어떻게 연결(chain)되고 있는지 보여주는 것
- console.dir()을 사용하면, 개발자 도구로 쉽게 확인이 가능하다.
- 아우터 함수 내의 이너 함수가 찾는 변수가 있다면 아우터 함수 내의 변수를 찾아내고, 없다면 전역 변수를 찾아낸다. (안에서 바깥으로)
객체 method
- Array.from(obj) // 객체를 value 배열로 반환한다.
this(호출의 주체가 있냐 없냐)
- 함수 표현식과 선언식의 가장 두드러진 차이점은 thisbinding의 여부이다.
- 브라우저 상에서 this = window
- node 상에서 this = global
- 독립적으로 사용하는 함수는 this가 window를 가리킨다.
- 주체가 필요한 method는 this가 그 객체를 가리킨다.
- 화살표 함수는 this binding을 생략한다.
- 콜백 함수는 this가 window를 가리킨다. 단, addEventlistenr(click)은 그것(button)을 가리킨다.
- 생성자 함수 내부에서의 this가 그 생성 객체를 가리킨다.
var Cat = function (name, age) { this.bark = '야옹'; this.name = name; this.age = age; }; var choco = new Cat('초코', 7); //this : choco var nabi = new Cat('나비', 5); //this : nabi
- 명시적 this binding
// call, apply, bind - call은 this를 객체로 받는다.
- apply는 this를 객체로 받고 그 이후는 배열로 받는다.
- bind는
// 1. 함수에 this를 미리 적용한다.
// 2. 부분 적용 함수
// 함수에 this 미리 적용
var bindFunc1 = func.bind({ x: 1 }); // 바로 호출되지는 않아요! 그 외에는 같아요.
bindFunc1(5, 6, 7, 8); // { x: 1 } 5 6 7 8
// 부분 적용 함수 구현
var bindFunc2 = func.bind({ x: 1 }, 4, 5); // 4와 5를 미리 적용
bindFunc2(6, 7); // { x: 1 } 4 5 6 7
bindFunc2(8, 9); // { x: 1 } 4 5 8 9
개발 경험치 쌓는 곳