Machine LearningBook ReviewsGithub

JavaScript Basic Syntax

JavaScript 란?

Browser를 조작하기 위한 언어

  • 브라우저의

  • 브라우저에 의한

  • 브라우저를 위한

JavaScript는 표준과의 전쟁이다!

JQuery

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

Vanilla JS

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

  • Vanilla == '순정'

  • 아무런 library도 설치하지 않고 JavaScript를 쓰는 것!

JavaScript

최상단에 window가 있음

  • window.document

write 하기

  • window.document.write()

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

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())
PreviousJavaScript ObjectNextArray Helper Methods in ES6

Last updated