Identifiers

🔵 Identifiers

식별자

• 반드시! 문자, 달러, 또는 밑줄로 시작해야한다. 그 이후는 숫자도 가능하다.
• 대소문자를 구분하며, 클래스명 외에는 모두 대문자로 시작하지 않는다.
• 예약어 사용 불가 (const, class, function 등)

식별자 작성 스타일1 - (camelCase)

• 숫자, 문자, 불린

let dog
let vairableName

• 배열 (array)

const cats = []

• 정규표현식 ( 변수명이 r로 시작해야 한다.)

const rDesc = /.*/

• 함수

function myFunc() {}

• 이벤트 핸들러

function onClick() {}
function onKeyDown() {}

• boolean

let isReady = false

식별자 작성 스타일2 - PascalCase

• 클래스

class User {
	constructor(options) {
		this.name = options.name
	}
}

const person = new User({
	name:'홍길동'
})

식별자 작성 클래스3 - snake_case

절대 변하지 않을 경우는 스네이크케이스를 사용한다.

const API_KEY = 'dsknfaliwjt32012bhg...'

🔵 Variable, Keyword, Scope

let, const, var, 전역스코프 함수스코프 & 블록스코프

let

• 값을 재할당 할 수 있는 변수를 선언할 때 사용하는 키워드

let x = 1
x =3 

let y
y = 3

// 다음의 경우 이미 선언되었다는 에러가 뜬다
let x = 3

const

• 값을 변하지 않는 상수를 선언하는 키워드

const seven = 7
//에러발생
seven = 10

const constNum = [1,2]
constNum.push(5)
// [1,2,5]

//다음의 경우 불가능
const noValue
noValue = 10

block scope

• 조건문 또는 반복문에서 사용되는 중괄호 내부를 가리킨다.
• let const는 블록 스코프

let scopeX = 1
if (scopedX ===1 ) {
	let scopedX = 5
	console.log(scopedX) = 5
}
console.log(scopedX) // 5,1

var

• ES6 이전에 사용되던 키워드
• 예기치 않은 문제를 발생시키므로 절대 사용하지 말자!

var num = 1
var num = 2

• 블록 스코프가 아닌 전역 또는 함수 스코프를 가진다. 중괄호에 갖혀있지 않아.

var functionScopedX = 1
let blockScopedX = 1
if (functionScopedX === 1) {
  var functionScopedX = 100
  let blockScopedX = 200

  console.log(functionScopedX)  //100
  console.log(blockScopedX) //200
}

console.log(functionScopedX)  //100
console.log(blockScopedX) //1

Hoisting

var로 선언된 변수는 "선언이전"에 참조될 수 있다.
마치 변수가 위로 끌어올려지는(hoisted)것처럼 보여서 호이스팅이라한다.

console.log(myName)
var myName = 'sj' //undefined 라는 게 뜬다. 이것은 에러가 아니다.

// - 이런 식으로 선언이 호이스팅 된다.
var myName
console.log(myName)
myName = 'sj'

// - let도 호이스팅이 일어나지만 에러가 뜬다
console.log(letName)
let letName = 'sj'  //에러

var vs let/const

• var

  1. 선언 + 초기화(undefined) 동시 진행
  2. 할당

• let & const

  1. 선언
  2. TDZ( Temporal Dead Zone) - 변수에 접근하는 시점
  3. 초기화
  4. 할당

• 결론

  var의 특성과 hoisting의 개념을 알아두자.
  각 키워드의 특성과 스코프의 차이를 정확히 알아두자.

document

전역이며 글로벌객체 == window객체.
브라우저 상에서 JS를 사용할 때 전역 변수 (or 객체)를 관장하는 객체.
단, 개발할 때 전역 변수는 가능하면 지양하자