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대 구성요소

BOM (Browser Object Model)
DOM (Documenet Object Model)
- DOM 조작
- JavaScript의 존재 이유
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급 객체`

변수에 저장할 수 있다.
함수의 리턴값이 될 수 있다.
함수의 인자가 될 수 있다.

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 (호이스팅)

var를 쓰지 않는다
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) 함수가 아닌 곳에서만 사용

Class 정의에서는 arrow 함수 사용하지 말자!
- why?
  - this, arguments, super, new.target 등을 binding 하지 않기 때문
생성자로 사용 X
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 Object NextArray Helper Methods in ES6

Last updated 7 months ago