Spread Operator
...target 방식으로 사용
값을 복사하기 위해 사용
배열
let years = [2001,2010,2015,2018]; let yearsCp = [...years]; console.log(yearsCp);
JavaScript
객체
let koreaHistory = { liberate : 1945, 625 : 1950 }; let history = { worldwar1 : 1914, worldwar2 : 1945, ...koreaHistory } console.log(history);
JavaScript
defualt값을 설절해주고싶을때 사용
let address1 = { country : "South Korea", city : "Seoul" }; let address2 = { ...address1, country : "United State" } console.log(address2);
JavaScript
Rest Operator
파라미터로 Spread Operator 를 받아서 사용
function printYears(...years){ console.log(years); } printYears(2000, 2001, 2010, 2015, 2018);
JavaScript
// 결과 [ 2000, 2001, 2010, 2015, 2018 ]
JavaScript
과거코드와 비교
// 과거 function printYears(years){ console.log(arguments); } printYears(2000, 2001, 2010, 2015, 2018);
JavaScript
//결과 [Arguments] { '0': 2000, '1': 2001, '2': 2010, '3': 2015, '4': 2018 }
JavaScript

'Web 개발 > JS ' 카테고리의 다른 글

[jQuery] 엔터로 로그인하기  (0) 2019.06.26
ES6 : async & await  (0) 2019.06.08
ES6 : 비구조화  (0) 2019.06.08
ES6 : Arrow Function, Default Params  (0) 2019.06.08
ES6 : import & export, Classes  (0) 2019.06.08
문자열 표기법
` ` 식으로 표현하여 문자열에 변수를 추가
const val1 = 'my String1'; const val2 = 'my String2'; const litVal = `${val1}, ${val2}`;
JavaScript
비구조화
객체 비구조화
객체를 풀어서 바로 변수로 선언
: 을 활용하여 변수명 변경 가능
const address = { country : 'South Korea', city : 'Seoul', street : 'Gangnam', str_num : 141, postcode :'0015' } const {country,city} = address; console.log(`${country}, ${city}`); //rename const {country:a,city:b} = address; console.log(`${a}, ${b}`);
JavaScript
배열 비구조화
배열의 순서대로 변수 선언
const [firstCountry,secondCountry] = ['Japan','SouthKorea', 'America']; console.log(firstCountry,secondCountry); const [thirdCountry] = ['Japan','South Korea', 'America']; console.log(thirdCountry);
JavaScript
객체 리터럴
객체안에서의 키와 벨류가 동일하다면 다음과 같이 사용해도 된다. (배열과 유사한 모습으로 선언)
//객체 리터럴, Object Literal function getAddress(country, city, street){ const myAddress = {country, city, street}; console.log(myAddress); } function getAddressOrigin(country, city, street){ const myAddress = { country:country, city:city, street:street }; console.log(myAddress); } getAddress('Japan','South Korea', 'America'); getAddressOrigin('Japan','South Korea', 'America');
JavaScript

'Web 개발 > JS ' 카테고리의 다른 글

ES6 : async & await  (0) 2019.06.08
ES6 : Spread, Rest Operator  (0) 2019.06.08
ES6 : Arrow Function, Default Params  (0) 2019.06.08
ES6 : import & export, Classes  (0) 2019.06.08
ES6 : Map & Set  (0) 2019.06.08
Arrow Function
function (e) {
return "return "
//es5 function (e) { return "return " } //es6 (e)=> "return"
JavaScript
예제코드
const years = [ { year : 2000, date : '크리스마스' }, { year : 2001, date : '롤리팝' }, , { year : 2010, date : '안드로이드' }, { year : 2015, date : '리액트네이티브' }, { year : 2018, date : '곧 2019' } ]; const result = years.filter((data) => data.year > 2000);//예제코드 console.log(result);
JavaScript
문법비교
ES5 문법비교
const result = years.filter(function(data) { return data.year > 2000; }) console.log(result);
JavaScript
Default Params
파라미터의 기본 값을 지정하는 것
const defaultValue = "2019"; function printYears(years = defaultValue){ console.log(years); } printYears();
JavaScript

'Web 개발 > JS ' 카테고리의 다른 글

ES6 : Spread, Rest Operator  (0) 2019.06.08
ES6 : 비구조화  (0) 2019.06.08
ES6 : import & export, Classes  (0) 2019.06.08
ES6 : Map & Set  (0) 2019.06.08
ES6 : for...of  (0) 2019.06.08
import & export
module.export → 명시적으로 간편하게 import & export 할 수 있도록 제공
//includes.js 내용 export const fruits = ['apple','banana','potat']; export const test = "asdf" export default test;
JavaScript
import {fruits} from './includes'; import {test} from './includes'; import abc from './includes'; console.log(fruits); console.log(test); console.log(abc); //결과 ['apple','banana','potat'] "asdf" "asdf"
JavaScript
Class
코드비교 (ES5)
클래스라는 개념이 없어서 함수로 정의
// Classes // es5 function Animal() { this.type = 'chosic'; this.tail = false; } //프로토타입에 메소드를 저장시키는 방식으로 메소드 선언 Animal.prototype.setType = function(type) { this.type = type; } Animal.prototype.getType = function(){ return this.type; }
JavaScript
주요기능
class 지원
class 로 선언할 수 있으며 constructor로 초기화
static 으로 선언가능
// es6 class Animal{ //constructor를 사용한 초기화 constructor(type,tail){ this.type = type; this.tail = tail; } cry(value = 'Woof Woof') { console.log(value); } //static 메서드 선언가능 static instance(){ console.log('instance!!'); } } dog.cry('woof'); Animal.instance();
JavaScript
상속 & Overriding
Java와 동일하게 extends 를 사용하여 상속
// inheritance class Cat extends Animal { constructor(type, tail, color){ super(type,tail); this.color = color; } cry (value = "Meow Meow"){ console.log(value); } } let cat = new Cat('Cat',true,'yellow'); cat.cry(); console.log(cat);
JavaScript

'Web 개발 > JS ' 카테고리의 다른 글

ES6 : 비구조화  (0) 2019.06.08
ES6 : Arrow Function, Default Params  (0) 2019.06.08
ES6 : Map & Set  (0) 2019.06.08
ES6 : for...of  (0) 2019.06.08
ES6 : includes, let & const  (0) 2019.06.08
Map
다른 언어에서의 Map 사용법과 유사
**파라미터로 2차원 배열을 받음
// Map let map = new Map([['id','dooboolap'],['test','1']]); map.set('testId', 'test'); map.get('testId'); console.log(map); // Map { 'id' => 'dooboolap', 'test' => '1', 'testId' => 'test' } console.log(map.size); // 3 // 포함여부 console.log(map.has('testId')); // true // 전체값을 보는것 console.log(map.entries()); // [Map Iterator] { [ 'id', 'dooboolap' ], [ 'test', '1' ], [ 'testId', 'test' ] } console.log(map.keys()) // [Map Iterator] { 'id', 'test', 'testId' } console.log(map.values()); // [Map Iterator] { 'dooboolap', '1', 'test' } map.delete('testId'); map.clear();
JavaScript
Set
중복을 허용하지 않는 자료구조
const set = new Set([1,1,1,1,1,1,2,2,2,2,2,2,3,3,3,4,4,4,4]); set.add(5); set.add(4).add(5); console.log(set); console.log(set.size); set.delete(5); set.clear();
JavaScript

'Web 개발 > JS ' 카테고리의 다른 글

ES6 : 비구조화  (0) 2019.06.08
ES6 : Arrow Function, Default Params  (0) 2019.06.08
ES6 : import & export, Classes  (0) 2019.06.08
ES6 : for...of  (0) 2019.06.08
ES6 : includes, let & const  (0) 2019.06.08
includes
문법 비교
indexOf 를 통해 포함 여부를 확인하는 방식 → includes함수를 사용하여 확인하는 방식으로 추가
// includes let years = [2001, 2010,2015,2018]; const fruits = ['apple','banana','potat']; //post console.log(years.indexOf(2001) !== -1); console.log(fruits.indexOf('apple') !== -1); //es6 console.log(fruits.includes('apple'))
JavaScript
let & const
var 로 변수 선언 → let, const로 변경
//ECMA Script 2015 = es6 //hoisting if(true) { var myId = 'dooboolab'; } console.log(myId);
JavaScript
if(true) { console.log(myId); var myId = 'dooboolab'; }
JavaScript
호이스팅 → 스코프 밖에서 변수를 사용할 수 있고 선어되지 않은 변수에 대해서도 undefined로 처리
let, const는 호이스팅을 하지 못하게 함
if(true) { console.log(myId); let myId = 'dooboolab'; } //에러
JavaScript
const
assign된 변수들에 대해서 변경되지 않도록 함 (배열, 객체의 경우 변경 가능)
//object const fruit = {}; fruit.first = 'apple'; console.log(fruit); //array const apples = [0,1,2]; apples[0] = 5; console.log(apples);
JavaScript

'Web 개발 > JS ' 카테고리의 다른 글

ES6 : 비구조화  (0) 2019.06.08
ES6 : Arrow Function, Default Params  (0) 2019.06.08
ES6 : import & export, Classes  (0) 2019.06.08
ES6 : Map & Set  (0) 2019.06.08
ES6 : for...of  (0) 2019.06.08

+ Recent posts

"여기"를 클릭하면 광고 제거.