javascript

변수

let

  • 값을 재할당 할 수 있는 변수를 선언
  • 단, 각 변수는 한번만 선언 할 수 있다. (할당은 여러번 가능)
  • 블록 유효 범위(block_scope)
// 변수 지정

let x =1
undefined
x
1
let x = 2
VM124:1 Uncaught SyntaxError: Identifier 'x' has already been declared
    at <anonymous>:1:1
(anonymous) @ VM124:1
x = 3
3
// 할당과 선언  => 블락 유효처리 

// let (변수)
let x = 1
if (x === 1) { 
  let x = 2

  console.log(x) // 2
}
console.log(x) // 1


function letTest() {
  let x = 1
  if (true) {
    let x = 2
    console.log(x) // 2, 상위 블록과 다른 변수
  }
  console.log(x) // 1
}

letTest()

const

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

    • 담긴 값이 불변임을 뜻하는 게 아니다.
    • 단지 상수의 값은 재할당 할 수 없고, 재선언도 안된다.
    • 블록 유효범위(block_scope)
    // const 정수
  
// const 선언시에 후기 값을 생략하면 오류바생
const MY_FAV
  
  
// =>
const MY_FAV = 7
console.log('my faviorite numbrer is:' + MY_FAV)
// 상수를 재할당 하려는 시도는 오류 발생.
//MY_FAV = 20
//const MY_FAV = 20
// let MY_FAV = 20
// var MY_FAV = 20
  
  
if (MY_FAV === 7) {
  //  블록 유효 범위로 지정된 MY_FAV 이라는 변수를 만드므로 괜찮다.
  // 즉, 전역이 아닌 범위안이므로 읾 공간에서 출동이 나지 않는다.
    
  const let MY_FAV = 20
    
  console.log('my faviorite number is' + MY_FAV) // 20
}
  
console.log(MY_FAV) // 7

var(변수)

  • ES6 이전의 feature로 예기치 않은 문제를 많이 발생시키는 키워드로 절대 사용하지 않는다.
  • 함수 유효 범위 (function scope)
  • var로 선언된 변수의 범위는 현재 실행 문맥인데, 그 문맥이 함수 혹은 함수 외부의 전역으로도 갈 수 있다.
//var (변수)

function varTest() {
  var x = 1
  if (true) {
    var x = 2
    console.log(x) // 2, 상위 블록과 같은 변수
  }
  console.log(x) // 2
}

varTest()

//let 과 var

var a = 1
let b = 2

if (a === 1) {
  var a = 11
  let b = 22

  console.log(a) // 11
  console.log(b) // 22
}

console.log(a) // 11
console.log(b) // 2

  • 어디에 쓸지 결정하는 건 프로그래머의 몫

  • PI, DAYS_IN_JUNE과 같은 경우는 상수가 적절함.

  • WEATHER_TEMP처럼 모호한 경우(각자가 생각하는 좋아하는 기온이 다를 수 있으니까) 이런 경우는 변수가 적절

일단 모든 선언에서 가능한 한 상수(const) 를 사용해야 한다.

먼저, 상수를 생각하고 값이 바뀌는 것이 더 자연스러운 상황이라면, 그때 변수로 바꿔서 사용하는 것을 권장.

const dog

정리

  • var : 할당 및 선언 자유 / 함수 스코프
  • let : 할당 자유 / 선언은 한번만 / 블록 스코프
  • const : 할당 및 선언 모두 한번만 / 블록 스코프

식별자(identifier)

  • 변수명은 식별자라고 불리며 특정 규칙을 따른다.
  1. 반드시 문자, 달러($), 또는 및줄로 시작해야 한다. 이후는 숫자도 가능.
  2. 대소문자를 구분하며 클래스명을 제외하고는 대문자로 시작하지 않는 것이 좋다.
  3. 예약어는 사용 불가능(class, super, const, case, function…)
// 식별자 작성 스타일
//1. 카멜 케이스(camelCase) - 객체, 변수, 함수(=== lower-camel-case)
let dog
let variableName

// 배열은 복수형 변수명을 사용
const dogs = []

//정규 표현식은 'r'로 시작
const rDecs = /.*/

//함수
function getPropertyName() {
  return 1
}

// boolean 을 반환하는 변수나 함수 - 'is'로 시작
let isAvailable = false

//2. 파스칼 케이스 (PascalCase) - 클래스, 생성자 ( === upper-camel-case)

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

// 3. 대문자 스네이크 케이스 (SNAKE_CASE) - 상수
// 이 표현은 변수와 변수의 속성이 변하지 않는다는 것을 프로그래머에게 알려준다.
const API_KEY = '&DFJ#F(DFJD*FYDF&DNF&DMD^FBD%FGD$FG#J@JHF'

호이스팅

  • 이 개념은 JS변수, 함수나 표현이 최상단으로 올려지는 것을 말한다.
  • 끌어 올려진 변수는 undefined값을 반환 한다.
  • 변수와 함수를 위한 메모리 공간을 확보하는 과정.

var 할당과정

  1. 선언 + 초기화
  2. 할당

let 할당 과정

  1. 선언
  2. TDZ (임시적 사각지대) : Temporal Dead Zone
  3. 초기화
  4. 할당
//var
console.log(a) // undefined => 메모리 미리 확보
var a = 10
console.log(a)


// js 가 이해한 코드
var a
console.log(a) // undefined
a = 10
console.log(a)


//let => 안됨.  ReferenceError: Cannot access 'b' before initialization
console.log(b)
let b = 10
console.log(b)

//마찬가지로 아래와 같은 과정을 거친다.
let b
console.log(b)
b = 10 // 할당 불가 (초기화가 아직 안됨)
console.log(b)
// WHY? 초기화 전에 할당할려고 해서!

let, const 의 정의가 평가되기까지 초기화가 되지 않는 다는 의미이지, 호이스팅이 되지 않아 정의가 되지 않는 다는 의미와는 다르다.

Babel 로 ES6+ 문법을 그보다 아래 버전의 JS 로 변경해서 사용하기도 한다.

타입과 연산자

타입

  1. Primitive
  2. Reference

Primitive

  • 불변하다는 특징을 띄고 있다.
  1. Numbers
    • Infinity : 양의 무한대와 음의 무한대로 나뉨.
    • NaN : Not a Number, 표현할 수 없는 값, 자기 자신과 일치하지 않는 유일한 값을 표현할 때 쓰임.
      • 0 / 0, ‘문자’ * 10, Math.sqrt(-9)
  2. Strings
  3. Boolean
  4. Empty Value

literal

  • 값을 프로그램 안에서 직접 지정한다는 의미

  • 값을 만드는 방법

  • JS는 우리가 제공한 리터럴 값을 받아 데이터를 만듦.

    //room 변수를 가리키는 식별자 / 'conference_room'(작은따옴표 안)은 리터럴
let room = 'conference_room'
let hotelRoom = room
      
// 에러, conference_room 식별자는 존재하지 않는다.
hotelRoom = conference_room
    • JS 는 따옴표를 통해 리터럴과 식별자를 구분한다.
    • 식별자는 숫자로 시작할 수 없으므로, 숫자에는 따옴표가 필요없다. (숫자형 리터럴)

null//undefined

  • 동일한 역할을 하는 이 2개의 키워드가 존재하는 이유는 단순한 JS의 설계 실수.
  • 큰 차이를 두지 말고, interchangeable 하게 사용할 수 있도록 권장.

undefined

  • 값이 없을 경우 JS가 자동으로 할당 해주는 값
let frist_name // 선언만 하고 할당하지 않음.
console.log(first_name) // undefined

null

  • 값이 없음을 우리가 표현하기 위해서 인위적으로 사용하는 값
let last_name = null
console.log(last_name) // null - 의도적으로 값이 없음을 표현.

연산자

let c = 0
undefined
c += 10
10
console.log(c)
VM161:1 10
undefined
 c -= 3
7
c *= 10
70
c++
70
c
71
c--
71
c
70
3 > 2
true
2 > 3
false
'A' < 'B'
true
'Z' < 'a'
true
a = 3
3
const a = 1
undefined
const b = 2
undefined
const b = 1
VM448:1 Uncaught SyntaxError: Identifier 'b' has already been declared
    at <anonymous>:1:1
(anonymous) @ VM448:1
b = 1
VM470:1 Uncaught TypeError: Assignment to constant variable.
    at <anonymous>:1:3
(anonymous) @ VM470:1
a == b
false
a == 1
true
const d = '1'
undefined
a == d
true
a === d
false
a == Number(d)
true
a === Number(d)
true
8 * null
0
'5' - 1
4
'5' + 1
"51"
'five' * 2
NaN
a === d
false
true && false
false
true && true
true
1 && 0
0
4 && 7
7
false || true
true
false || false
false
4 || 7
4
7 || 4
7
4 && 8
8
8 && 4
4
!true
false
!false
true

3항 연산자 블리언 값이 true이면 왼쪽, false이면 오른쪽 값을 출력

true ? 1 : 2
1
false ? 1 : 2
2

const result = Math.PI > 4 ? 'YES!' : 'No!!'
undefined

조건문과 반복문

조건문

  • if, else if 문
const userName = prompt('Hello! who r u??')
undefined
userName
null
let message = ''
undefined
const userName = prompt('Hello! who r u??')
VM1880:1 Uncaught SyntaxError: Identifier 'userName' has already been declared
    at <anonymous>:1:1
(anonymous) @ VM1880:1
if (userName === '1q2w3e4r') {
	message = '<h1>This is admin page</h1>'
} else if (userName === 'ssafy') {
	message = '<h1>You are from ssafy </h1>'
} else {
    message = `<h1>hello, ${userName}</h1>`
}
"<h1>hello, null</h1>"
message
"<h1>hello, null</h1>"
document.write(message)
undefined
  • switch, case 문 ( break 필수 )
const userName = prompt('Hello! who r u??')
userName
"1q2w3e4r"
let message = ''
undefined

switch(userName) {
    case '1q2w3e4r': {
		message = '<h1> This is admin</h1>'
    }
    case 'ssafy': {
		message = '<h1> you r from ssafy </h1>'
    }
	default: {
		message = `<h1> Hello, ${userName}</h1>`
    }
}
"<h1> Hello, 1q2w3e4r</h1>"

switch(userName) {
    case '1q2w3e4r': {
		message = '<h1> This is admin</h1>'
        break
    }
    case 'ssafy': {
		message = '<h1> you r from ssafy </h1>'
		break
    }
	default: {
		message = `<h1> Hello, ${userName}</h1>`
		
    }
}
"<h1> This is admin</h1>"

!! break 항상 기억하자!