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())

Last updated

Was this helpful?