배워가는블로거

■ ES6의 객체와 배열 ES6의 객체와 배열을 다루기 위한 다양한 방법이 있습니다. 그 중에서 구조 분해, 객체 리터럴 개선, 스프레드 연산자 사용법을 정리하겠습니다. ● 구조 분해 (Destructuring) 구조 분해를 통해 객체 안의 필드 값을 사용할 수 있고, 원하는 변수에 대입할 수 있어요 먼저 객체의 구조 분해를 살펴보겠습니다. 예시로 객체를 하나 만들어 볼게요 var car = { color: "black", engine: "turbo", type: "SUV"} 위와 같이 3개의 필드를 가지는 car 객체가 있다고 가정하겠습니다. 여기서 color 필드의 값을 가져와 변수로 사용하고자 합니다. 방법은 아래와 같이 간단하며, 변수의 값을 변경해도 원래 필드의 값은 변경되지 않습니다. car ..

■ 화살표 함수 (arrow function) ES6에서 유용하게 사용되는 화살표 함수에 대해서 보겠습니다. 화살표 함수를 사용하면 함수 키워드 없이도 함수를 만들고, return 없이도 계산 결과가 자동으로 반환이 됩니다. 위 모습이 화살표 함수의 기본 모습이라고 할 수 있습니다. 다만, 파라미터가 단 하나인 경우는 괄호를 생략해도 됩니다. ● 비교 기존 사용하는 함수 형태와 화살표 함수의 형태를 비교해보겠습니다. var printText = function(txt) { return '입력 : ${txt}'}var printText = txt => '입력 : ${txt}' 한 줄로 간략하게 줄어든 것이 보이나요? 파라미터가 2개의 경우도 보겠습니다. var printText = function(txt1..

■ ES6 변수 선언 기존 ES6 이전에서는 var를 통해 변수를 선언하여 사용했습니다. 하지만 최신 자바스크립트라 불리는 ES6부터는 다양한 방법이 추가되었는데요. 그 추가된 방법에 대해서 간단하게 정리해보겠습니다. ● const const는 값을 변경할 수 없는 변수입니다. ES6에서는 const를 도입하여 값을 재설정하는 것이 불가능하도록 하였습니다. 만약 이를 아래와 같이 시도한다면 콘솔오류가 발생합니다. const isChecked = true;isChecked = false; ● let let을 통해 함수 레벨과 블록 레벨의 렉시컬 스코프 규칙을 지원합니다. 즉 if문과 같은 {} 블록 안에서 let은 변수 영역을 그 블록 안으로 한정시킵니다. 즉 블록 밖의 값에 영향을 끼치지 않아 글로벌 변..