241105 TIL - 코드리뷰시 깃헙활용, 함수선언방식, localeCompare(), 코드블럭{}, default export, named export, 팩토리함수, 클로져

코드 리뷰시 깃헙의 활용

•  팀이 모이기 전에 각 팀원의 깃헙을 확인해 코드를 미리 살펴본다. pull request나 commit 로그 등을 활용해 코드의 의도나 변화를 파악하고, 코드를 읽어보며 리뷰가 필요한 부분에 코멘트를 남겨놓는다. 이 때 개선이 필요한 이유를 명확하게 적어둘 것.
•  리뷰를 위해 모이면 작성자가 간단히 코드를 소개한 후, 팀원이 남겨놓은 코멘트를 확인하며 의견을 나눈다. 이때 코멘트를 남긴 팀원은 해당 코멘트에 대해 상세히 설명해주어야 하고, 동시에 팀원은 이에 대한 피드백을 분명히 해줘야 한다.
•  수준이 오르면 코드의 로직이나 메모리 효율을 따지게 되겠지만, 현 수준에선 코드의 알고리즘적인 부분이나, 코드 컨벤션 측면에서 변수 작명 방식이나 코드 일관성 등을 리뷰하는 것도 좋다

 

함수 선언문, 함수 표현식, 화살표 함수

/* 함수 선언문 */
function 함수명() {}

/* 함수 표현식 */
변수 선언 = function() {}

/* 화살표 함수 */
변수 선언 = () => {}

 

 

localeCompare()

 문자열 정렬을 위한 비교 메서드. 사전순(유니코드 기준)으로 대상문자열이 비교문자열보다 크면 1, 작으면 -1, 같으면 0을 반환함. 매개변수를 통해 어느나라 언어인지, 비교시 추가 옵션 등을 설정할 수 있음 (필수 아님)

 정말 어이 없는 실수지만 local이 아니라 locale임....!!

/* 기본 구조 */
대상문자열.localeCompare(비교문자열, 기준언어, 옵션);

/* 예시 */
let word_a = "A";
let word_b = "B";

let isBig = word_a.localeCompare(word_b, "en-US", {numeric: true});
// locale은 미국 영어로 설정, 혹시 숫자 형태의 문자열인지 판별해주는 옵션 추가
console.log(isBig); // 반환 : -1, A가 B보다 앞에 오니까 작음

 

 

분해 할당을 다시 할 때, 배열은 상관 없지만 객체엔 할당 전체를 감싸는 소괄호가 필요한 이유?

/* 학습 과정에서 만난 문제 */
let arr = ["1", "2", "3"];
let [a, b, c, d] = arr;

// 다시 구조 분해 할당
[a, b, c, d = "4"] = arr; 
console.log(a, b, c, d); // 반환 : "1" "2" "3" "4"
// 배열의 경우 소괄호 덮어주지 않아도 잘 작동

let obj = { name : "Bob", age : 25 };
let {name, age, gender} = obj; 

// 다시 구조 분해 할당
({name, age, gender = "male"} = obj); 
console.log(name, age, gender); // 반환 : "Bob" 25 "male"
// 객체의 경우 소괄호를 덮어주지 않으면 오류 발생

• 자바스크립트에선 중괄호로 감싼 부분을 컴퓨터가 만났을 때, 제일 먼저 코드블럭으로 인식함.
• 배열 관련으로 특정된 대괄호 []와 달리, 함수나 구문의 코드블럭으로도 쓰이고, 객체로도 쓰이는 중괄호 {}기 때문에, 혼동의 여지가 높아 의도대로 사용하려면 특정이 필요함.
• ∴ 위 예시에서 소괄호를 덮어줘야하는 이유는, 컴퓨터에게 중괄호 부분이 객체 리터럴임을 알려줘서 이 구문이 구조 분해 할당을 하는 중임을 명확히 하기 위함

 

default export 

일단 간단히만 이해하고 넘어가자

default로 선언된 모듈은 한 파일 당 하나의 변수 또는 클래스 등등만 export 할 수 있음

하나만 내보냈으니 import 할 때는 아무 이름으로나 가져올 수 있음

named export

반면 named로 선언된 모듈은 한 파일 당 여러 변수 또는 클래스 등등을 export 할 수 있음

대신 여러 개를 내보냈으니 import 할 때는 내보낸 이름과 동일하게 설정해야 가져올 수 있음

만약 다른 이름으로 가져오고 싶다면 "as"를 활용해 작명할 수 있음

또 export 된 모든 걸 가져오고 싶다면 "* as"를 활용해 가져올 수 있음

 

 

팩토리 함수

반환값이 객체인 함수. 공장처럼 객체를 찍어낸다고 생각하면 될 듯

보통 함수명에 create를 넣어줘 의도를 명시하는 편.

굳이 type이란 key를 넣어서 팩토리 함수에서 나온 객체들이 공유하는 속성을 넣어 관리하기도 함

생성자 함수의 등장으로 이제 팩토리 함수 패턴은 자주 사용되지 않음?!

 

 

클로져

 함수를 반환하는 함수 구조에서, 반환되는 함수를 내부 함수, 반환하는 함수를 외부 함수라 할 때, 내부 함수가 외부 함수의 스코프에 접근할 수 있게 해주는 특성. 외부 함수에서 선언된 변수 등을 내부 함수 안에서도 사용할 수 있는 등의 특징. 정확히는 함수가 선언된 시점의 스코프를 기억하고 환경이 달라져도 이를 다시 불러올 수 있는 그런 특성이라 하는데, 일단 지금 시점에서 이해하기로는 그렇다.

let multiple = function(num) {
  let a = 2;
  return function() {
    return a*num; // 외부 함수에서 선언된 a를 활용할 수 있다!
  }
}
let mul4 = multiple(4);

console.log(mul4()); // 반환 : 8