'Web 개발/JS ' 카테고리의 글 목록

Web 개발/JS

[jQuery] 엔터로 로그인하기 2019.06.26
ES6 : async & await 2019.06.08
ES6 : Spread, Rest Operator 2019.06.08
ES6 : 비구조화 2019.06.08
ES6 : Arrow Function, Default Params 2019.06.08
ES6 : import & export, Classes 2019.06.08
ES6 : Map & Set 2019.06.08
ES6 : for...of 2019.06.08
ES6 : includes, let & const 2019.06.08

[jQuery] 엔터로 로그인하기

2019. 6. 26. 17:37

로그인시 항상 구현하는 부분,

e.keyCode == '13'을 통해서 엔터키를 인식하여 로그인 버튼 클릭 이벤트 실행

$('#pwd').on('keypress', function(e){ 
    if(e.keyCode == '13'){ 
        $('#loginBtn').click(); 
    }
});

저작자표시 비영리 변경금지

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

ES6 : async & await (0)	2019.06.08
ES6 : Spread, Rest Operator (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

ES6 : async & await

2019. 6. 8. 19:18

javascript 에서 callback hell 해결

Promise 함수

module.export → 명시적으로 간편하게 import & export 할 수 있도록 제공

//includes.js 내용

export const fruits = ['apple','banana','potat'];
export const test = "asdf"

export default test;

JavaScript

View Original

Async & Await

예제코드 

function resolvePromise(){
    return new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve("done!!");
            },2000);
    })
}

async function getPromise1(){
    let result = null;
    result = await resolvePromise();
    console.log(result);
    result = await resolvePromise();
    console.log(result);
}

getPromise1();

//결과
done!!
done!!

JavaScript

 await 를 사용하지않으면 resolvePromise가 진행 중일 때 result에 할당 ( 기다리지않음)

async function getPromise1(){
    let result = null;
    result = resolvePromise();
    console.log(result);
    result = resolvePromise();
    console.log(result);
}

getPromise1();

//결과
Promise { <pending> }
Promise { <pending> }

JavaScript

async 로 선언되어 있지 않은 함수에 대해 await 사용하면 에러 발생

function getPromise1(){
    let result = null;
    result = await resolvePromise();
    console.log(result);
    result = await resolvePromise();
    console.log(result);
}

getPromise1();

//결과
SyntaxError: /Users/kyome/dev/es6/src/index.js: 
Can not use keyword 'await' outside an async function (11:13)

JavaScript

저작자표시 비영리 변경금지

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

[jQuery] 엔터로 로그인하기 (0)	2019.06.26
ES6 : Spread, Rest Operator (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

ES6 : Spread, Rest Operator

2019. 6. 8. 19:09

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

ES6 : 비구조화

2019. 6. 8. 19:06

문자열 표기법

` ` 식으로 표현하여 문자열에 변수를 추가

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

ES6 : Arrow Function, Default Params

2019. 6. 8. 19:03

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

ES6 : import & export, Classes

2019. 6. 8. 18:58

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

ES6 : Map & Set

2019. 6. 8. 18:56

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

ES6 : for...of

2019. 6. 8. 18:52

for...of

Java에서 for...in 문법과 동일한 기능

예제코드

예제코드 1

//예제코드
let years = [2001,2010,2015,2018];

for( let year of years) {
    console.log(year);
}

JavaScript

JavaScript

예제코드 2

iterable이기 때문에 문자열에서도 다음과 같이 적용됨

//예제코드
const str = "I love you";

for( let char of str) {
    console.log(char);
}

JavaScript

//결과
I
 
l
o
v
e
 
y
o
u

JavaScript

문법비교

ES5 문법비교

forEach문 중간에 break 문 사용 불가 ( 반복 중간에 종료 불가)

//es5
years.forEach(year) => { 
	console.log(year) 
}

JavaScript

JavaScript

javascript의 for...in 구문과 비교

for...of 문이 출시 이후로 사용잘 안함

//예제코드
let years = [2001,2010,2015,2018];

for( let year in years) {
    console.log(year);
}

JavaScript

//결과
0
1
2
3

JavaScript

결과 타입 : string

저작자표시 비영리 변경금지

'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 : includes, let & const (0)	2019.06.08

ES6 : includes, let & const

2019. 6. 8. 18:48

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

PREV 1 NEXT

+ Recent posts

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

aaaicu

Web 개발/JS

[jQuery] 엔터로 로그인하기

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

ES6 : async & await

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

ES6 : Spread, Rest Operator

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

ES6 : 비구조화

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

ES6 : Arrow Function, Default Params

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

ES6 : import & export, Classes

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

ES6 : Map & Set

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

ES6 : for...of

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

ES6 : includes, let & const

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

+ Recent posts

티스토리툴바