[3주차] JavaScript

ming·2023년 1월 7일

STUDY SOJU

목록 보기

14/19

알아두면 좋은 것

asyn(boolean type)
👉 html문서를 다운로드하면서 병렬로 js파일을 다운로드하고 다운로드가 끝나면 잠시 멈춰서 js파일을 실행시킨 후 html문서를 마저 실행시킴 다운로드 시간 절약 가능하나 조작시점에 html문서가 전부 다운로드되지 않을 수 있음

defer
👉 html parsing 중 js파일이 있으면 다운로드 명령만 시켜놓은 후 html parsing이 끝나면 js를 실행함 제일 효율적이고 안전하다

'use strict';
👉 스크립트를 개발할 때 조금 더 상식적인 범위 안에서 이용이 가능하며 자바 스크립트 엔진이 좀더 효율적으로 빠르게 자바스크립트 분석이 가능하여 성능 개선이 된다

variable

let (added in ES6)

👉 블록 스코프의 범위를 가지는 지역 변수를 선언
👉 선언과 동시에 임의의 값으로 초기화 가능

var

let 이전의 변수

지양해야 하는 이유
👉 var hoisting
어디에 선언했는지에 상관없이 제일 상단으로 끌어올려짐
👉 has no block scope
{ } <-- 이 블록을 무시해버리기 때문에 지역변수를 선언해도 어디서든 불러낼 수 있게 되고 혼잡해질 수 있다

Constans

👉 블록 범위의 상수를 선언
👉 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없다

데이터 타입

function
변수에 할당 가능
함수에 인자, 리턴 가능

number
숫자를 표현하고 다룰 때 사용

string
문자열(문자의 나열)의 생성자

null
값이 전혀 없이 텅텅 비어있는 것

undefined
텅텅 비었는지 값이 들어갔는지 정해지지 않은 상태

object
다양한 키 모음 및 더 복잡한 엔티티들을 저장하는 데 사용

symbol
고유한 식별자가 필요하거나 동시다발적으로 일어나는 코드에서 우선순위를 주고 싶을 때 사용

operator

String concatenation

Numeric operators

++, -- operators

= operators

Logical operators

Equality operatos

condition

If operators

? operators

switch operators

loop

while

do while

for

Function

여러번 재사용 가능

하나의 태스크나 어떠한 값을 계산하기 위해 사용

Function declaration

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

하나의 함수는 한 가지 일만 하도록 만들어야 함

naming: doSomething, command, verb

createCardAndPoint -> createCard, createPoint

자바스크립트에서 function은 object로 간주
(변수에 할당, 파라메터 전달, 함수 리턴)

Parameters

premitive parameters: passed by value

object parameters: passed by reference

default parameters

added in ES6

rest parameters

addede in ES6

return

early return

function expression

호이스팅이 되지 않음

callback function

arrow function

class

template

declare once

no data in

Class declarations

Getter and Setters

Fields (public, private)

클래스 내부에서만 사용할 수 있음

외부에서는 undefined로 뜬다

Static properties and methods

Inheritance
a way for one class to extends another class

instanceOf

object

instance of a class

created many times

data in

object = { key : value };
(오브젝트는 키와 밸류의 집합체이다)

Literals and properties

Computed properties
key should be always string

Property value shorthand

Constructor Function

in operator: property existence check (key in obj)

for..in vs for..of

Fun cloning

Array

Declaration

Index position

Looping over an array

fruit을 출력하는 다양한 방법. 결과는 모두 같다.

Addition, deletion, copy

note!! shift, unshift는 pop, push보다 느리다

두개의 배열을 하나의 배열로 만들어준다

Searching

note!! 하나의 배열에 같은 값이 두 개 들었을 때 indexof로 검색하면 가장 먼저 있는 값, lastIndexOf로 검색하면 마지막에 있는 값이 추출된다.

JSON

JavaScript Object Notation

Object to JSON

stringify(obj)

JSON to Object

parse(json)

유용한 사이트

JSON Diff checker: http://www.jsondiff.com/
JSON Beautifier/editor: https://jsonbeautifier.org/
JSON Parser: https://jsonparser.org/
JSON Validator: https://tools.learningcontainer.com/j...