[TIL] JavaScript 주요 문법(1)

---

🍎 JavaScript를 이용한 언어

• 서버 개발 : Node.js, Nest.js, Express
• 앱 개발 : React Native, NativeScript, Cordova
• 프론트엔드 개발 : jQuery, Backbone.js, React, Vue, Angular
  ( 부가적인 것들 : i18n-글로벌 서비스, WebRTC-다대다 서비스, etc...)

---

🍏 브라우저 주요 동작 원리

• 통신 : 서버와의 통신
• 랜더링 : DOM 객체를 화면에 그리기
• 스크립트 실행 : 자바스크립트를 실행

---

🍊 JavaScript 자료형

1. Number

// Number 타입
let integer = 126 // 정수
let float = 1.26 // 소수
let nan = parseInt('abc') // NaN
let inf = 1 / 0 // 무한

2. String

// String 타입
let string1 = "'String'"
let string2 = '"String"'
let string3 = `-${string2}-`
let string4 = 'I\'m String';

3. Boolean

// Boolean 타입
let bool1 = true
let bool2 = false

4. Object

// Object 타입
let object = {
  name: "Song InJae",
  age: 25,
};
object[age] // 25
// key 값은 무조건 문자열!!

5. Array

// Array 타입
let array = [0, 'a', true]
array[0] // 0
array[1] // 'a'
array[2] // true

6. Function

// Function 타입
let helloWorld = function() {
  return 'hello world'
}

7. Undefined & Null

let a;
console.log(a) // undefined
let b = null;
console.log(b) // null
// 차이점
// undefined : 변수 또는 상수가 선언되었지만 아무런 값도 대입되지 않은것
// null : 해당 변수가 비어있음을 명시한 것

---

🍋 메모리

메모리가 거치는 과정 : 할당 -> 사용 -> 해제

자바스크립트 엔진은 가상머신으로 구성되어있다.
가상머신은 메모리 모델을 구현하며, Heap 영역과 Call Stack영역으로 구성되어있다.

Heap : 참조 타입(Object, Array, Function)
Call Stack : 원시 타입(String, Number, Boolean, Null, Undefined)

일반 메모리 주소 할당

let variable = 123 // (1)
let variable2 = variable // (2)
variable = variable + 1 // (3)

(1)과 (2)의 경우에는 같은 메모리 주소 할당
단, (3)의 경우와 같이 메모리 안의 값이 바뀌는 경우에는 새 매모리 주소 할당

배열이 상수로 선언되도 push가 가능한 이유

const arr = [];
arr.push(1)
arr.push(2)
arr.push(3)

1. 배열같은 경우 Object타입이기 때문에 참조 타입으로 분류
2. 배열을 선언하면 Heap에 배열영역이 생성
3. Call Stack에 생성된 배열변수는 Heap에서 생성된 배열에 메모리주소를 참조
4. 여기서 Heap메모리는 동적으로 크기가 변경 가능
5. 따라서 배열에 값을 추가하면 Heap메모리 영역에 그대로 할당

-> 콜스택에 할당된 메모리를 변경하는 것이 아닌 Heap영역에 메모리를 변경하기 때문

---

🍌 연산자 종류

1. 할당 연산자(ex. +=, -=, *=, /=, %=, <<=, >>=)
-> 오른쪽 표현식을 왼쪽 피연산자 값에 할당하는 연산자

2. 비교연산자(ex. ==, !=, ===, !==, >, >=, <, <=)
-> 좌측 피연산자와 우측 피연산자를 비교하는 연산자

3. 산술연산자(ex. +, -, *, /)
-> 덧셈, 뺄셈, 곱셈, 나눗셈을 하는 연산자(Number을 반환)

4. 비트연산자(ex. &, |, ^, <<, >>)
-> 비트를 직접 조작하는 연산자

5. 논리연산자(ex. &&, || !)
-> Boolean을 통해 참과 거짓을 검증하는 연산자

6. 삼항연산자(ex. x > y ? 값1 : 값2)
-> 조건에 따라 값을 선택하는 연산자

7. 관계연산자(ex. "속성명" in x)
-> 객체에 속성이 있는지 확인하기 위한 연산자

8. typeof
-> 피연산자의 타입을 반환하는 연산자

---

🍉 스코프와 클로저

스코프 : 유효범위라고 부르며 변수가 어느 범위까지 참조되는지를 의미

- 전역스코프와 지역 스코프로 나뉨
- var을 사용하면 호이스팅 되어 변수선언이 함수 상단으로 올라감(때문에, 블록내부 새롭게 선언해도 블록 외부 변수값도 변함)
- var은 함수 수준 스코프
- let, const는 블록 수준 스코프

호이스팅
코드가 실행되기 전, 변수나 함수 선언이 해당 스코프의 최상단으로 끌어올려진 것 같은 현상

클로저 : 함수가 선언된 환경의 스코프를 기억하여 함수가 스코프 밖에서 실행될 때에도 기억한 스코프에 접근할 수 있게 만드는 문법

은닉화 : 클로저를 이용하여 내부 변수와 함수를 숨길 수 있다.