Skip to content

Latest commit

 

History

History
477 lines (300 loc) · 6.91 KB

07_JavaScript_Basic_Syntax.md

File metadata and controls

477 lines (300 loc) · 6.91 KB

JavaScript Basic Syntax


JavaScript 란?

Browser를 조작하기 위한 언어

  • 브라우저의
  • 브라우저에 의한
  • 브라우저를 위한

JavaScript는 표준과의 전쟁이다!


JQuery

  • JQuery를 사용하면 속도는 약간 느려질 수 있지만 cross-browsing issue를 없애준다


Vanilla JS

: 우후죽순 생겨나는 JavaScript Library 그만쓰자! 는 캠페인

  • Vanilla == '순정'
  • 아무런 library도 설치하지 않고 JavaScript를 쓰는 것!


JavaScript


최상단에 window가 있음

  • window.document

image-20200512104205991


write 하기

  • window.document.write()

image-20200512104249854


최상단은 항상 window 이기 때문에 생략 가능하다

image-20200512104840632



ASI (Automatic Semicolon Insertion)

: The principle of the feature is to provide a little leniency when evaluating the syntax of a JavaScript program by conceptually inserting missing semicolons



3대 구성요소

  1. BOM (Browser Object Model)

  2. DOM (Documenet Object Model)

    • DOM 조작
    • JavaScript의 존재 이유

  3. ES (EcmaScript)



ES (EcmaScript)


let vs const


let

: 재 할당이 가능하다

const

: 재 할당이 불가능하다 !== 값이 바뀌지 않는다



Naming Convention

  • lower cammel case 사용하기!

  • snake case 안된다!

    const addOneToNumber // good
const add_one_to_number //bad


절대 느슨한 일치 연산자를 사용하지 않는다

  • ==, != => X
  • ===, !== => O


Function => 1급 객체

  1. 변수에 저장할 수 있다.

  2. 함수의 리턴값이 될 수 있다.

  3. 함수의 인자가 될 수 있다.



DOM (Document Object Model) 조작

  • String 인 HTML을 Object로 바꾸고
  • 이해하고 해석해서
  • DOM Tree를 만들고
  • 화면에 rendering (그림 그리기)

정리:

  • 세상의 data는 전부 String (HTML)
  • 이것을 해석하는 parse/pasing 과정을 거쳐야 한다 (DOM이 해석)


Selecting

: querySelector , querySelectorAll



Create

: .classList.add()

const myP = document.createElement('p')
myP.innerText = 'Greater'
        
const myPStr = '<p>Greate</p>'
myPStr.classList // undifined -> string이니까
myP.classList.add('wow') // object는 가능




I. Scope

중2변 히키코모리 막내동생 법칙

  • 중괄호가 있을 경우, Scope를 만든다!!
    1. function일 경우
    2. 제어문 (if / while / switch (control)) 등5 일 경우
  • var function에서만 scope로 묶였음
  • let 은 중괄호가 있을 경우 (scope) 동일하게 작동


II. var, let, const

  • var
    • 할당 자유
    • 선언 자유
    • 함수 스코프 (절대 쓰지 않는다.)
  • let
    • 할당 자유
    • 선언은 한번
    • 블록 스코프
  • const
    • 할당 한번
    • 선언 한번
    • 블록 스코프


Identifier (식별자) Convention

  • 변수, 함수, 객체: 캐멀 케이스 (camelCase)
  • class, 생성자: 파스칼 케이스 (PascalCase)
  • 상수: 대분자 스케이크 케이스 (SNAKE_CASE)


III. Hoisting (호이스팅)

  1. var를 쓰지 않는다
  2. function 선언형으로 쓰지 않는다

  • 선언형으로 쓰면 생각대로 코드가 움직이지 않음
    • why?
      • 실행 전에 한 번 훑어서, 선언 이전에 참조가 가능하게 함

// 선언형
function hello() {}

// 표현식
const hello = function() {}


V. 자료형


(1) 숫자


const num1 = 123
const num2 = -2.88
const a = NaN // Not a Number
const b = Infinity
const c = -Infinity

(2) 글자

  • 합체 (concatenation)
    • +
  • 수술 (interpolation)
    • template literal ${}

const firstName = 'Chloe'
const lastName = 'Kim'
const middleName = 'Juhyun'

const fullName = firstName + lastName
const greeting = `Hello ${middleName}`


(3) Boolean

  • 뭐가 참에 가깝고, 뭐가 거짓에 가깝냐
  • true, false (소문자)

1. Truthy

Falsy 가 아닌 모든 값들

  • [] - emptyArray
  • {} - emptyObject

2. Falsy

없거나, 정의되지 않은 것

  • null
  • undefined
  • ""
  • 0
  • [] == true
  • ![]


VI. 자료구조

어떻게 저장하고, 조작하는지 (CRUD) => method를 보자

  • Array (list)
    • array helper method
  • Object (dict)


VII. 함수

  • 선언식 (statement)
  • 표현식 (expression)

Arrow Function

(Class) Method(OOP) 함수가 아닌 곳에서만 사용

  1. Class 정의에서는 arrow 함수 사용하지 말자!
    • why?
      • this, arguments, super, new.target 등을 binding 하지 않기 때문
  2. 생성자로 사용 X
  3. Event Listener Callback function으로 사용 X

ex)

// 1. 선언식
function add (num1, num2){

    return num1 + num2
}

add(1,2)
// def add(num1, num2):


// 2. 표현식
const sub = function(num1, num2){
    return num1 - num2
}

sub(2,1)
// sub = lambda 입력값: 출력값


// 3. Arrow Function
const arrow = function(name){
    return `hello ${name}`
}

const arrow = (name) => {
    return `hello!! ${name}`
}

// 인자가 하나일 때
const arrow = name => {
    return `hello!!! ${name}`
}

// 한줄로 줄여라 
const arrow = name => {return `hello!{name}`}

//arrow function 끝판왕
// (1) 인자는 1개
// (2) return이 존재 & expression
const arrow = name => `hello!!!! ${name}`


VIII. OOP


  • 매우 유연한 객체를 통한 OOP

  • Class를 잠시 잊어라!

    • Prototypal Inheritance

  • ES6+ 부터 class 도입

ex)

const chloe = {
    'name': 'Chloe',
    birth: '1995',
    'greeting': function(){
        return `Hi, This is ${name}`
    },
    farewell(){
        return `Bye~~ -${this.name}-`
    }
}

class Person {
    constructor(name, birth){
        this.name = name
        this.birth = birth
    }
    greeting() {
        return `Hi, This is ${this.name}`
    }
}

const camila = new Person('Camila', 1995)
const bella = new Person('Bella', 1993)


console.log(camila.name)
console.log(camila.greeting())
console.log(bella.name)
console.log(bella.greeting())

// 중간에 추가 가능!! -> 유연하다
bella.money = 100000000
console.log(bella.money)

/*
Python 에서는..

class Person:
    def __init__(self, name, birth):
        self.name = name
        self.birth = brith

    def greeting(self):
        return f'Hi, This is {self.name}'


*/
console.log(chloe.name)
console.log(chloe['birth'])
console.log(chloe.greeting())
console.log(chloe.farewell())