허도경, limewhale

ES6 내용 중 이전에 정리를 했었지만 스스로 제대로 이해를 하지 못하고 있는 거 같아서 다시 한번 내용을 정리해 보려 합니다. 구조 분해 할당이란 배열이나 객체의 값을 원하는 개별 변수에 할당할 수 있습니다. 💡 Before : 배열/객체 데이터를 가져오는 방법 // 배열 let array = ["멍멍이", "냥냥이"]; let name1 = array[0]; let name2 = array[1]; // 객체 const animal = { name: '멍멍이', color: 'white' }; const name = animal.name; const color = animal.color; 💡 After : destructuring으로 배열/객체 데이터 가져오는 방법 // 배열 let [name1, na..

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. 아직은 구조 분해 할당이라는 말이 쉽게 이해되지 않으실 거예요. 그럼 예시를 한번 들어볼게요. 가령 배열에 1,2의 값이 있고 이 값을 변수 a, b에 각각 넣으려고 한다면 어떻게 하면 될까요? const array = [1,2]; const one = array[0]; const two = array[1]; console.log(one) //결과:1 console.log(two) //결과:2 위의 코드처럼 각 변수에 인덱스 값으로 접근해서 하나씩 값을 넣으면 변수에 값을 각각 넣을 수 있습니다. 하지만 위의 예제처럼 값이 2개가 아닌 수백 개, 수천 개의 배열이라면 저런 방..

ES6 클래스 문법은 ES6 이전에는 없던 문법입니다. ES6의 Class는 기존 prototype 기반의 상속을 보다 명료하게 사용할 수 있도록 도와줍니다. 그럼 Class는 도대체 무엇일까요? JavaScript에서 Class는 함수입니다. JavaScript는 class 키워드를 만나면 Class 오브젝트를 생성합니다. 함수 선언과 달리 클래스 선언은 호이스팅이 일어나지 않기 때문에, 클래스를 사용하기 위해서는 먼저 선언을 해야 합니다. 그렇지 않으면 ReferenceError 가 발생합니다. 클래스에서 사용되는 constructor는 클래스 인스턴스를 생성하고 생성한 인스턴스를 초기화하는 역할을 합니다. constructor가 없으면 인스턴스를 생성할 수 없습니다. 이전 클래스 개념이 없었을 때 ..

기존 함수 정의 방식 var a = function() { // ... }; 화살표 함수 정의 방식 var a = () => { // ... }; 화살표 함수는 ES6문법에서 함수를 표현하는 새로운 방식입니다. ES5의 function 함수와 비슷한 방식으로 동작하지만 몇 가지 차이점이 있습니다. // ES5 var add = function(x, y) {return x+y;} // ES6 let add = (x, y) => {return x+y}; ES5와 비교해보면 function이 사라졌고 그 자리를 => 함수가 대체했네요. 지금은 그것 말곤 크게 다른 게 없는 것 같죠? 우선 기본적인 화살표 함수 사용방법을 알아볼께요. // 매개변수 지정 방법 () => { ... } // 매개변수가 없을 경우 ..

ES6에서 새롭게 추가된 변수 선언 방식 let, const와 기존 ES5에서 사용하던 변수 var가 어떠한 차이점이 있고 어떻게 사용해야 하는지 알아보려고 합니다. 스크립트에서 값을 할당하는건데 그렇게 꼭 구분을 지어야 하나? 아무거나 사용하면 안 돼?라고 생각하시는 분들도 있을지 모르겠어요. 하지만 무엇이든 이유 없이 탄생하는 문법은 없고 새로운 문법이 탄생하는 이유는 지금보다 더 나은 코드를 사용하기 위해서이기 때문에 우리는 목적에 맞게 해당 문법을 사용해야 합니다. 기존 자바스크립트에서 변수를 선언하는 방식은 "var" 오직 하나였습니다. 처음에는 한 가지 방법으로만 사용하니 편하다고 생각할지도 모르지만 이 방법은 편안함보다는 코드상에서 더 큰 문제점들을 만들었습니다. ES5의 "var"에 대한 ..