[JS] 모던 자바스크립트 Deep Dive 스터디 4~6장 #해달

 

 

서론

 

타입스크립트와 비교해서

자바스크립트에 대해 좀 더 깊게 공부해보려한다.

 

 

아.. 티스토리는 임시저장이 너무... 불친절하다 ㅠㅠ

사진 로딩때문에 새로고침했다고 스터디 전으로 돌아갔네...

 

 

#변수 #할당 #참조 #식별자

---

 

 

4장

변수

 

자바스크립트 코드를 실행하면 컴퓨터에서 어떻게 동작할까?

 

evaluation 하려면, 10, 20, +라는 기호(리터럴 literal, 연산자 operator)의 의미를 알고 있어야 하며, 10 + 20 이라는 (표현식 expression)의 의미도 해석 (parsing) 할 수 있어야함.

 

+를 기준으로 좌변과 우변 (피연산자)를 기억.

CPU : 연산

메모리(memory) memory cell의 집합 한 크기가 1바이트(8bit)이며 : 기억

 

각 셀은 고유 메모리 주소(memory address)를 갖는다.

 

컴퓨터는 모든 데이터를 2진수로 처리하며, 데이터의 종류와 상관없이 모두 2진수로 관리한다.

 

만약 계산 값을 재사용하고 싶으면 다시 그 메모리 공간에 접근해야하는데,

메모리 공간에 직접 접근 하는 것은

운영체제에서 사용하는 값을 변경하면 서비스에 치명적인 오류가 발생할 수 있어.

자바스크립트는 개발자의 직접적인 메모리 제어를 허용하지 않는다.

 

재사용하기 위해 변수라는 메커니즘을 제공하며,

 

variable: 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간

메모리 공간을 식별하기 위해 붙인 이름

값의 위치를 가리키는 상징적인 이름

 

let result = 10 + 20;

 

변수이름 result, 저장된 값을 변수 값이라고 한다.

 

변수에 값을 저장하는 것을 할당(대입, 저장) addignment

변수의 값에 저장된 값을 읽어 들이는 것을 참조(reference) 라고 한다.

 

코드는 개발자의 문서이기도 해서 변수의 이름은 심사숙고해서 지어야한다.

 

이러한 변수 이름을 식별자(identifier)라고도 한다.

식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다.

 

값은 메모리 곤간에 저장되며, 식별자는 메모리 공간에 저장되어 있는 어떤 값을 구별해서 식별해 낼 수 있어야하니 값이 저장되어 있는 메모리 주소를 저장한다. 따라서, 메모리 주소에 붙인 이름이라고 할 수 있다.

 

 

 

식별자라는 용어는 변수이름에만 적용되지 않아서 변수, 함수, 캘래스등 이름은 모두 식별자이다.

메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자이다.

 

변수, 함수, 클래스 등과 같은 식별자는 네이밍 규칙을 준수해야하고, 선언을 통해 자바스크립트 엔진에 존재를 알린다.

 

 

변수 선언

* 객체 예시 var user = { id: 1, name: ‘Lee’ }; 
* 배열 예시(객체 배열) var users = [ { id: 1, name: ‘Lee’ }, { id: 2, name: ‘Kim’ } ];

 

 

이미지를 import 해야하는 이유

이미지를 경로 자체로만 불러오면: local 환경에서는 불러올 수 있지만 nginx에서 배포하면 로컬이 아닌 서버 자체에 올라가는 환경임. 즉 메모리 주소가 언제든지 바뀔 수 있다. 따라서 import한 값을 꼭 써야 한다.

 

import bell_navy from "../../assets/bell_navy.svg";
import bell_maroon from "../../assets/bell_maroon.svg";

 

리액트에서는 props라는 기본적인 객체 형태로 전달한다.

<Hello name=’hello’/> 와 같이 넘겨주었더라도 ’hello’라는 문자열만 넘긴 게 아니라 { name: ‘hello’ }와 같이 객체에 담아 넘겨진다.

 

따라서 props에 담긴 값을 참조하고 싶다면 const name = props.name 와 같은 형태로 참조해야 한다.

{name, id} 로 전달하는 경우는 구조분해할당

 

 

 

5장

표현식과 문

 

ㅠㅠㅠ

 

 

구조분해할당

 

 

표현식과 문

 

---

 

 

6장

데이터 타입

 

 

 

 

 

10/0

Infinitiy

10/-0

Infininty

0으로 나눌 수 있기 때문에 예외처리를 설정해줘야 한다.

 

 

표현식과 문

 

자바스크립트엔 데이터 타입을 지정하지 않아도 되는 동적 타입 언어이다. 따라서 값을 확인하지 못하면 타입도 확신할 수가 없다.

 

변수 스코프는 최대한 좁게 만든다. (var)

 

 

boolean true, false

boolean 1byte : 컴퓨터의 최소 연산단위 1byte라서

1bit 는 0/1이라도 1byte를 사용한다.