JAVASCRIPT part1: 앨리의 드림코딩 내용 정리

밀크티·2022년 3월 14일
0

JAVASCRIPT

목록 보기
1/3
post-thumbnail

앨리의 드림코딩 JavaScript 정리

자바스크립트 공부 추천 사이트

Async: 불리언 타입의 속성값
장: 다운로드 시간 절약
단: 작동이 제대로 안될수도
Defer: 가장 좋은 옵션
장: 스크립트가 순서대로 실행

vanila javascript(플레인 자바)로 개발을 할때는 맨 위에 'use strict'; 를 깔고 시작

  • Variable 변수: 변경될 수 있는 값
    keyword: let (added in ES6)
    var: 요즘은 사용되지 않음

  • Constant 상수: 변수가 바뀌어야할때 사용
    -primtive, single item: number, string, boolean, null, undefined, symbol


Operator

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));
  • Push: add an item to the end
  • Pop: remove an item from the end
  • Unshift: add and item to the beginning
  • Shift: remove an item from the beginning

    Shift, unshift are slower than pop, push


json

: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

0개의 댓글