[Study] Deep Dive - 원시, 객체, 메모리

M_yeon·2023년 4월 1일
0

Deep Dive

목록 보기
4/6
post-thumbnail

10장 [객체 리터럴]

객체 리터럴은 객체를 생성하기 위한 표기법이며,
중괄호 내에 0개 이상의 프로퍼티를 정의한다.

  • let obj = {}

객체타입은 (원시값, 다른 객체)를 포함하는 복합적인 자료구조이다.
원시탑은 한가지의 타입만 가지지만 객체는 여러가지를 포괄하고 있기 때문에 변경 가능한 값이다.

객체의 value로 함수를 넣을 수 있는데 자바스크립트의 함수는 일급 객체이기 때문이다.

  • value가 함수이면 일반 함수와 구분하기 위해 메서드라고 한다.

일급객체

다음과 같은 조건을 만족하는 객체를 일급 객체라고 한다.

  • 무명의 리터럴로 생성할 수 있다. 런타임에 생성이 가능하다.
  • 변수나 자료구조에 저장할 수 있다.
  • 함수의 매게변수에 전달할 수 있다.
  • 함수의 반환값으로 사용할 수 있다.

함수는 값을 사용할 수 있는곳이라면 어디서든지 리터럴로 정의할 수 있으며 이는 런타임에 함수 객체로 평가된다.

객체{} 이것을 함수로 쓸것이냐 obj 그 자체로 쓸것이냐를 자바스크립트가 런타임일 때 판단한다는것이다.
이것은 함수형 프로그래밍을 가능케하는 장점 중 하나이다.


  • key는 식별자 네이밍 규칙을 준수해야한다.
  • value는 준수하지 않아도 된다.

아래처럼 문자열 또는 문자열로 평가할 수 있는 표현식을 사용해 키를 동적으로 생성할 수도 있다.
이 경우에는 키로 사용할 표현식을 대괄호로 묶어야한다.

let obj = {};
let key = "hello";

obj[key] = "world"
// let obj = { [key] : "world"};

console.log(obj) //{hello:"world"}

프로퍼티 접근

객체 프로퍼티에 접근할 때 obj.key... 이런식으로 접근 했었는데
대괄호 표기법을 사용하는 방법을 자주 사용하지 않아서 책을 보고 알았다.. 대괄호 표기법을 사용할 때는 키값을 꼭 문자열이여야 한다.

obj['key']

객체의 key값이 식별자 네이밍 규칙을 준수하지 않았다면 대괄호 표기법을 사용해한다!
근데 키가 숫자인 문자열인 경우 ""를 생략할 수 있다.


11장 [원시 값과 객체의 비교]

원시타입은 변경이 불가능하다라는 의미는 유명하다.

let str = '문자' ;

str = 'number'

이렇게만 보면 엥 변경 가능한거 아닌가? 라고 생각할 수 있지만 이것은 메모리에 할당된 '문자'의값이 'number'로 변경된게 아니라 새로운 메모리 공간에 'number' 할당해 'str'이 참조하는곳이 바뀐것이다.
이때 메모리에는 '문자','number' 둘다 있게 되지만 '문자'를 참조하는 변수는 없기 때문에 가비지컬렉터에 의해 삭제될것이다.

간단하게 짚고 넘어가기
문자열은 원시값이면서 유사배열 객체이다!
string.length index번호로 접근할수 있기 때문!

객체는 원시타입과 다른 방식으로 동작되도록 설계되어있다고 한다.

자바스크립트에서 객체는 동적으로 추가, 삭제될 수 있기 때문에 크기를 가늠할 수 없다
ex) 문자(2바이트), 숫자(8바이트)
그래서 객체를 할당한 변수를 참조하면 메모리에 저장되어 있는 참조값을 통해 실제 객체에 접근한다.

  • 원시 값을 할당한 변수 : 변수는~ 값을 갖는다, 변수의 값은 ~다.
  • 객체를 할당한 변수 : 변수는 객체를 참조하고 있다, 변수는 객체를 가리키고 있다.

이런 설계방식 때문에 깊은복사, 얕은복사의 개념이 생겨난것 같다.
객체안에 값은 따로 메모리에 저장이 되어 동적으로 추가, 삭제해도 문제가 없으니
원본을 건들일것이냐, 새로 메모리에 객체를 할당해서 가공할것이냐의 의미가 이해된다.

이거 쓰고 다음장 넘기니까 얕은복사, 깊은복사 바로 나오네요


4주차 회고

이번주는 많은 이야기가 나왔다
react-suspense를 활용한 효율적인 비동기 작업과
lodash, JSON.stringify, StructuredClone이 세가지의 큰 역할은 복사를 한다는것인데
속도나 함수복사가 되냐, 메서드복사가 되냐에 차이에 따라 3가지 중 어떤걸 활용해 복사해야할지 생각해야 한다.

  • lodash
    • 다 되는것 (단점 : 라이브러리 설치)
  • JSON.stringify
    • 함수복사 O, 메서드 복사 X
  • StructuredClone
    • 함수 복사 X, 메서드 복사 O

0개의 댓글