클라우딩 어플리케이션 엔지니어링 TIL Day 9

본격적으로 자바스크립트의 기본 문법 내용을 배우는 날이다

자바스크립트의 특징을 완벽하게 이해할 수 있도록 열심히 공부해야겠다

---

# 데이터와 형태

# 변수란?

데이터를 처리하는 과정에서 처리 흐름마다 값들을 기억해두어야 한다

컴퓨터는 데이터를 기억하기 위해 메모리를 활용한다

메모리 주소값을 대신할 식별자를 지정하고 식별자를 통해서 데이터를 접근하는데

식별자가 변수이다

변수란 데이터를 담아둔 메모리의 주소를 쉽게 식별하기 위해 붙인 이름

---

# 변수 생성 방법과 호이스팅

변수는

1. 선언 단계 : 변수를 변수 객체에 등록

2. 초기화 단계 : 변수를 메모리에 할당하고 undefined로 초기화

3. 할당 단계 : undefined로 초기화된 변수에 실제로 값을 할

를 거쳐 생성된다

변수 생성 3단계는 var, const, let 별로 다르게 동작한다

▶ var

코드 평가단계 : 선언과 동시에 초기화 진행

코드 실행단계 : 값 할당 진행

코드를 선언함과 동시에 초기화를 진행하고 실행될 때 값을 할당한다

//var 키워드 알아보기
console.log(a);
console.log(b);

//변수가 할당되기 전에 console을 찍었는데
//undefined가 출력된다 -> 선언과 동시에 초기화된다!
//이러한 현상을 '호이스팅'이라고 한다
var a = 1;
var b = 2;

[Running] node "c:\Users\aldls\Desktop\vscode\learn-html-css-javascript\JS\0105_exam\main.js"
undefined
undefined

# var 키워드 단점

1. 키워드의 생략 가능 -> 재할당하는 모습이 동일해서 혼란을 줄 수 있다

2. 중복 선언 가능 -> 결과 예측에 혼선을 줄 수 있다

3. 변수 호이스팅 -> 변수 결과 예측이 어렵다

4. 전역변수화 -> 어디서든 참조가 가능하기 때문에 무분별한 변수 접근이 가능해진다

 

# 호이스팅이란?

모든 선언문이 해당 Scope의 선두로 옮겨진 것처럼 동작하는 특성

 

#  Scope란?

변수와 함수의 유효 범위

변수나 함수가 어디에서 정의되고 어디에서 참조될 수 있는지를 결정하는 규칙의 집합

▶전역 스코프 (전역 변수)

프로그램 전체에서 접근 가능

//전역 변수
var global = "나는 전역변수다";

function globalFunction() {
  console.log(global);
}

globalFunction();

▶지역 스코프

함수 내에서 선언된 변수의 유효 범위

함수 호출 시마다 새로운 지역 스코프가 생성된다

함수 내에서만 접근 가능하며 외부에서는 참조할 수 없다

//지역 스코프
function localFunction() {
  var local = "나는 지역변수다";
  console.log(global);
}
localFunction();

▶블록 스코프

ES6에서 let, const 키워드로 선언된 변수는 블록 스코프를 갖는다

{} 로 둘러싸인 범위

//블록 스코프
if (true) {
  let block = "나는 블록스코프다";
  console.log(block);
}

▶ let, const

코드 평가단계 : 선언 진행

코드 실행단계 : 초기화 진행, 값 할당 진행

코드가 실행이 될 때 변수를 메모리에 할당하고 값을 할당한다

블록 레벨 스코프 -> 변수에 한정적으로 접근이 가능하기 때문에 예측 가능한 범위 내에서 변수 변경이 일어난다

# let

재할당이 가능한 변수 타입

값을 할당하지 않아도 생성

# const

수정이 불가능한 상수 변수

무조건 값을 할당

---

# 자료형이란?

데이터의 종류를 데이터 타입, 즉 자료형 이라고 한다

# 원시 타입

String, Number, BigInt, Undefined, Null, Boolean, Symbol

값을 변경할 수 없다 -> immutable value

값으로써 전달된다 -> 참조 형태로 전달되지 않는다

▶ Number Type

자바스크립트는 모든 숫자를 실수로 처리한다 -> 정수 타입 없음

배정밀도 64비트 부동소수점(IEEE 754) 형식 -> 실수를 연산할 때 근사값으로 처리된다

- Infinity : 무한대를 나타내는 숫자

- NaN : 숫자가 아님

typeof Infinity;   //number
typeof NaN;   //number

 

▶ BigInt Type

Number의 최대값을 넘는 정수 안전하게 저장하고 연산 가능

다른 타입과 혼합하여 연산할 수 없다

 

▶ String Type

텍스트 데이터를 나타낼 때 사용

UTF-16 코드 단위의 시퀀스

문자값은 불변한다

const a = "mamama";
a[0] = "kakaka"; //kakaka
console.log(a); //mamama

'', "", `` 으로 감싸서 문자열임을 표현

# 템플릿 리터럴 표기법 (``)

ES6 부터 사용 가능

`전달하고자 하는 말 ${표현식}`

으로 강제 String 형변환

 

▶ Boolean Type

논리적 데이터 유형

참 혹은 거짓의 값만 가질 수 있다

 

▶ Undefined Type

변수 선언 후 값을 할당하지 않은 변수에 할당이 되는 값

 

▶ Null Type

값이 없다는 것을 의도적으로 표현할 때 사용

일치연산자(===) 사용하여 타입 체크

 

▶ Symbol Type

ES6에 추가된 타입

중복되지 않는 유니크한 값이기 때문에 객체의 key로 사용 가능하다

클래스나 객체 형식의 내부에서만 접근할 수 있도록 전용 객체 속성의 키로 사용된다

const b = {
  [Symbol.for("good")]: "job",
};

console.log(b[Symbol.for("good")]); //job

 

# 원시 래퍼 객체

원시 데이터를 사용할 경우, 해당 래퍼 객체들을 상속받아 사용할 수 있다

원시 자료형과 헷갈리지 말자!

 

# 객체 타입

원시 타입의 값을 제외한 모든 것

다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조

# 객체 타입의 특징

참조 방식으로 전달된다

객체는 속성들을 변경할 수 있다 -> mutable value

힙 메모리에 저장된다 -> 동적으로 변화 가능하므로 메모리 공간 확보 및 저장

 

# 동적 타입 언어

자바스크립트는 동적 타입 언어이다

▶ 명시적 타입 변환

원시 래퍼 객체를 활용하여 의도적으로 타입 변경 가능

//명시적 타입 변환
const aaa = 123;
const bbb = "123";
const ccc = 0;

aaa.toString(); '123'
Number(bbb); 123
Boolean(ccc); false

▶ 암묵적 타입 변환

값 + "" -> 문자열 타입으로 변환

값 * 1 -> 숫자타입으로 변환

!!값 -> 불리언타입으로 변환

암묵적 타입 변환을 피하기 위해서는 어떻게 해야할까?

전달되는 시점마다 typeof 연산자 또는 일치연산자를 사용하여 타입 guard 구현

자바스크립트 superSet 타입스크립트 사용

 

---

# 새로 알게 된 점

이번 강의를 통해서 호이스팅과 스코프의 개념에 대해서 확실하게 배울 수 있었다

사실 자바를 먼저 배웠던 탓에 자바스크립트는 단순히 자바보다 유동적인 언어라고만 생각했었다

타입 없이 선언만 하면 된다고 단순하게 생각했었는데 이번 강의를 통해서 자바스크립트도 규칙이 있고

그 규칙을 잘 지켜서 사용해야만 의미없는 디버깅으로 시간낭비를 하지 않는다는 것을 배웠다

적절한 변수 키워드를 사용하여 스코프를 고려하며 코딩할 수 있도록 더 공부를 해야겠다