자바스크립트 기초 문법1 -변수 선언하기-

## 자바스크립트 코드 스타일 가이드는 여러개가 존재하지만 

Airbnb Style Guide를 바탕으로 작성 ##

 

 

1. 세미콜론

 

자바스크립트는 문장의 끝에 세미콜론을 선택적으로 사용 가능함

 

세미콜론이 없으면 ASI에 의해 자동으로 세미콜론이 삽입(Automatic Semicolon Insertion, 자동 세미콜론 삽입 규칙)

 

요즘엔 ASI도 성능이 좋아서 안써도 문제되는 일은 크게 없다고는함

 

이걸 써야하냐, 말아야하냐로 아직도 싸운다고함

 

console.log('hello');

console.log('javascript')

 

 

2. 들여쓰기와 코드 블럭

 

python은 4칸 들여쓰기를 썼지만, 자바스크립트는 2칸 들여쓰기를 사용

 

블럭(block)은 if, for, 함수 등에서 중괄호 {}내부를 말함

 

python이 들여쓰기로 코드 블럭을 구분하지만, 자바스크립트는 {}를 사용해서 코드 블럭을 구분함

 

if (isClean){ //중괄호 내부가.. if문의 영역
  console.log('clean!') //2칸 들여쓰기
}

 

3. 주석

 

한줄 짜리 주석은 //

 

여러 줄은 /* */을 사용

 

//이 줄은 주석입니다.
//console.log('화면에 표시되지 않아요')

/*
여러 줄 주석은
이렇게 사용합니다.
*/

 

 

4. 식별자

 

변수를 구분할 수 있는 변수명

 

반드시 문자, 달러표시($), 밑줄(_)으로 시작함

 

대소문자 구분, 클래스명 외에는 모두 소문자로 시작함

 

예약어 if, for, function 등은 사용 불가능함

 

 

4-1) 카멜 케이스(camelCase)

 

변수, 객체, 함수에 사용

 

첫번째 단어는 소문자로 시작하고 다음 단어부터 시작 글자는 대문자로?

 

//변수

let variableName

//객체

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

//함수

function getName() {}

 

 

4-2) 파스칼케이스(PascalCase)

 

클래스, 생성자에 사용

 

모든 단어의 첫 글자를 대문자로 사용함

 

//클래스

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

//생성자 함수

function User(options) {
  this.name = options.name
}

 

 

4-3) 대문자 스네이크 케이스(SNAKE_CASE)

 

상수(constant): 개발자 의도와 상관없이, 변경될 가능성이 없는 값에 사용함

 

모든 글자를 대문자로 쓰고, 단어 사이에 _으로 연결

 

// 값이 바뀌지 않을 상수

const API_KEY = 'my-key'
const PI = Math.PI

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

 

5. 변수 선언 키워드

 

파이썬과 다르게 자바스크립트는 변수의 특징을 선언하는 키워드를 명시해야함

 

########################

 

선언(declaration)

 

변수를 생성하는 행위 또는 시점

 

//선언

let foo
console.log(foo) //undefined

 

할당(assignment)

 

선언된 변수에 값을 저장하는 행위나 시점

 

//할당

foo = 11
console.log(foo) //11

 

초기화(initialization)

 

선언된 변수에 처음으로 값을 저장하는 행위나 시점

 

//선언 + 할당
//초기화

let bar = 0 
consolt.log(bar) // 0

 

블록 스코프(block scope)

 

if, for, 함수 등에서 중괄호 {}의 내부 영역을 말한다

 

블록 스코프를 가지는 변수는 블록 바깥에서 접근할 수 없다

 

let x = 1

if (x === 1) {
//블록스코프
  let x = 2
  console.log(x) //2
//블록스코프 
}

//블록 스코프에서 선언한 x=2가 나와야할것 같지만..
console.log(x) //1

 

5-1) let

 

블록 스코프를 갖는 지역 변수를 선언할 수 있음

 

선언과 동시에 원하는 값으로 초기화 가능함

 

물론 선언시에 초기화하지 않아도 된다. 이 경우에 undefined로 초기화함

 

 

재할당이 가능하지만 재선언은 불가능함

 

//재할당

let number = 10
number = 20
console.log(number) //20

 

재선언시 다음과 같이 실제로 에러남

 

 

 

5-2) const

 

블록 스코프를 가지는 읽기 전용 상수를 선언할 수 있음

 

재할당이 불가능하고 재선언도 불가능함

 

말 그대로 진짜 상수임(constant)

 

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

 

실제로 재할당하면 에러남

 

 

역시 실제로 재선언하면 에러난다

 

 

실제로 선언시에 초기화하지 않으면 에러난다

 

 

5-3) var

 

변수 선언

 

동시에 값을 초기화가능

 

재할당이 가능하고 재선언도 가능하다

 

"호이스팅"이라는 특성으로 예기치 못한 문제가 발생할 수 있어서 ES6(자바스크립트 표준안) 이후 var대신 const와 let을 사용하는 것을 권장함

 

함수 스코프(function scope)를 가진다

 

####################

 

함수 스코프(function scope)

 

블록 스코프중에 특히 함수의 중괄호 내부는 함수 스코프라고 부른다

 

함수 스코프를 가지는 변수는 함수 바깥에서 접근 불가능함

 

 

#####################################

 

변수 선언시에 var, const, let 키워드 중 하나를 사용하지 않으면 자동으로 var로 선언

 

근데 재선언인지 재할당인지 모르겠어서 var인지.. 모르겠다

 

var인지 출력하는 방법이 따로 있는지 모르겠음(찾아봐도 안나와)

 

number = 10
number = 20
console.log(number) //20

 

어떻게 머리 써서 확인해볼려고 했는디

 

 

걍 키워드는 꼭 써... 그 뭐 길다고

 

 

6. 호이스팅(hoisting)

 

변수를 선언하기 이전에 참조할 수 있는 현상

 

var로 선언된 변수는 선언하기 이전에 참조할 수 있게 된다

 

변수 선언하기 이전에 접근하면 undefined를 반환함

 

 

자바스크립트는 위 코드를 다음과 같이 이해한 것이다.

 

console.log(name) //undefined

var name = '윤대혁'

###########################################

// 위 코드를 다음과 같이 해석함
var name
console.log(name)

var name = '윤대혁'

 

자바스크립트는 변수들을 실제 실행시에 코드 최상단으로 끌어올리며 이것을 호이스팅이라고 부른다.

 

그래서 var로 선언된 변수는 선언 시에 undefined로 값이 초기화되는 과정이 동시에 일어남

 

선언하기 전에 접근이 가능한 것은 프로그래밍의 논리적인 흐름을 깨뜨리므로, 이를 방지하기 위해

 

let, const가 추가되었다..

 

즉 var은 이제는 사용하지 말아야할 키워드이지만 많은 기존 자바스크립트 코드들이 ES6이전의 문법으로 작성되어서 호이스팅을 이해할 필요가 있다.

 

 

어디에 변수 쓰고 상수 쓸지 결정하는 것은 프로그래머의 몫이지만

 

Airbnb 스타일 가이드에서는 기본적으로 const 사용을 권장하고, 재할당해야하는 경우에 let을 쓰는 것을 권장