main-logo

Just Javascript

Just Javascript 스터디 중간 회고

profile
nagaeso
2023년 03월 22일 · 0 분 소요

들어가며

회사 그룹 내부에서 희망하는 인원에 한에 Just Javascript 스터디를 진행하고 있습니다. 목차를 봤을 때 연차가 있는 작업자라면 대부분 알고 있는 내용이라고 생각할 수 있지만 주제별로 접근하는 방식이 새로워 중간 회고 차 소개를 하게 되었습니다.

 

멘탈 모델 (Mental Models)

멘탈 모델이란?

  let a = 10;
  let b = a;
  a = 0;
  console.log(a); // ?
  console.log(b); // ?

아래의 코드를 단계별로 나열하고 a, b에 대해 생각해봅시다.

let a = 10;
// 재당할이 가능한 변수 let에 a를 선언하고 10을 할당한다.

let b = a;
// 재당할이 가능한 변수 let에 b를 선언하고 a를 할당한다.
// a는 10가 할당되어 있기에 b는 10이 할당된다.

a = 0;
// 변수 a에 0을 할당한다.

console.log(a); // 따라서 a는 0
console.log(b); // b는 10

 

저는 “let a = 10;의 식을 변수 a에 10을 할당하다”라고 표현하였는데요. Javascript를 처음 배울 때 대부분 변수는 값을 넣은 “상자”라고 배우게 됩니다. 그렇다 보니 “변수에 값을 넣다 or 담는다”를 주로 사용했습니다. ES6 접한 이후 변수가 활용에 따라 const와 let으로 나눠지면서 담는다 대신 const는 ”~ 이다”, let은 “~할당하다”라고 좀 더 의미게 맞게 나누었습니다.

따라서 사람에 따라 위 코드를 보고 “할당하다, 설정하다, 넣다, 대입하다” 등 여러 가지 의미로 표현할 것입니다. 저는 이런 비유와 설명이 자신이 확립하고 있는 멘탈 모델이라고 생각합니다.

Just Javascript(이하 내용)에서는 멘탈 모델을 어떻게 말하고 있을까요 ?

머릿속에서 무언가가 작동하는 방식에 대한 이러한 근사치입니다. 이러한 직관(변수의 “상자성”과 같은)은 평생 코드를 읽는 방식에 영향을 미칩니다.
때때로 우리의 멘탈 모델이 잘못된 경우가 있으나 이러한 문제를 식별하고 수정하는 것이 멘탈 모델을 정확하고 유용하게 점진적으로 구축(또는 재구축)할 것입니다. 좋은 정신 모델은 자신의 코드에 대한 자신감을 주고 다른 사람이 작성한 코드를 이해하고 수정할 수 있게 해줍니다.

빠르고 느린 코딩

let a = 10;
let b = a;
a = 0;

처음 코드를 다시 봅니다. a는 0이고, b는 10입니다. 하지만 b가 0이라고 생각한 분들도 더러 있을 것입니다. 특히 알고 있는다고 생각하는 경우는 더 꼼꼼하게 보지 않을 것입니다. 또한 코드 작업 후 (스스로 진행했지만) 다시 봤을 때 낯선 느낌..을 모두 경험을 해보셨을 텐데요. 이런 경험들은 충분하게 멘탈 모델링이 되지 않았기 때문에 발생합니다.

내용에서는 사람은 생각할 때 빠르고(Fast) 느린(slow) 시스템을 사용한다고 합니다.

  1. 빠르고 훑고 시스템의 구조를 파악하는 것은 “빠른 시스템” 이용한다.
  2. 하나하나 코드를 읽으면서 자세하게 파악하여 버그등을 찾을 때는 “느린 시스템”을 사용한다.
  3. “느린”시스템은 머릿속으로 컴퓨터가 어떻게 동작하는지를 시뮬레이션 해야하는데 이때 의지 할 수 있는 건 멘탈 모델뿐이다.

두 시스템을 효율적으로 사용하기 위해서는 정확한 멘탈 모델이 훈련되어 있어야 한다고 말하고 있습니다.

값과 변수 (Values and Variables)

javascript에서 기본 값은 불변

  let array = [1, 2, 3];
  let string = 'hello';

  console.log(array[0])
  // 1
  console.log(string[0])
  // h

위 코드에서 확인할 수 있듯, 배열과 문자열은 같은 방법으로 요소에 접근할 수 있습니다. 마치 배열과 문자열이 동일한 방식으로 속성과 요소를 변경할 수 있는 것처럼 느껴집니다. 하지만 그렇지 않다는 것을 확인할 수 있습니다.

array[0] = 10;
console.log(array)
// [10, 2, 3]

string[0] = 'k'
console.log(string[0])
// 'hello'

array와 다르게 sting의 요소는 변경되지 않았습니다. 그 이유는 배열과 다르게 문자열의 기본값은 불변이기 때문입니다. 내용에서는 javascript에서 기본값은 불변이다라는 개념을 멘탈 모델로써 확립해야 할 중요한 세부 사항이라고 말하고 있습니다. MDN Immutable에서는 좀 더 명확하게 설명해주고 있습니다.

JavaScript 에서 기본 값은 변경할 수 없습니다. 기본 값이 생성되면 변경할 수 없지만 이를 보유하는 변수는 다른 값으로 재할당될 수 있습니다 . 반대로 객체와 배열은 기본적으로 변경 가능합니다. 새 값을 재할당하지 않고도 해당 속성과 요소를 변경할 수 있습니다.

 

변수는 Wire, Point, Assign

  let pet = 'Narwhal';
  pet = 'The Kraken';

  console.log(pet);
  // 'The Kraken'

앞서, 객체와 배열을 제외하고 기본값은 변경할 수 없다고 멘탈 모델링을 하였습니다. 그런데 위 코드에서 pet은 ‘The Kraken’입니다. 앞에 내용과 모순되는 것처럼 보이지만 다시 MDN Immutable을 자세히 봅시다.

JavaScript에서 기본값은 변경할 수 없습니다. 기본값이 생성되면 변경할 수 없지만 이를 보유하는 변수는 다른 값으로 재할당될 수 있습니다. 반대로 객체와 배열은 기본적으로 변경할 수 있습니다. … 중략 …

따라서 변수에 대한 멘탈 모델을 개선을 아래와 같이 개선해야 합니다.

Variables are not values. 변수는 값이 아닙니다.
Variables point to values. 변수는 값을 가리킵니다.

내용에서는 변수는 값을 가리키다(point) 이외에 연결하다(wire), 할당하다(assign) 등으로 쓰이고 있는데 변수는 값이 아니라는 것을 지속적으로 표현하고 있습니다. 아래 영상은 변수에 대한 멘탈 모델링을 이해하고 개선하는데 도움이 될 것입니다.



마치며

Just Javascript는 멘탈 모델을 기본으로 javascript의 여러 요소를 다루고 있습니다. 어렵게만 느껴졌던 멘탈 모델을 기존에 봤던 책들과 다른 관점으로 접근하고 설명해주는 것이 흥미롭습니다. Just Javascript의 전체 내용은 유료라 미결제 시, 초기 내용만 확인할 수 있는 게 아쉽지만, 포스팅을 통해 중간 회고함으로써 좋은 내용을 소개해 드릴 수 있어서 유익하였습니다.

고맙습니다. - 끄읕 -

참고문서