Async: 불리언 타입의 속성값
장: 다운로드 시간 절약
단: 작동이 제대로 안될수도
Defer: 가장 좋은 옵션
장: 스크립트가 순서대로 실행
vanila javascript(플레인 자바)로 개발을 할때는 맨 위에 'use strict'; 를 깔고 시작
Variable 변수: 변경될 수 있는 값
keyword: let (added in ES6)
var: 요즘은 사용되지 않음
Constant 상수: 변수가 바뀌어야할때 사용
-primtive, single item: number, string, boolean, null, undefined, symbol
String concatenation
console.log(`my` + `cat`);
console.log(`1` + 2);
console.log(`string literals: 1 + 2 = ${1 + 2}`);
Numeric operators
console.log(1 + 1); // add
console.log(1 - 1); // substract
console.log(1 / 1); // divide
console.log(1 * 1); // multiply
console.log(5 % 2); // remainder
console.log(2 ** 2); // exponentiation
Increment and decrement operators
let counter = 2;
const preIncrement = ++counter;
//counter = counter + 1;
//preIncrement = counter;
console.log(`preIncrement: ${preIncrement}, counter ${counter}`);
const postIncrement = counter++;
// postIncrement = counter;
// counter = counter + 1;
console.log(`preIncrement: ${preIncrement}, counter ${counter}`);
const preDecrement = --counter;
console.log(`preDecrement: ${preDecrement}, counter: ${counter}`);
const postDecrement = counter--;
console.log(`postDecrement: ${postDecrement}, counter: ${counter}`);
Assignment operators
let x = 3;
let y = 6;
x += y; //x = x + y;
x-= y;
x *= y;
x /= y;
Logical operator
|| (or)
&& (and)
! (not)
Equality
const stringFive = `5`;
const numberFive = 5;
Function
:inputm을 받아 output을 리턴
동사형태로 이름 지정
한 함수당 한 동작씩
Call back function
Arrow function
: always anonymous
IIFE
: Immediately in voted function expression
Class
: 관련있는 변수나 함수를 묶어 놓은 것
-Class:
template, declare once, no data in
-Object:
instance of a class, created many times, data in.
One of the javascript’s data types.
A collection of related data and/or functionality.
Nearly all objects in javascript are instances of object
Array declaration
const arr1 = new Array();
const arr2 = [1, 2];
Index position
const fruits = ['🍎', '🍌'];
console.log(fruits);
console.log(fruits.length);
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);
console.log(fruits[fruits.length - 1]);
console.clear();
Looping over an array
// print all fruits
// a. for
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
// b. for of
for (let fruit of fruits) {
console.log(fruit);
}
// c. forEach
fruits.forEach((fruit) => console.log(fruit));
Shift, unshift are slower than pop, push
:javascript object notation
가장 간단한 데이터 포맷
텍스트 기반이라 가벼움
읽기 쉬움
키와 벨류로 이루어진 파일 포멧
프로그래밍 언어나 플랫폼에 상관없이 사용 가능
Object to JSON
// stringfy(obj)
let json = JSON.stringify(true);
console.log(json);
json = JSON.stringify(['apple', 'banana']);
console.log(json);
const rabbit = {
name: 'tori',
color: 'white',
size: null,
birthDate: new Date(),
jump: function () {
console.log(`${this.name} can jump!`);
},
};
json = JSON.stringify(rabbit);
console.log(json);
json = JSON.stringify(rabbit, ['name', 'color', 'size']);
console.log(json);
json = JSON.stringify(rabbit, (key, value) => {
console.log(`key: ${key}, value: ${value}`);
return key === 'name' ? 'ellie' : value;
});
console.log(json);
JSON to Object
// parse(json)
console.clear();
json = JSON.stringify(rabbit);
console.log(json);
const obj = JSON.parse(json, (key, value) => {
console.log(`key: ${key}, value: ${value}`);
return key === 'birthDate' ? new Date(value) : value;
});
console.log(obj);
rabbit.jump();
// obj.jump();
console.log(rabbit.birthDate.getDate());
console.log(obj.birthDate.getDate());
추천 사이트 모음: JSON DIFF, JSON BEAUTIFIER, JSON PARSER, JSON VALIDATOR