Modern Javascript

Size: px

Start display at page:

Download "Modern Javascript"

승희 궉
6 years ago
Views:

18 ES6 - Arrow Function Class Template String Destructuring Default, Rest, Spread let, const for..of Promises Module System Map, Set * Generator * Symbol * *

23 Babel is a JavaScript compiler.

24 ES5 *Transpile의 특성상 ES6+의 모든 기능을 지원하지는 않는다

28 function hello() { // This is comment console.log( Hello World! ) hello()

30 var Scope? var j = 0 for (var i=0;i<10;i++) { var j = i j?

31 var Scope? var j = 0 for (var i=0;i<10;i++) { var j = i j? Variables declared within a JavaScript function, become LOCAL to the function. Javscript

32 if (true) { var x = 5 console.log(x)

33 if (true) { var x = 5 console.log(x)

34 (function() { console.log(myvar) var myvar = "local value" )()

35 (function() { console.log(myvar) var myvar = "local value" )()

36 (function() { console.log(myvar) var myvar = "local value" )()

37 (function() { console.log(myvar) var myvar = "local value" )() (function() { var myvar console.log(myvar) myvar = "local value" )()

38 (function() { console.log(myvar) var myvar = "local value" )() (function() { var myvar console.log(myvar) myvar = "local value" )()

39 let, const : Block-Scoped Variable function f() { { let x { // okay, block scoped name const x = "sneaky" // error, const x = "foo" // error, already declared in block let x = "inner"

40 if (true) { let x = 5 console.log(x)

41 if (true) { let x = 5 console.log(x)

42 let fruit = { name: Apple, count: 5

44 const x = 10; const y = 15; const p1 = { x: x, y: y

45 const x = 10; const y = 15; const p1 = { x: x, y: y const p2 = { x, y

46 const obj = { x: 10, y: 50, const arr = [ 1, 2, 3, ]

47 if (condition) { statement_1 else { statement_2 switch (expression) { case label_1: statements_1 [break]... default: statements_def [break]

48 false undefined null 0 NaN the empty string ( ")

49 try { throw "myexception" catch (e) { logmyerrors(e)

51 const arr = [5,4,3,2,1] for (let i = 0; i < arr.length; i++) { console.log(arr[i])

52 const arr = [4,3,2,1,0] for (let i = 0; i < arr.length; i++) { console.log(arr[i])

53 const arr = [4,3,2,1,0] for (let i in arr) { console.log(i)

54 const arr = [4,3,2,1,0]; for (let i in arr) { console.log(i)

55 const arr = [4,3,2,1,0] for (let o of arr) { console.log(o)

56 let arr = [3, 5, 7] arr.foo = "hello" for (let i in arr) { console.log(i) for (let i of arr) { console.log(i)

57 let arr = [3, 5, 7] arr.foo = "hello" for (let i in arr) { console.log(i) for (let i of arr) { console.log(i)

58 function square(number) { return number * number const n = square(3) // 9

59 function add(n1, n2) { return n1 * n2 const n = add(3, 5) // 8

60 fizzbuzz 1 n 3 fizz 5 buzz 15 fizzbuzz

61 function fizzbuzz(n) { if (n % 15 === 0) return fizzbuzz else if (n % 3 === 0) return fizz else if (n % 5 === 0) return buzz return n

63 const square = function (number) { return number * number let x = square(4) // x 16

64 const square = function (number) { return number * number //

65 function benchmark(f) { const start = new Date() f() const end = new Date() console.log(end.gettime() - start.gettime()) benchmark(function() { )

66 const square = function (number) { ; return number * number const square = (number) => { ; return number * number

67 function square(number = 5) { return number * number square() // 25

68 function multiply(multiplier,...theargs) { return theargs.map(function(x) { return multiplier * x ) const arr = multiply(2, 1, 2, 3); console.log(arr); // [2, 4, 6]

69 let [ a,, b ] = [1, 2, 3] // a === 1 b === 3

70 let [ a,, b ] = [1, 2, 3] // a === 1 b === 3 let { name = { name: Changje Jeong // name === Changje Jeong

71 let [ a, b, c = 3] = [1, 2] // a === 1 c === 3 let { a, b = -1 = { a : 5 // a === 5 b === -1

72 const instr = { firstname: Changje, lastname: Jeong, major: Computer Science ; function fullname({ firstname, lastname ) { return firstname + + lastname

73 let params = [ "hello", true, 7 ] const other = [ 1, 2,...params ]

74 let params = [ "hello", true, 7 ] const other = [ 1, 2,...params ] // [ 1, 2, "hello", true, 7 ]

75 let params = [ "hello", true, 7 ] const other = [ 1, 2,...params ] // [ 1, 2, "hello", true, 7 ] f(1, 2, params)

76 let params = [ "hello", true, 7 ] const other = [ 1, 2,...params ] // [ 1, 2, "hello", true, 7 ] f(1, 2, params) f(1, 2, hello, true, 7)

77 function fullname(firstname, lastname) { return firstname + + lastname function fullnamenew(firstname, lastname) { return `${firstname ${lastname`

78 let fruits = [,, ] fruits.map(fruit => ` ${fruit`) [,, ] fruits.filter(fruit => fruit.length > 1) [, ] fruits.sort() [,, ] -> fruits

79 // Array let fruits = [,, ] let i = fruits.indexof( ) if (i > -1) { if (fruits.includes( )) {

83 class Point { constructor(x, y) { this.x = x; this.y = y; move(x, y) { this.x = x; this.y = y;

84 class Point { constructor(x, y) { this.x = x; this.y = y; move(x, y) { this.x = x; this.y = y;

85 class Rectangle extends Shape { constructor (id, x, y, width, height) { super(id, x, y) this.width = width this.height = height class Circle extends Shape { constructor (id, x, y, radius) { super(id, x, y) this.radius = radius

92 fetch(

95 )

98 function naver() { fetch(' => console.log('success', resp.status)).catch((err) => console.log('failed', err)) async function naver() { try { const resp = await fetch(' console.log('success', resp.status) catch (err) { console.log('failed', err)

99 // lib.js var sqrt = Math.sqrt; function square(x) { return x * x; function diag(x, y) { return sqrt(square(x) + square(y)); module.exports = { sqrt: sqrt, square: square, diag: diag, ; // main.js var square = require('lib').square; var diag = require('lib').diag; console.log(square(11)); // 121 console.log(diag(4, 3)); // 5

100 // lib.js var sqrt = Math.sqrt; function square(x) { return x * x; function diag(x, y) { return sqrt(square(x) + square(y)); module.exports = { sqrt: sqrt, square: square, diag: diag, ; // main.js var square = require('lib').square; var diag = require('lib').diag; console.log(square(11)); // 121 console.log(diag(4, 3)); // 5

101 // lib.js var sqrt = Math.sqrt; function square(x) { return x * x; function diag(x, y) { return sqrt(square(x) + square(y)); module.exports = { sqrt: sqrt, square: square, diag: diag, ; // lib.js export const sqrt = Math.sqrt; export default function square(x) { return x * x; export function diag(x, y) { return sqrt(square(x) + square(y)); // main.js import from lib'; import React, { Component, PropTypes from console.log(square(11)); // 121 console.log(diag(4, 3)); // 5 // main.js var square = require('lib').square; var diag = require('lib').diag; console.log(square(11)); // 121 console.log(diag(4, 3)); // 5

102 Object Array Callback Arrow Function Class Template String Destructuring Default, Rest, Spread let, const Map for..of Promises Async/Await Module System

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 @ Lesson 2... ( ). ( ). @ vs. logic data method variable behavior attribute method field Flow (Type), ( ) member @ () : C program Method A ( ) Method B ( ) Method C () program : Java, C++, C# data @ Program