Javascript 기초문법 가물가물할 때 5분 컷 내기

Javascript 오빠는 풍각쟁이야~ 오빠는 심술쟁이야~
난 몰라 난 몰라 문법 이렇게 만들어 놓으면 난 몰라~~

Javascript 문법은 봐도봐도 헷갈려

Backend와 Frontend를 왔다리 갔다리 하다보면,
Python식 사고방식으로 작성한 문법이 문제 없겠지? 하고 들여다보면
Javascript 의 다양한 에러메시지를 주구장창 마주치게 된다.

오죽하면, What the fuck Javascript 라는 Dev Meme (개발자 유머)도 존재하고,
Javascript의 가장 괴랄한(?) 부분만 모아놓아, 퀴즈 형식으로 풀게하는 레퍼지토리도 존재한다. 폴란드의 한 개발자 분이 만드신 것 같은데, 웃긴 건 이 페이지는 전부 Typescript로 제작 되었다는 것ㅋㅋㅋㅋㅋ 그만큼 JS를 싫어하신단거지

JS의 괴랄함을 겪어보고 싶으신분들은 사이트 들어가서 직접 풀어보자! :
https://wtf-js-quiz.netlify.app/

Javascript 문법이 가물가물한 분들을 위해

그래서, Javascript 문법을 처음 배우는 사람 말고! 봐도봐도 헷갈리는 사람을 위해, 5분만에 스윽 다시 읽어보고 아 맞다 이거였지! 할 수 있도록, 기초 JS 문법을 정리해봤다.

이미 아는 내용일거라 전제하에, 주석은 정말 기억을 되살릴 만큼만 적고, 설명을 최소화해서 5분만에 Javascript의 Type, For문, Function, Object 구조를 읽을 수 있도록 만들었다. 레쓰기릿

// 1. Javascript 의 Data Type 
// - 아무리 바빠도 Hello world 정도는 괜찮잖아?
console.log('hello world');

// let 과 const는 둘다 중복 생성 X
// let은 재할당 가능 
let a =123
a = 456
// const 는 재할당 불가능
const b = 'hello'
// b = 'world

console.log(typeof 123)
// number라고 나온다!

let name = 'javert'
let hello_msg = `hello ${name}`
// hello_msg = f'hello {name}' 과 같다(python f스트링)
// 다만 따옴표가 아닌 백틱을 사용한다

console.log(hello_msg)

// True, False 는 소문자다
console.log(true)

console.log(undefined)
// and 랑 or 는 && , ||로 쓴다
console.log(true && true)
console.log(true || true)

// 삼항 연상자
result = true ? 1: 2
console.log(result)


// 2. Javascript 의 for 문

for (let a = 0 ; a < 5 ; a++){
    console.log('hello')
}

let menus = ['짜장면', '짬뽕']

for (let menu of menus){
    console.log(menu)
}

for (let menu in menus){
    console.log(menu)
}

let numbers = {
    'gj': 062,
    'seoul': 02,
}
// key가 출력 (key값)
for (let number in numbers){
    console.log(number)
}

// // 에러가 발생 (value값)
// for (let number of numbers){
//     console.log(number)
// }

// list는 for of / 오브젝트 형태는 for in

menus.forEach(function(menu){
    console.log(menu)
})

// 3. Javascript의 함수 선언

// def hello():
// print('hello')
// hello()
// 함수 선언식
function hello(){
    console.log('hello')
}
hello()

// 함수 표현식
const world = function() {
    console.log('world')
}
world()

// 화살표 함수
const js = () => {
    console.log('js')
}
js()

// 화살표 함수가 한줄 밖에 없을땐 이렇게도 표현가능하다
const python = a => console.log(a)
python('hello python')


// 4. 자바스크립트의 함수란?
//   1. 변수에 저장할 수 있다.
//   2. 함수의 리턴값이 될 수 있다.
//   3. 함수의 인자가 될 수 있다.
let numbers = [1, 2, 3, 4, 5]

for (let number of numbers) {
    console.log(number*2)
}

const hello = (num) => {
    console.log(num*2)
}
hello(10)

// numbers.forEach(hello)
// numbers.forEach((num)=>{console.log(num*2)})
numbers.forEach(num=>console.log(num*2))
// 익명함수(파이썬의 람다)는 재사용을 할 수 없다
// 콜백함수 일회용으로만 사용할때 많이 사용


// 5. Javascript의 Object 구조 (Python 의 Dictionary)
const me = {
    name: 'javert',
    location: 'gj',
    language: ['python', 'js', 'sql'],
    products: {
        phone: 'iphone',
        computer: 'desktop',
    },
    greeting: function(){return 'hihi'},
    double: (age) => {console.log(age*2)},
    double2: function(age){return age*2} 
}

// console.log(me.greeting)
// console.log(me.double(100))
// console.log(me.double2(100))

console.log(me)

// json
let meJson = JSON.stringify(me)
console.log(meJson)
// 함수는 string화가 안된다

JSON.parse()

중간중간 console.log 값이 뭐가 나오는지 궁금하다구요?
구글 크롬 Console창을 킨 뒤, 직접 입력해 보자!

아니, 그냥 우리 .. Typescript 쓰자 … The End