JavaScript[2] - JavaScript 기본 문법과 호이스팅(hoisting)

JavaScript[2] - JavaScript 기본 문법과 호이스팅(hoisting)

 

들여 쓰기와 코드 블록

JavaScript는 2칸 들여 쓰기를 사용합니다.

블록(Block)은 if, for, 함수에서 중괄호 { } 내부를 뜻합니다. 중괄호를 통해 코드 블록을 구분합니다.

if (isClean) { // 중괄호로 코드 블럭 구분
  console.log('clean!') // 2칸 들여쓰기
}

 

세미콜론

JavaScript는 세미콜론 ( ; )을 선택적으로 사용 가능 합니다.

일관성 있게 회사 또는 팀의 스타일 가이드에 맞춰서 사용하면 됩니다.

console.log('hello')
console.log('javascript');

 

변수와 식별자

식별자(identifier)

변수를 구분할 수 있는 변수명을 뜻합니다.

식별자는 반드시 문자, 달러($) 또는 밑줄(_)로 시작합니다.

대소문자를 구분하고, 클래스명 외에는 모두 소문자로 시작합니다.

예약어는 사용 불가능 합니다. 예시 : for, if, function 등

• 카멜 케이스(camelCase)

    변수, 객체, 함수에 사용합니다.

//변수
let variableName

//객체
const userInfo = { name : 'Tom', age : 20 }


//함수
function getName() {}

• 파스칼 케이스(PascalCase)

    클래스, 생성자에 사용합니다.

//클래스
class User{
    constructor(options) {
        this.name = options.name
    }
}

//생성자 함수
function User(options) {
    this.name = options.name
}

• 대문자 스네이크 케이스(SNAKE_CASE)

    상수(constants)에 사용합니다 ( 상수 : 개발자의 의도와 상관없이 변경될 가능성이 없는 값 ) 

//값이 바뀌지 않을 상수
const API_KEY = 'my-key'
const PI = Math.PI

//재할당이 일어나지 않는 변수
const NUMBERS = [1, 2, 3]

 

 

변수 선언 키워드

• let

    블록 스코프 지역 변수를 선언 ( 추가로 동시에 값을 초기화 )

    재할당 가능 & 재선언 불가능

let numbers = 10 // 1. 선언 및 초기값 할당 
numbers = 20 // 2. 재할당

let numbers = 10 // 1. 선언 및 초기값 할당
let numbers = 20 // 2. 재선언 불가능

• const

    블록 스코프 읽기 전용 상수를 선언  ( 추가로 동시에 값을 초기화 )

    재할당 불가능 & 재선언 불가능 

const numbers = 10 // 1. 선언 및 초기값 할당 
numbers = 10 // 2. 재할당 불가능

const numbers = 10 // 1. 선언 및 초기값 할당
const numbers = 20 // 2. 재선언 불가능

    선언 시 반드시 초기값을 설정해야 하고, 이후 값 변경 불가능

• var

    변수를 선언  ( 추가로 동시에 값을 초기화 )

    재할당 가능 & 재선언 가능, ES6 이전에 변수를 선언할 때 사용되던 키워드

    호이스팅 되는 특성으로 인해 예기치 못한 문제 발생 가능, 따라서 const와 let 사용 권장

    함수 스코프를 가짐

 

호이스팅(hoisting)

런타임 이전에 선언문을 위로 끌어올리는 것

console.log(name) // undefined => 선언 이전에 참조

var name = '고민하는 만두'

// 위 코드를 암묵적으로 아래와 같이 이해
var name // undefined로 초기화
console.log(name)

var name = '고민하는 만두'

반면 let, const는 호이스팅이 일어나면 에러 발생

console.log(name) // undefined 
var name = '고민하는 만두'

console.log(email) // uncaught ReferenceError
let email = 'mandu@gmail.com'

console.log(age) // uncaught ReferenceError
const age = 50

이를 방지하기 위해서 let, const가 추가됨. 즉 var는 사용하지 않아야 하는 키워드

호이스팅

JavaScript에서 변수와 함수는 모두 호이스팅 됩니다. 호이스팅이란, 변수와 함수가 선언되기 전에 사용될 수 있다는 것을 의미합니다. 이는 JavaScript 엔진이 코드를 실행하기 전에 변수와 함수를 메모리에 미리 할당하기 때문입니다. 따라서, 변수와 함수를 선언하기 전에 사용하면 해당 변수나 함수가 undefined로 정의됩니다.

호이스팅은 자바스크립트의 특성 중 하나이며, 이를 이용하여 코드를 더욱 간결하게 작성할 수 있습니다. 하지만, 변수와 함수를 정의하기 전에 사용하면 예상치 못한 결과를 초래할 수 있으므로 주의해야 합니다.

정리