[JS] 식별자, 변수, 타입, 연산자

식별자 (identifier)

• 변수를 구분할 수 있는 변수명
• 문자, 달러($), 밑줄(_)로 시작
• 대소문자 구분, 클래스명 외에는 모두 소문자로 시작
• 예약어 사용 불가능

 

- 작성 스타일

• 카멜 케이스 (camelCase): 변수, 객체, 함수에 사용, 두 번째 단어부터 첫 글자 대문자
• 파스칼 케이스 (PascalCase): 클래스, 생성자에 사용, 모든 단어의 첫 글자 대문자
• 대문자 스네이크 케이스 (SNAKE_CASE) : 상수에 사용, 모든 단어 대문자, 단어 사이에 언더스코어(_)

 

변수

- 변수 선언 키워드

	let	const	var
재할당	가능	불가능	가능
재선언	불가능	불가능	가능
스코프	블록 스코프	블록 스코프	함수 스코프

* 선언 (Declaration): 변수를 생성하는 행위 또는 시점

* 할당 (Assignment): 선언된 변수에 값을 저장하는 행위 또는 시점

* 초기화 (Initialization): 선언된 변수에 처음으로 값을 저장하는 행위 또는 시점

* 블록 스코프 (block scope): if, for, 함수 등의 중괄호 내부, 블록 스코프를 가지는 변수는 블록 바깥에서 접근 불가

* 함수 스코프 (function scope): 함수의 중괄호 내부, 함수 스코프를 가지는 변수는 함수 바깥에서 접근 불가

 

* ES6 이후부터는 var대신 let, const를 권장! why?

: var는 호이스팅되는 특성으로 예기치 못한 문제 발생 가능

  (호이스팅: 변수를 선언 이전에 참조할 수 있는 현상, 변수 선언 이전 위치에서 접근 시 undefinde 반환)

 

 

데이터 타입

- 원시 타입 (Primitive type)

• 객체가 아닌 기본 타입
• 변수에 해당 타입의 값이 담김
• 다른 변수에 복사할 때 실제 값이 복사됨
• 숫자 타입 (Number)
  • 정수, 실수 구분없는 하나의 숫자 타입
  • 정수, 실수, 무한대, NaN(Not-A-Number; 계산 불가능한 경우 반환되는 값) ...
• 문자열 타입 (String)
  • 텍스트 데이터를 나타내는 타입
  • 작은 따옴표, 큰 따옴표 모두 가능
  • 템플릿 리터럴 (Template Literal): backtick(``)으로 표현, ${ expression } 형태로 표현식 삽입 가능
• undefined
  • 변수의 값이 없음을 나타내는 데이터 타입
  • 변수 선언 이후 직접 값을 할당하지 않으면, 자동으로 undefined 할당
  • typeof 연산자 결과는 undefined
• null
  • 변수의 값이 없음을 의도적으로 표현할 때 사용하는 데이터 타입 (개발자가 필요한 경우 할당)
  • null 타입은 원시 타입에 속하지만 typeof 연산자의 결과는 객체(object)로 표현됨
• Boolean
  • 논리적 참 또는 거짓을 나타내는 타입
  • true / false

 

- 참조 타입 (Reference type)

• Objects (Array, Function ...)
• 객체는 속성(property)의 집합, 중괄호 내부에 key와 value 쌍으로 표현
• key는 문자열 타입만 가능 (key에 띄어쓰기 등의 구분자가 있으면 따옴표로 묶어서 표현)
• value는 모든 타입 가능
• 객체 요소 접근은 점(.) 또는 대괄호[]로 가능
  • key에 띄어쓰기 등의 구분자가 있으면 대괄호 접근만 가능

 

- 객체 관련 문법

• 속성명 축약 (shorthand): 객체 정의 시, key와 할당하는 변수명이 같으면 축약 가능

const name = ['Jack', 'Rose']
const sex = ['M', 'F']

const people = {
  name: name,
  sex: sex,
}

const people = {
  name,
  sex,
}

• 메서드명 축약 (shorthand): 메서드 선언 시 function 키워드 생략 가능

const obj = {
  greeting: function () {
    console.log('Hello')
  }
};

const obj = {
  greeting() {
    console.log('Hello')
  }
};

• 계산된 속성 (computed property name): 객체 정의 시 key 이름을 표현식 이용하여 동적으로 생성 가능

const key = 'nation'
const value = ['한국', '일본', '중국']

const asia = {
  [key]: value,
}

console.log(asia) // { nation: Array(3) }

• 구조 분해 할당 (destructing assignment): 배열 또는 객체를 분해하여 속성을 변수에 쉽게 할당할 수 있는 문법

const person = {
  name: 'Jack',
  sex: 'Male',
  age: '25',
}

const name = person.name
const sex = person.sex
const age = person.age

const { name } = person
const { sex } = person
const { age } = person

 

* 조건문 또는 반복문에서 boolean이 아닌 데이터 타입은 자동 형변환 규칙에 따라 true 또는 false로 변환!

* ToBoolean Conversions (자동 형변환) 정리

데이터 타입	거짓	참
Undefined	항상 거짓	X
Null	항상 거짓	X
Number	0, -0, NaN	나머지 모든 경우
String	빈 문자열	나머지 모든 경우
Object	X	항상 참

 

연산자

- 할당 연산자

• 오른쪽에 있는 피연산자의 평가 결과를 왼쪽 피연산자에 할당하는 연산자

let x = 0

x += 10 // x = 10
x -= 3  // x = 7
x *= 10 // x = 70
x /= 10 // x = 7
x ++    // x = 8 / x += 와 같음, 1증가시키는 연산자
x --    // x = 7 / x -= 와 같음, 1감소시키는 연산자

 

- 비교 연산자

• 피연산자들(숫자, 문자, Boolean)을 비교하고 결과값을 Boolean으로 반환하는 연산자
• 문자열은 유니코드 값을 사용하며 표준 사전 순서를 기반으로 비교
  • 알파벳 순서상 후순위가 더 큼
  • 소문자가 대문자보다 더 큼

console.log(1 < 100) // true
console.log('a' > 'z') // false

 

- 동등 비교 연산자 (==)

• 두 피연산자가 같은 값으로 평가되는지 비교 후 boolean 값 반환
• 비교 시 암묵적 타입 변환을 통해 타입을 일치시킨 후 값을 비교
• 두 피연산자가 모두 객체일 경우 메모리의 같은 객체를 바라보는지 판별
• 예상치 못한 결과가 발생할 수 있으므로 특별한 경우를 제외하고 사용하지 않음

console.log(1004 == '1004') // true
console.log(1 == true) // true

// 자동 타입 변환
console.log(1004 + '1004') // 10041004
console.log(1 + true) // 2

 

- 일치 비교 연산자 (===)

• 두 피연산자가 같은 값으로 평가되는지 비교 후 boolean 값을 반환
• 엄격한 비교가 이뤄지며 암묵적 타입 변환이 발생하지 않음
  • 엄격한 비교: 두 비교 대상의 타입과 값 모두 같은지 비교하는 방식
• 두 피연산자가 모두 객체일 경우 메모리의 같은 객체를 바라보는지 판별

console.log(1004 === '1004') // false
console.log(1 === true) // false

 

- 논리 연산자

• and 연산: &&
• or 연산: ||
• not 연산: !
• 단축 평가 지원
  • false && true => false
  • true || false => true

 

- 삼항 연산자 (Ternary Operator)

• 세 개의 피연산자를 사용하여 조건에 따라 값을 반환하는 연산자
• 가장 왼쪽의 조건식이 참이면 콜론(:) 앞의 값을 사용, 거짓이면 콜론(:) 뒤의 값을 사용
• 삼항 연산자의 결과는 변수에 할당 가능
• 한 줄에 표기하는 것을 권장

console.log(true ? 1 : 2) // 2
console.log(false ? 1 : 2) // 1