[TIL] JavaScript Koans

lmimoh·2022년 9월 8일
0

TIL

목록 보기
10/26
post-thumbnail

JavaScript Koans ?

JavaScript Koans 의 Koans는 불교에서 유래된 '결론을 내리기 전 깊게 고민한다.' 라는 의미로 CodeStates에서 제공하는 JS에 대한 중요 내용을 고민해보는 시간이다.

JavaScript Koans는 총 8개의 챕터 51개의 문제로 구성되어 있으며, 챕터는 다음과 같다.

  • JavaScript의 타입
  • 변수 선언 키워드 let과 const
  • 화살표 함수
  • 스코프
  • 배열
  • 객체
  • spread
  • 구조분해할당

챕터에서 교육생은 'Feel me in'이라고 표시된 부분을 알맞은 내용으로 변경함으로써 각 문제를 통과할 수 있다. 이는 통과 여부를 결정하는 js 파일 내부 혹은 에러 코드를 통해 답이 제공되지만, 어째서 그 답인지에 대해 고민해보는 시간을 가지라는 의미 같다.

전체적으로 문제의 난이도는 많이 높지 않았으며, 이전에 교육 받은 내용에 대해 복습하는 느낌을 강하게 받았다. 어렵지 않게 과제를 해결했지만 해결 과정에서 새롭게 알게 된 사실에 대해 정리해보고자 한다!


Contents

원시자료형은 immutable(수정 불가능) 한 값이다.
즉, 변수에 재할당하는 것은 원시자료형의 값이 변하는 것이 아니다.

let a = 123;
a = 1234;

// 처음 a에는 123이라는 숫자가 할당되고, 이후 1234로 재할당되지만
// Call Stack에 존재하는 123은 변하지 않는다.
// 다만, Call Stack에 1234라는 새로운 데이터가 생겨나고 변수 a에 할당됐을 뿐이다.

Object.assign을 통한 복사는 reference variable의 주소만 복사하는 '얕은 복사(shallow copy)' 이다.

let a = {a : 1, b : 2, c : { d : 3, e : 4 }};
let b = a;
b.a = 2;
a.a === 2 // true
// 깊은 복사 시 변수 b는 변수 a의 참조 주소를 복사한다.
// 따라서, b를 통해 키 'a'의 값을 변경한 경우 변수 a도 변하게 된다.

let c = Object.assign({}, a);
c.a = 3;
a.a === 3; // false
// 얕은 복사 시 변수 c는 변수 a의 키:값 중 참조자료형만의 참조 주소를 복사한다.
// 키:값이 참조자료형이 아닌 경우, 값 자체를 복한다.
// 따라서, 참조자료형이 아닌 키 'a'의 경우 c.a = 3;으로 값을 변경해도 a.a는 변하지 않는다.(참조 x)

c.c.d = 4;
a.c.d === 4; //true
// 하지만, 변수 a의 키 'c'는 참조자료형으로 참조 주소를 복사하게 된다.
// 즉, 변수 c에서 키'c'의 키 'd' 값을 변경한 경우 변수 a도 변하게 된다.

Objet-Shorthand 문법은 key의 value가 명확히 정의되지 않았을 때, 해당 이름으로 선언된 값을 매칭시켜준다.

const name = 'mimoh';
const age = 24;

const obj = {
  name,
  age,
  gender = 'M'
};

consolt.log(obj); 
// name : 'mimoh', age : 24, gender : 'M'

spread 문법을 구조 분해 할당(Destructing Assignment) 에 사용할 수 있다.

const ary = [1, 2, 3];
const [start, ...last] = ary;

console.log(start); // 1
console.log(last); // [2, 3]

const obj = { name : 'mimoh', age : 24 }
const { name, ...args } = obj;

console.log(name) // mimoh
console.log(args) // 24

const newObj = {
  ...obj
  name : 'sara',
  age : 25;
}

console.log(newObj); // { name : 'sara', age : 25 }

Review

확실히 이전에 학습한 내용을 코드로 접해보니 개념들이 보다 구체적으로 느껴지는 기분이 들었다.
안다고 생각하는 부분이, 애매하게 알고 있는 부분이 존재했고 추가적으로 교육이 필요한 부분도 상당히 존재했다.

현재, 진행중인 세션1은 참여자들의 레벨을 고려한 교육 내용이었고 보다 심화적인 내용들이 대부분 존재했다.
더 공부할 수 있는 내용이 존재하는 것이 조금 신났다..!

앞으로도 더 노력하자.

  • 언어를 통해 설명할 수 있는 내용만이 스스로 완벽하게 알고 있는 것이다.

  • 알고 있는 내용이 확실히 맞는 것인지 교차 검증이 필요하다.

  • 내 지식을 맹신하지 말자!

끗.

profile
성장하는 개발자, 이민훈입니다.

0개의 댓글