Destructuring(구조 분해 할당) 특징 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식 JSON 규격의 객체나 배열은 쉽게 매핑하여 변수를 할당할 수 있고, 함수의 반환값을 여러 개로 할 수 있음 ES6 에서는 Destructing 을 통해 객체나 배열이 복잡하게 전달되는 함수들로 인하여 변수를 할당하고 속성에 접근해야할 때, 간편하게 할당 및 정의 예제) let num1, num2, rest; [num1, num2] = [100, 200] console.log(num1); console.log(num2); [num1, num2, ...rest] = [100, 200, 300, 400, 500]; console.log(rest); con..

템플릿 리터럴 문자열 표현식 특징 기존에 없었던 새로운 기능 역따옴표(`) 사용 변수 사용의 편리성 여러 줄의 문자열의 경우, "\n" 을 넣어 개행 예제) Name : 태그로 입력 시, change 이벤트 핸들럴를 통해 별도의 태그에 보여줌 역따옴표(`)의 변수 설정은 ${} 안에서 이루어지며, 일반 변수 뿐만 아니라 함수 호출이나 계산식 등을 넣을 수 있음 예제) (() => { function Test(strings, ...values) { console.log(strings); console.log(values); return "Test" } var str = "World"; console.log(Test `Test, ${str}!\n${2 * 2 + 2} End`); })(); -- 출력 결과 ..

화살표 함수(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. 콜백 함수에서의 컨텍스트 콜백함수로 실행될 때 기존의 익명 함수는 글로벌 컨텍스트에 접근 화살표 함수의 경우 콜백 함수를 할당한 당시의 컨텍스트를 그대로 활용 객체지향..

키워드 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..

메서드 빌려쓰기 - 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'); --..

스코프와 클로저 스코프 현재 접근할 수 있는 변수들의 범위 어떠한 변수가 스코프 안에 선언되었으면 해당 스코프 안에서 변수에 접근해서 읽거나 쓸 수 있고, 스코프 밖에서는 해당 변수에 접근할 수 없음. 예제) DIV 0 DIV 1 DIV 2 -- 출력 결과 -- DIV0 클릭 : Clicked Div2 DIV1 클릭 : Clicked Div2 DIV2 클릭 : Clicked Div2 설명 버튼 클릭 시 예상과는 다른 결과 도출. 이러한 원인은 스코프가 생성되고 유지되는 방법에서 발생되는 문제. ②에서 각각의 이벤트 핸들러를 위한 콜백 함수가 변수 i에 선언된 변수들에 접근할 수 있는 스코프 생성. 변수 i는 글로벌 스코프에 존재. 모두 같은 스코프의 변수 i를 참조. for-loop 를 통해서 각각의 d..