20211004.md

Javascript

배운 것들

객체와 클로저, 모듈

• 서로 연관이 있는 '상태'와 이에 대한 '행동'을 프로퍼티와 메서드로 하여 객체로 만든다.
  • 응집성이 높아지지만, public하기 때문에 obj.state로 접근하여 변경이 가능하다.
• 정보 은닉을 위해 외부함수 안에서 변수에 선언하여 할당하고, 이를 컨트롤하는 내부함수를 리턴하는 방식으로 클로저를 사용한다.
  • 함수 리턴과 호출 등 장황하다.
• 다시 전역으로 다 빼온 후 모듈로 만들고, 전역에 함수로 선언한 후 이를 객체에 담아 export 해준다.
  • 사용하려는 파일에서 import { 해당함수 이름 } from '{ 해당함수가 위치한 경로와 파일 }'으로 가져온다.
  • 이렇게 모듈로 만드는 경우 html에서는 진입점이 되는 파일 하나만 가져오고, 그 진입점에서 다른 파일들을 모듈로 가져온다.
  • 모듈은 클로저이다. 모듈 코드는 실행컨텍스트를 만들며, 모듈 실행컨텍스트의 렉시컬 스코프 또한 외부 렉시컬 환경인 전역을 참조하기 때문이다.

replace 메서드

• String.prototype.replace 메서드는 첫 번째 인수로 전달된 정규표현식과 매칭하는 문자열을 찾아 두 번째 인수에 오는 문자열로 바꾼 결과를 반환한다.
• 두 번째 인수로 콜백함수를 주면 콜백함수에 전달되는 첫 번째 인수는 모든 매칭되는 문자열이, 두 번째 인수부터는 정규표현식에서 그룹 캡쳐링으로 캡쳐된 문자열이 그룹캡쳐링의 개수만큼 순차적으로 온다.
  • 이에 대해 작업한 결과를 콜백에서 리턴하면 캡쳐된 문자열이 반환값으로 치환된 작업이 이루어진 결과가 반환된다.

// 소문자는 대문자로, 대문자는 소문자로 치환하기

const toggleCase = (s) => s.replace(/([a-z])([A-Z])/g, (_, lower, upper)=> {
    return lower ? lower.toUpperCase() : upper ? upper.toLowerCase() : ''
})

느낀 점

• 정규표현식을 잘 쓰면 if문과 for문 없이 많은 것을 손쉽게 해결할 수 있다.