본문 바로가기

FE/js

ES6 - 스프레드 오퍼레이터 스프레드 오퍼레이터는 특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 때 사용한다. 기존 자바스크립트의 객체 복제 방식 // 객체의 값을 복사하는 경우 var obj = { a : 10, b : 20 }; var newObj = { a : obj.a, b : obj.b }; console.log(newObj); // {a: 10, b: 20} // 배열의 값을 복사하는 경우 var arr = [1,2,3]; var newArr = [arr[0], arr[1], arr[2]]; console.log(newArr); // [1, 2, 3] 객체 복사 시 새로운 객체에 속성들을 선언하고 일일이 접근하여 대입해주어야 한다. 스프레드 오퍼레이터를 사용하면 타이핑할 코드의 양이 확연히 줄어든다. 스.. 더보기
ES6 - 향상된 객체 리터럴 기존 객체 정의 방식기존 객체 정의 방식은 다음과 같다. var dog = { name : 'khan', bark : function() { console.log('멍멍'); } }; 축약 방식 (1) 객체를 정의할 때 속성과 값이 같으면 아래와 같이 축약 가능 var name = 'khan'; var dog = { // name : name name }; console.log(dog); // {name : 'khan'} 축약 방식 (2) 속성에 함수를 정의할 때 function 예약어 생략 가능 const dog = { bark() { console.log('멍멍'); } }; dog.bark(); // 멍멍 더보기
ES6 - 화살표 함수 (Arrow Function) 화살표 함수 (Arrow Function) 기존의 함수 정의 방식 var a = function() { console.log('test'); }화살표 함수를 이용한 함수 정의 var a = () => { //... }; 화살표 함수 사용 예시// 화살표 함수를 이용한 함수 정의 var a = () => console.log('test'); // {} 필요 없음 a(); var b = () => { // 여러줄 일 때는 {} 사용 var name = 'gy '; var age = 26; return name + age; }; console.log(b()); //gy26 var c = (name, age) => { // 인자가 있을 때 console.log(name, age); }; c('gy', 26); .. 더보기
ES6 - const & let 새로운 변수 선언 방식 const와 let let- 한번 선언 시 재선언 불가let a = 10; let a = 20; // Identifier 'a' has already been declared - 물론 아래처럼 재할당은 가능하다.let a = 10;a = 20; const- 한번 값 할당 시 재할당 불가const a = 10;a = 20; // Uncaught TypeError : Assignment to constant variable - 객체나 배열로 선언 시 객체의 속성이나 배열의 요소는 변경 가능하다.// 객체const a = {name:'gy', age:26};console.log(a.name); // gya.name = 'test';console.log(a.name); // test //.. 더보기

티스토리툴바