드림코딩 엘리 javaScript 문법 이해 하기(입문자)

[자바스크립트 배우기전 꼭 봐야할 영상 | 자바스크립트의 역사와 현재 그리고 미래 (JavaScript, ECMAScript, JQuery, Babel, Node.js)

AJAX(Asynchronous JavaScript and XML) 비동기적

babel: transcompiler

node-javascript이용 back-end

]

 

[자바스크립트2. 콘솔에 출력, script async와 defer의 차이점 및 앞으로 자바스크립트 공부 방향

 source탭에서 javascript확인 가능

공식사이트는 ecma-international.org

developer.mozilla.org를 더 많이 간다. > w3schools

 

head+async

<script async src="main.js"></script> 아직 정의되지 않은 html요소를 javascript가 사용할 수 있는 문제가 있다.

 

head+defer

<script defer src="main.js"></script> 가장 효율적인 옵션

 

javascript맨 위에 

'use strict';

를 정의해주면 좋다. 

]

 

[자바스크립트 3. 데이터타입, data types, let vs var, hoisting

2. Variable

// let(added in ES6)

 

Block scope

{

}

블럭밖에서는 블럭안의 코드를 볼 수 없다.

블럭밖에 정의해서 쓰는 변수를 global scope. 어느 곳에서나 접근이 가능하다. 메모리에 계속 남기 때문에, 최소한으로 사용하는 것이 좋다.

 

let전에는 var를 사용했다. 쓰지말기.

var hoisting : var에 변수를 선언하기 전에 값을 할당가능한 것(어디선언했나 상관없이 제일 위로 끌어올려주는 것)

var는 block scope가 없다.

 

Constant: 값을 할당하면 값이 절대 바뀌지 않는다. Immutable 데이터 타입

값이 계속 변경될 수 있는 것은 Mutable 데이터 타입. 

 

변수는 mutable 타입의 let, immutable타입의 const가 있다.

 

4. Variable types

// primitive, single item: number, string, boolean, null, undefied, symbol(더 쪼개질 수 없는 타입)

// object, box container

// function, first-class function

const infinity = 1/0;

const negativeInfinity = -1/0;

const nAn = 'not a number' /2;

 

// boolean

// false: 0, null, undefined, NaN, '' 

]

 

[자바스크립트 4. 코딩의 기본 operator, if, for loop 코드리뷰 팁

console.log(`string literals: 1 + 2 = ${1 + 2}`);

console.log(2**3); 2^3

x+= y; x=x+y;

 

Ternary oprator

condition ? value1 : value2;

console.log(name === 'ellie' ? 'yes' : 'no');

 

switch (vrowser) {

case 'IE':

console.log('go away!');

break;

case 'chrome;

console.log('love you!);

break;

}

]

 

[자바스크립트5.Arrow Function은 무엇인가? 함수의 선언과 표현

함수이름은 doSomething, command 등 동사형으로 지정

function name(param1, param2) { body... return;}

function printHello() {

  console.log('Hello');

}

printHello();

 

function log(message) {

  console.log(message);

}

log('Hello@');

 

parameters-object

function changeName(obj) {

  obj.name = 'coder';

}

const ellie = {name: 'ellie' };

changeName(ellie);

console.log(ellie);

 

3. Default parameters(added in ES6)

function showMessage(message, from = 'unknown') {

  console.log(`${message} by ${from}`);

}

showMessage('Hi!');

 

4. Rest parameters (added in ES6)

function printAll(...args0 { 배열형태로 전달

  for(let i=0;i<args.length; i++) {

    console.log(args[i]);

  }

}

pritAll('dream', 'coding', 'ellie');

 

for (const arg of args) { 모든값 출력

  console.log(arg);

}

 

args.forEach((arg) => console.log(arg));

 

1. Function expression

const print = function () {

   console.log('print');

};

print();

const printAgain = print;

 

2. Callback function 

function randomQuiz(answer, printYes, printNo) {

  if (answer === 'love you') {

    printYes();

  } else {

    printNo();

  }

}

 

const printNo = function print() {

3. Arrow function

const simplePrint = () => console.log('simplePrint!');

const add = (a, b) => a+b;

const simpleMultiply = (a,b) => {

  return a*b;

};

4. IIFE: Immediately Invoked FUnction Expression 선언함과 동시에 호출

(function hello() {

  console.log('IIFE');

})();

]

 

[자바스크립트 6. 클래스와 오브젝트의 차이점(class vs object), 객체지향 언어 클래스 정리

class person {

  name;

  age;  속성(field)

  speak(); 행동(method)

}

 

class: template

object: instance of a class