💻 객체 (Ref. 모던 자바스크립트 Deep Dive)

데브코스 팀원들고 함께 스터디를 시작하였습니다. 모던 자바스크립트 Deep Dive 책으로 진행하고 오늘은 10장 객체 리터럴과 11장 원시 값과 객체의 비교를 학습하였습니다. 기본 개념과 제가 몰랐던 개념들을 위주로 정리하였습니다.

📃 오늘 공부한 것

10장 객체

객체란?

원시 타입은 하나의 값, 객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조이다.
원시 타입은 변경 불가능한 값이고 객체는 변경 가능한 값이다.

객체 리터럴에 의한 객체 생성

자바스크립트는 프로토타입 기반 객체지향 언어로서 클래스 기반 객체지향 언어와는 달리 다양한 객체 생성 방법을 지원한다.

자바스크립트 객체 생성 방법

• 객체 리터럴
• Object 생성자 함수
• 생성자 함수
• Object.create 메서드
• 클래스(ES6)

객체 리터럴을 이용해 프로퍼티와 함께 객체를 생성할 수도 있고, 빈 객체들을 만들어 두고, 프로퍼티를 이후에 추가할 수도 있다.

프로퍼티

객체는 프로퍼티의 집합이며 프로퍼티는 키와 값으로 구성된다.
프로퍼티에 접근하는 방법은 마침표(.)와 대괄호([]) 표기법이 있다.

프로퍼티 삭제
delete 연산자를 사용하여 객체의 프로퍼티를 삭제한다.

프로퍼티 축약 표현

let x = 1, y = 2;

const obj = { x, y };

console.log(obj); // { x: 1, y: 2}

변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략할 수 있다. 이 때 프로퍼티 키는 변수 이름으로 자동 생성된다.

11장 원시 값과 객체의 비교

원시값

변경 불가능한 값으로 한번 생성된 원시 값은 읽기 전용 값으로서 변경할 수 없다.

원시값은 어떤 일이 있어도 불변한다.
이러한 특성은 데이터의 신뢰성을 보장한다.

문자열과 불변성

원시 값인 문자열은 몇 개의 문자로 이루어졌느냐에 따라 필요한 메모리 공간의 크기가 결정된다.

자바스크립트는 원시 타입인 문자열 타입을 제공한다. 문자열은 원시 타입이며 변경이 불가능하다. 또한 문자열은 유사 배열 객체이면서 이터러블이므로 배열과 유사하게 각 문자에 접근할 수 있다.

var str = 'string';

// 문자열은 유사 배열이므로 배열과 유사하게 인덱스를 사용해 각 문자에 접근할 수 있다.
// 하지만 문자열은 원시 값이므로 변경할 수 없다. 하지만 이 때 에러가 발생하지는 않는다.
str[0] = 'S'
console.log(str); // string

변경 가능한 값

객체 타입의 값은 변경 가능한 값이다.
객체를 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 참조 값에 접근할 수 있다.

참조 값은 생성된 객체가 저장된 메모리 공간의 주소, 그 자체이다.

객체를 할당한 변수는 재할당 없이 객체를 직접 변경할 수 있다. 하지만 이러한 구조적 단점에 따른 부작용이 있다. 그것은 원시 값과는 다르게 여러 개의 식별자가 하나의 객체를 공유할 수 있다는 것이다.

얕은 복사와 깊은 복사

객체를 프로퍼티 값으로 갖는 객체의 경우 얕은 복사는 한 단계까지만 복사하는 것을 말하고 깊은 복사는 객체에 중첩되어 있는 객체까지 모두 복사하는 것을 말한다.

이 부분은 상윤님의 포스트를 보고 이해를 하였기 때문에 첨부해보도록 하겠다.

상윤님 블로그 - [딥 다이브 스터디 11장] 원시 값과 객체 (feat. 참조와 복사)

🔥 오늘의 느낀점

오늘 정리한 내용들(딥 다이브)에 대한 스터디를 처음 시작하였다. 첫날이기도 하고 내용이 많지도 않아서 오래 걸릴 것이라고 생각하지 않았는데 정신차리니 2시간 30분이나 지나있었다.🤭 확실히 혼자 책 읽고 정리한 내용보다 팀원들이 발표한 내용들에서 얻어갈 것이 많았다. 제대로 이해하지 못했던 부분, 서로 궁금했던 부분, 새로 알았던 부분 등을 얘기하면서 알아가니 확실히 더 오래 기억남을 것 같았다. 데브코스 끝날 때 까지 진행하기로 했으니 다 같이 달려보기로 🏃🏃🏃

지은팀에서 두 번째 커피챗을 진행하였다. 아, 중간에 루카스님도 들어오셨고 멘토분들이 서로 경험한 내용이 달라서 그런지 2배로 조언을 받았다.🥰
이력서, 면접, 코드 리뷰, 커밋 등에 대해서 들었다. 너무 유익한 내용들이 많았지만 그 중에서도 인상 깊었던 내용은 면접 과제에 대한 내용이다. 면접 과제를 제출 할 때 "어떤 생각으로 구조를 짰는지", "라이브러리로 무엇을 사용했는지", "커밋 메시지" 등에 신경써야 한다는 것을 들었다.
커밋 메시지는 커밋 단위와 커밋 습관을 바로 알 수 있기 때문에 이 사람이 그동안 어떻게 작업해왔는지가 보인다고 하셨다. 이런 부분이 바로 실전 꿀팁이 아닐까 싶다. (데브코스 짱이야😍)
이제 임시팀이 끝나가서 다시 지은님과 루카스님을 만나게 될 지는 모르겠지만 정말 도움이 되었다고 말하고싶다.

길다면 길고 짧다면 짧은 알고리즘 강의들이 끝났다. 지금처럼 꾸준히 알고리즘 문제를 풀면서 익숙해져야지~~ 그리고 드디어 바닐라JS를 시작하였다. 내일 문제를 푸는데 반타작은 할 수 있을까^^

함수형 프로그래밍 강의를 해치우는 느낌으로 듣고 있는 것 같다.(그렇다고 얕게 듣는 것은 아니고 너무 많은 양을 입력하다 보니 감당하지 못하는듯) 하루에 딱 3-4개정도로 정해놓고 들어보려고 한다.
벌써 이번주에서 3일이 지났다는게 말도 안된다. 시간 가는게 엄청 빠르다.⌛️

🗣 오늘의 TMI

부산 로컬 국밥 맛집을 알게된 날 🤗 놀러가면 꼭 한번 먹어봐야지!!

Refer

모던 자바스크립트 Deep Dive 도서
[딥 다이브 스터디 11장] 원시 값과 객체 (feat. 참조와 복사)