웹(56)
-
화살표 함수(Arrow Function)
화살표 함수(Arrow Function) 특징 간결해진 코드 작성 콜백 함수에서의 컨텍스트 1. 간결해진 코드 작성 익명 함수를 표현 할 때 간단하게 표현 예제) // ES5 function Test(x) { return x * x; }; var arr = [1, 2, 3]; var Test2 = arr.map(function (x) { return x * x; }); // ES6+ const Test = (x) => x * x ; const arr = [1, 2, 3]; const Test2 = arr.map(x => x * x); 2. 콜백 함수에서의 컨텍스트 콜백함수로 실행될 때 기존의 익명 함수는 글로벌 컨텍스트에 접근 화살표 함수의 경우 콜백 함수를 할당한 당시의 컨텍스트를 그대로 활용 객체지향..
2020.04.07 -
키워드 var, let, const 차이점
키워드 var, let, const 차이점 1. 변수의 유효 범위 함수 레벨 스코프(Function-level Scope) 함수의 코드 블럭만을 스코프로 인정 전역 함수 외부에서 생성한 변수는 모두 전역 변수 for 문의 변수 선언문에서 선언한 변수를 for 문의 코드 블록 외부에서 참조 가능 블럭 레벨 스코프 (Block-level Scope) 모든 코드 블럭(function, if, for, while, try/catch 등) 내에서 선언된 변수는 코드 블럭 내에서만 유효 블럭 외부에서는 참조 못함 코드 블럭 내부에서 선언한 변수는 지역 변수 키워드 VAR ES6 이전에 사용하던 변수 함수 레벨 스코프(Function-level Scope) 키워드 LET ES6 이후에 나온 변수 블럭 레벨 스코프(B..
2020.04.07 -
call, apply, bind 메서드
메서드 빌려쓰기 - call, apply, bind call 과 apply 첫번째 인자로 실행할 대상 함수의 this 값을 대체할 다른 객체를 전달 받음 두번째 인자로 call 함수의 경우 호출할 함수에 전달할 매개변수를 별개의 인자들로 받으며, apply 함수의 경우 call 과 다르게 함수에 전달할 매개변수를 배열로 받음 예제 const Jack = { name: 'Jack', }; const info = function(age, city) { console.log(this); console.log(`name : ${this.name}, age : ${age}, city: ${city}`); }; info(12, 'Daegu'); -- ① info.call(Jack, 12, 'Incheon'); --..
2020.03.10 -
스코프와 클로저
스코프와 클로저 스코프 현재 접근할 수 있는 변수들의 범위 어떠한 변수가 스코프 안에 선언되었으면 해당 스코프 안에서 변수에 접근해서 읽거나 쓸 수 있고, 스코프 밖에서는 해당 변수에 접근할 수 없음. 예제) DIV 0 DIV 1 DIV 2 -- 출력 결과 -- DIV0 클릭 : Clicked Div2 DIV1 클릭 : Clicked Div2 DIV2 클릭 : Clicked Div2 설명 버튼 클릭 시 예상과는 다른 결과 도출. 이러한 원인은 스코프가 생성되고 유지되는 방법에서 발생되는 문제. ②에서 각각의 이벤트 핸들러를 위한 콜백 함수가 변수 i에 선언된 변수들에 접근할 수 있는 스코프 생성. 변수 i는 글로벌 스코프에 존재. 모두 같은 스코프의 변수 i를 참조. for-loop 를 통해서 각각의 d..
2020.03.05 -
스코프 체인
스코프 체인의 의미 자바스크립트에서는 함수 내의 블록(for, if)와 같은 구문은 유효 범위가 없으며, 오직 함수만이 유효 범위의 한 단위가 됨. 이 유효 범위를 나타내는 스코프 [[scope]] 프로퍼티로 각 함수 객체 내에서 연결 리스트 형식으로 관리되는데 이를 스코프 체인이라고 함. 각각의 함수는 [[scope]] 프로퍼티로 자신이 생성된 실행 컨텍스트의 스코프 체인을 참조 함수가 실행되는 순간 실행 컨텍스트가 만들어지고, 이 실행 컨텍스트는 실행된 함수 [[scope]] 프로퍼티를 기반으로 새로운 스코프 체인을 형성. 전역 실행 컨텍스트의 스코프 체인 var var1 = 1; var var2 = 2; console.log(var1); console.log(var2); 설명 코드가 실행되면, 전역..
2020.03.05 -
실행 컨텍스트
실행 컨텍스트 1. 실행 컨텍스트 개념 ESMAScript에서는 실행 컨텍스트를 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념으로 기술. 콜스택(Call Stack)과 연관하여 정의하면 실행 가능한 자바스크립트 코드 블록이 실행되는 환경, 이 컨텍스트 안에 실행에 필요한 여러 가지 정보가 담김. ※ 콜스택(Call Stack) 함수를 호출할 때 해당 함수의 호출 정보(C언어를 예를 들면, 함수의 호출 정보 등으로 함수 내의 지역 변수 혹은 인자값 등)가 차곡차곡 쌓여있는 스택을 의미 실행 컨테스트의 생성의 의미 현재 실행되는 컨텍스트에서 이 컨텍스트와 관련없는 실행 코드가 실행되면, 새로운 컨텍스트가 실행되어 스택에 들어가고 제어권이 그 컨텍스트로 이동. 예제) console.log("This i..
2020.03.05