2주차 기록

배운 내용

javascript의 querySelector 기능을 이용하여 계산기 프로그램을 동작하게 만들고 Linux 환경에서 작업할 때 필요한 모듈들을 설치하고 range 모듈을 이용하여 짝수 생성기 프로그램을 동작하게 하였다.

느낀점

난관에 봉착한 순간들이 종종 생겨났다. 페어가 있었기에 같이 잘 헤쳐나갈 수 있었던 것 같다. 계산기 프로그램까지는 그렇게 어려운 점이 많지는 않았다. 다만 c나 java에 익숙하다보니 undefined 같은 자료형을 사용하는게 익숙하지 않아서 처음에는 코드가 불필요하게 늘어지는 경우가 종종 있었다. Linux와 git은 아직 부족한 부분이 많아 더 많이 배우고 익숙해져야겠다는 생각이다.

알게 된 것

$ node
> var range = require("range");
> range.range(0, 20);
[ 0,
  1,
  2,
  3,
  4,
  5,
  6,
  7,
  8,
  9,
  10,
  11,
  12,
  13,
  14,
  15,
  16,
  17,
  18,
  19 ]
> range.range(0, 20, 2);
[ 0,
  2,
  4,
  6,
  8,
  10,
  12,
  14,
  16,
  18 ]

---

const {range} = require('range');

function functionName(number) {
  // TODO
}

첫 번째 코드는 range 모듈의 사용법의 예시로 찾은 코드인데 두 번째 코드는 코드스테이츠에서 스프린트 과제의 틀로 제시해준 코드이다. 여기서 const 키워드에 {}가 붙는 경우를 처음 봐서 함수에 어떤 값을 리턴해줘야 하는지 어려움을 겪었다.
처음에는 range.range()로 리턴을 해주었는데 range.range is not a function이라는 타입오류가 발생했고 변수 선언을 {}없이 한 경우에는 오류가 발생하지 않았다.

Destructuring assignment (Object Destructuring)

객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우에, 객체나 배열을 변수로 분해할 수 있게 해주는 특별한 문법

// not object destructuring
const name = app.name;
const version = app.version;
const type = app.type;

// object destructuring
const {name, version, type } = app;

위의 코드처럼 객체의 속성을 선언식의 {}에 담아 추출하여 사용을 할 수가 있다.
코드스테이츠에서 제공한 틀에 적용을 하여 생각해보자.

const range = require('range').range;

function functionName(number){
  return range( , , );
}

---

// use object destructuring
const { range } = require('range');

function functionName(number){
  return range( , , );
}

---

const range = require('range');

function functionName(number){
  return range.range( , , );
}

이렇게 3가지 방식 모두 사용이 가능하다.
첫 번째나 세 번째 같은 경우 선언문의 range 대신 다른 이름을 주고 사용할 때
첫 번째는 doSomething( , , );
세 번째는 something.range( , , );
같은 방식으로 사용할 수도 있다.
하지만 두 번째 같은 경우 object destructuring은 속성을 추출하는 방식이기 때문에
const { doSomething} 같은 방식은 사용될 수가 없다.