[JavaScript] 자바스크립트 기초 문법 및 호이스팅 정리

 

식별자 정의 작성 특징

- 카멜 케이스 (camelCase) : 변수, 객체, 함수에 사용

// 변수
let cat
let name

// 객체
const info = {animal : 'cat', age : '3'}

//함수
function add(){}
function name(){}​

- 파스칼 케이스 (PascalCase) : 클래스, 생성자에 사용

// class
class Person{
  constructor(options){
    this.name = options.name
  }
}

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

- 대문자 스네이크 케이스(SNAKE_CASE) : 상수에 사용하고, 보통 변경될 가능성이 없는 값을 의미

// 불변 상수
const PI = Math.PI

// 재할당하지 않는 변수
const NUMS = [1,2,3]​

JSON

- JavaScript Object Notation의 약자로 자바스크립트 객체의 형식을 기반으로 만들어진 문서
- 객체를 만들 때 사용하는 표현식을 의미
- 단순히 데이터를 표시하는 표현 방법

undefined & Null 차이

undefined
- 변수를 선언하고 값을 할당하지 않은 상태
- Null은 변수를 선언하고 빈 값을 할당한 빈 객체의 상태

typeof null // object
typeof undefine // undefined
null === undefined // false
null == undefined // true
null === null // true
null == null // true
!null // true​

 

변수 선언 방법

let
- 블록 스코프를 갖는 지역 변수로 재할당은 가능하나 재선언이 불가능한 특징

// 선언 및 초기값 할당 후 재할당 가능
let a = 10
a = 20

// 선언 및 초기값 할당 후 재선언 불가
let a = 10
let a = 20 // 불가능​

 

const
- 블록 스코프 읽기 전용 상수를 선언할 수 있고, 재할당과 재선언 불가능한 특징

// 선언 및 초기값 할당 후 재할당 불가능
const a = 10
a = 20 // 불가능

// 선언 및 초기값 할당 후 재선언 불가
const a = 10
const a = 20 // 불가능​

 

var
- 변수 선언에 사용하고 재할당과 재선언 가능
- 호이스팅되는 특성으로 인해 예기치 못한 문제가 발생할 수 있음

// 선언 및 초기값 할당 후 재할당 가능
var a = 10
a = 20

// 선언 및 초기값 할당 후 재선언 가능
var a = 10
var a = 20​

※ 변수 설정 시 var, const, let 키워드 중 하나를 선언하지 않을 경우 자동으로 var로 선언

호이스팅

변수를 선언 이전에 참조할 수 있는 현상으로 var로 선언된 변수의 경우 이런 현상 발생
JavaScript의 ES6 버전 이후로는 var 대신 const와 let 사용 권

console.log(animal) // undefined
var animal = '고양이'
// 위 코드를 아래와 같이 이해함
var animal
console.log(animal)
var animal = '고양이'​

 

JavaScript에서 변수들은 실제 실행 시에 코드 최상단으로 끌어올려지기에 var로 선언 시에 undefined로 값이 초기화되는 과정이 동시에 일어날 수 있음

console.log(animal) // undefined
var animal = '강아지'

console.log(animal) // error발생
let animal = '강아지'

console.log(animal) // error발생
constanimal = '강아지'​

 

JavaScript의 데이터 타입

원시 타입(Primitive Type)
- Number → 정수 또는 실수형 숫자를 표현하는 자료형

const a = 1
const b = -4
const c = 6.66
const d = Infinity
const e = NaN // Not a Number​

- String → 문자열을 표현하는 자료형

// 작은 따옴표나 큰 따옴표 둘다 가능
const s1 = "문자1"
const s2 = '문자2'

// 덧셈을 통해 문자열 붙이기 가능 (그외 사칙연산은 불가)
const S = s1 + s2 // 문자1문자2

// 따옴표를 사용하면 \n을 통해서만 줄바꿈
const Hi = "안녕\n하세요"
// 안녕
// 하세요

// Template Literal을 사용하면 줄 바꿈, 변수 사용 등 가능 `(backtick) 사용
// 내부에 변수 선언시 ${ }를 통해 사용 가능
const sentence = `이 동물의 종류는 ${aniaml} 입니다.`

- null → 값이 없음을 나타내는 자료형 (typeof 연산자를 통해 타입 확인 시 object 타입)

let name = null // 값이 없음을 의도적으로 표현

undefined → 값이 할당되지 않은 변수를 나타내는 자료형 (typeof 연사자를 통해 타입 확인 시 undefined 타입)

let a // 선언하고 값을 할당하지 않음​

- Boolean → 참과 거짓을 표현하는 자료형

const x = true // javaScript에선 소문자로 표현함
const y = false​

---

참조 타입(Reference Type)
- 객체(Object) : 속성의 집합으로 key와 value 쌍으로 표현하며, 요소에 접근 시에.이나 []를 사용하여 접근

const pet = {
  name = 'Tom',
  'detail' : {
    animal = 'cat',
  	age = '3',
  },
}
console.log(pet.name)
console.log(pet['name'])
console.log(pet['detail'])
console.log(pet['detail'].age)

- 배열(Array) : 키와 속성들을 담고 있는 참조 타입의 객체로 순서를 보장하는 특징이 있음

const nums = [1, 2, 3, 4, 5]

console.log(nums[0]) // 1
console.log(nums[-1]) // undefined

//배열의 길이는 배열.length 형태로 접근 가능
console.log(nums.length)

- 함수(function) : 함수를 정의

//일반적인 함수 선언식

function 함수명(매개변수){
	//내용 작성
}

function plus(a, b) {
  return a + b
}

// 함수 표현식
변수키워드 함수명 = function(매개변수){
	//내용 작성
}
const myplus = function(a, b){
  return a+b
}

연산자

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

let a = 0
a += 10 // a에 10을 더함
a -= 10 // a에 10을 뺌
a *= 10 // a에 *을 곱함
a++ // a에 1을 더함
a-- // a에 1을 뺌​​

 

비교 연산자 : 피연산자들을 비교하여 결괏값을 boolean으로 변환하는 연산자

5 > 2 // true
5 < 2 // false
// 문자열은 유닠코드 값을 사용하여 표준 사전 순서를 기반으로 비교
'A' < 'B' // true
'Z' < 'a' // true
'가' < '나' // true​

동등 연산자 : 두 연산자가 같은 값으로 평가되는지 비교 후 boolean 값 반환하며 비교 시 타입을 일치시킨 후 같은 값인지를 비교

// 예상치 못한 결과가 발생 할 수 있으므로 특별한 경우를 제외하고는 사용x
const a = 1
const b = '1'

console.log(a == b) // true
console.log(a == true) //true

일치 연산자 : 두 피연산자의 값과 타입이 모두 같은 지 비교 후 boolean 값 반환

const a = 1
const b = '1'

cosole.log(a === b) // true​

논리 연산자 : and, or, not 등의 논리를 판단하는 연산자

// and 연산 &&
true && true // true
true && fasle // false

// or 연산 ||
true || false // true
false || false // false

// not 연산 !
!true // false
!false // true

삼항 연산자 : 3개의 피연산자를 사용하여 조건에 따라 값을 반환하는 연산자

//가장 앞의 조건식이 참이면 : 앞의 값이 반환
//가장 앞의 조건식이 거짓이면 : 뒤의 값이 변환

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

스프레드 연산자 : 배열이나 객체를 전개하여 각 요소를 개별적인 값으로 분리하는 연산자

const numbers = [1,2,3]
const numbers2 = [...numbers, 4, 5] // [1, 2, 3, 4, 5]
const numbers3 = [...numbers] // [1,2,3] 얕은 복사

const ob = {a : 1, b: 2}
const ob2 = {c:3, ...ob} // {a:1, b:2, c:3}
const ob3 = {...ob} // {a:1,  b:2} 얕은 복사

조건문

if 문을 활용하여 구성

const a = 1
if (a === 1) {
  console.log(1)
}
else if (a === 2){
  console.log(2)
}
else{
  console.log(3)
}​

반복문

while : 조건문이 거짓이 되거나 임의로 중단할 때까지 문장 반복 수행

while(조건문){
  // 내용 작성
}​

for : 특정한 조건이 거짓으로 판별될 때까지 반복

for(초기문; 조건문; 증감문){
  // 내용 작성
}

for (let i = 0; i<4; i++){
  console.log(i)
} // 0, 1, 2, 3

//for문 최초 정의한 i를 재할당 하면서 사용하기에 const를 사용하면 에러발생

for - in : 객체의 속성을 순회할 때 사용

// 배열도 순회 가능하나 인덱스 순으로 순회한다는 보장이 없음
for (variable in 객체){
  // 내용 작성
}

const fruits = {a : 'apple', b : 'banana'}
for (const key in fruits) {
  console.log(key) // a, b
  console.log(fruits[key]) // apple, banana
}

// for - in은 속성 이름을 통해 반복
const numbers = [3, 5, 7]
for (const i in numbers){
  console.log(i)
} // 0 1 2

// 매 반복시 해당 변수를 새로 정의하여 사용하므로 const를 사용하여도 에러 발생x

for - of : 반복 가능한 객체를 순회할 때 사용

for (variable of 객체){
  // 내용 작성
}

// for - of 속성 값을 통해 반복
const numbers = [0, 1, 2, 3]
for (const num of numbers){
  console.log(num)
} // 0, 1, 2, 3

// 매 반복시 해당 변수를 새로 정의하여 사용하므로 const를 사용하여도 에러 발생x

배열.forEach() : 배열이 가진 각 요소를 순회하면서 함수 실행

const numbers = [1, 2, 3]
numbersforEach(function (element) {
  console.log(element)
})
// 1
// 2
// 3​