Learning JavaScript 후기 1

그동안 javascript를 공부하면서, 이렇다할 개발서적을 1장부터 정독해본 적이 없었다.

 

처음엔 인프런, 생활코딩, 노마드코더 등의 동영상강의를 위주로 들었었고,

바닐라코딩 프렙코스를 수강하고, 지금은 바닐라코딩에서 부트캠프를 하고 있는데

때마다 필요한 정보들을 구글에서 검색해가며 공부하고 있는데 산더미다.

(주로 MDN, 모던자바스크립트, zerocho Blog, poiemaweb 등 에서 당시 필요한 것만 찾아보았다)

 

주로 멘토가 되어주시는 선배님의 조언에 따라 처음부터 개발 서적을 펴지 않았던 것인데

지금 생각해보니 처음에 이 책을 펼치고 1강부터 정독했다면, 온갖 외계어 속에서 개발 공부의 꿈을 접었을 것 같다:)

 

javascript 기초에 대한 대략적인 감은 온 것 같으니,

입문 서적이 이제는 읽힐거라는 기대감을 안고 부트캠프 break week동안 읽어보기로 했다.

내일부터 바코에서 리액트를 시작한다는데... 리액트는 어떤 아이인지 미리 구경 정도만 하고 가기로..

 

기초부터 팁이 될만한 내용들까지 남겨두고 싶은것 위주로만 남겨보려한다.

 

javascript에서의 값

• 원시 타입 : 숫자, 문자열, 불리언, null, nudefined, Symbol
• 객체
  • 내장 객체 타입 : Array, Date, RegExp, Map / WeakMap, Set / WeakSet
  • 원시 타입에 대응하는 객체 타입 : Number, String, Boolean

 

템플릿 문자열

`(백틱)과 $(달러) 기호를 사용해서, 문자열 병합보다 편하게 값을 채워넣을 수 있다.

var age = 10;
console.log(`He is ${age} years old.`);

 

같은 if문 안에서 블록문과 블록 없는문을 섞지 않기 (코드스타일)

if(count < 5) {
  console.log(count);
  count++;
} else console.log(count); // 블록 없는 문

 

for문은 지금 몇번째 반복하는지 알아야 할 때 주로 쓴다.

 

제어문

• 조건문 : if, if...else, switch
• 반복문 : while, do...while(한 번은 실행하고 while), for

제어문의 예외

• break : 루프에서 중간에 빠져나감
• continue : 루프에서 다음 단계로 건너뜀
• return : 제어문 무시하고 현재 함수를 즉시 빠져나감
• throw : 예외(에러) 처리

 

switch문 사용 시, 보통 case별 break가 있다. 의도적으로 생략할 경우 주석을 남겨야 오해가 생기지 않는다.

 

for...of 루프

객체, 배열 모두 사용할 수 있다.
배열에서 인덱스를 몰라도 될 때 사용하며, 인덱스를 알아야 한다면 그냥 for문을 써야 한다.

 

for문에서 배열을 수정할 경우(splice 등), 감소하는 인덱스 쓰기

for(let i = arr.length-1; i >= 0; i--) {
  if(isPrime(arr[i]) array.splice(i,1);
}

 

삼항연산자(조건연산자, ES6)는 조건'문'이 아니라 표현식이다.

다른 표현식과 결합해서 효과적으로 쓸 수 있다.

 

해체 할당

const obj = {b:2, c:3};
const {a, b, c} = obj;
console.log(a); // undefined
console.log(b); // 2
console.log(c); // 3

const arr = [1,2,3];
const [x,y] = arr;
console.log(x); // 1
console.log(y); // 2
console.log(z); // undefined

 

if...else 목적이 변수의 값을 얻는 거라면, 삼항연산자를 쓰는것이 좋다.

// AS IS
if(isPrime(n)) {
  label = 'prime';
} else {
  label = 'non-prime';
}

// TO BE
label = isPrime(n) ? 'prime' : 'non-prime';

 

if의 목적이 할당이라면, OR표현식을 쓰기도 한다. (항상 좋다고 볼 순 없다)

// AS IS
if(!options) options = {};

// TO BE
options = options || {};

 

화살표함수

• 'function'타이핑과 중괄호를 줄이려고 고안된 단축문법이다.
• 함수형 프로그래밍을 javascript에 도입하는 중요한 열쇠 역할을 한다 >> 나중에 찾아봐야겠다
• 항상 익명함수이다. (변수에 할당할 수 있지만, 그럴거면 그냥 일반 함수선언문을 쓰는 게 낫다)
• 익명함수를 만들어 다른 곳에 전달할 때 유용하게 쓴다.
• 일반함수와의 차이점
  • this가 다른 변수처럼 정적으로 묶인다.
  • 객체생성자로 사용할 수 없다.
  • argument 변수를 사용할 수 없다. (확산 연산자로 대체 가능)