ES65 [ JavaScript ] ES6 : 비구조화 할당(Destructuring) 1. 비구조화 할당(Destructuring assignment) : 객체 또는 배열에서 데이터를 분석해 각각의 변수에 할당해주는 것. destructuring 을 사용하면 json 형식의 객체나 배열을 쉽게 변수에 할당할 수 있다. let data = [{ id : 1, arr: [{ name : ['철보빡','열공'], age : 100 }] }]; let [{id, arr:[{name, age}]}] = data; console.log(` id : ${id} age : ${age} `); let 선언자 옆에 배열 표현식으로 동일하게 배치만 해주면 된다. 배열이 아닌 객체도 객체 표현식으로 할당 가능하다. 함수의 리턴값도 비 구조화 할당을 통해 여러 변수로 받을 수 있다. function color(.. 2021. 2. 15. [ JavaScript ] ES6 : 템플릿 문자열 표현식 | 백틱 ES6 에서는 템플릿 문자열 기능이 도입되었다. 1. 템플릿 문자열 표현식 기존의 싱글쿼테이션 ('철보빡') 과 더블퀘테이션("철보빡") 이 아닌, 백틱 문자를 사용해 문자열을 여닫는 것을 템플릿 문자열 표현식이라고 한다. 여기서 백틱 문자는 ESC 키 밑에 있는 따옴표를 의미한다. ES5에서는 개행문자, 병합등을 이용해 변수나 상수 안에 문자열을 넣었다. var test = 'test:'+'tt'+'\ntest2:'+'tt2'; console.log(test); ES6 에서는 이를 ${} 로 표현할 수 있다. let test='tt'; let test2='tt2'; console.log(` test : ${test} test2 : ${test2} `); 결론짓자면, 백틱 (`) 내에 멀티라인 스트링을 .. 2021. 2. 15. [ JavaScript ] ES6 : TDZ (Temporal Dead Zone) | let 참조에러 1. let 참조 에러 아래는 이전 포스팅에서 사용했던 코드이다. let test = '1'; if(true){ let test = '2'; console.log(test); }; console.log(test); 이 코드를 실행하면 아래와 같은 결과를 얻는다. 아래와 같이 코드를 변경했다. let test = '1'; if(true){ console.log(test); let test = '2'; }; console.log(test); 아래와 같은 결과가 출력된다. 만약 호이스팅이 없었다면 3번째 test 를 출력하는 과정에서 전역스코프의 값인 1 이 출력되었을 것이다. 그렇지만, 블록스코프 안에 선언된 test(,4번라인 test)가 호이스팅 되어 해당 블록 스코프의 최상단에 test 변수가 선언되게.. 2021. 2. 15. [ JavaScript ] ES6 : Block scope | var, let 변수 유효범위 1. Scope : 변수의 유효범위. var 의 변수 유효범위 => 블록 스코프가 아닌 function 스코프이다. var num = 1; function printNum(){ console.log(num); var num = 2; console.log(num); }; printNum(); //2 function 레벨에서 호이스팅이 발생하고 있는 것을 확인할 수 있다. 호이스팅 : var, let, const 등 모든 선언문이 올려져 해당 변수가 속한 스코프의 최상단으로 올리는 현상. 함수가 아닌 블록일 경우의 예를 보겠다. var test = '1'; if(true){ var test = '2'; console.log(test); }; console.log(test); 2 가 두 번 출력되는 것을 알 .. 2021. 2. 15. 이전 1 2 다음
