IT/javascript11 [JS] if else 리팩토링 (중첩 조건문 처리하기) > 코드 변환 스냅샷 아래의 스크린샷은 Youtube 영상에서 리팩토링 과정을 단계별로 스냅샷을 찍어놨습니다.추후 비슷한 상황에서 최대한 빠르게 리마인드하고 적용해보려 합니다.이 글을 본다고 이해되진 않습니다. 위의 링크를 꼭 시청하시길 바랍니다. 지극히 시청한 사람을 위한 글입니다. 초기 버전 단계 1: 객체로 변환 단계2: move에 Parameter를 추가하여 select와 Parameter 규격을 맞춘다. 단계3: 규격에 맞는 파라미터 값들만 남기고 배열로 감싼다. 단계4: ArrowUp과 Down은 부호만 다르니 더욱더 추상화가 가능 단계 5: 코드를 보니 direction 값을 굳이 객체에서 안가져와도 되네? 최종: 코드를 보니 객체가 필요가 없네? 2024. 4. 29. [JS] if else 리펙토링 (객체 + 함수) 아래 Youtube 영상의 내용을 거의 그대로 가져온 페이지입니다.문제가 될 경우 삭제하겠습니다. 결론if else가 중복되면 switch case로 변경해보자.나름의 규칙성을 발견하기 쉬워진다.규칙을 발견하면 이를 바탕으로 객체로 추출 가능하다 객체를 함수 외부로 분리하면 공통로직 / 분기별 실제 동작 정의가 분리되어 읽기도 수월해지고, 수정사항이 생겨도 공통로직은 건드리지 않아도 되어 편리하다. 리펙토링할 소재를 발견할 수 있고, 소재가 발견되지 않더라도 객체형태로 전환한 그 자체로 이미 꽤 깔끔하다 분기가 함수일 경우 구조 분해 할당 (destructured assignment)을 이용해 상황별 필요한 데이터 파악이 한결 용이해짐 # if else 로직const naverLogin = (id) =.. 2024. 4. 29. [JS] function 쓰지말자. this를 안 쓴다면... 아래 Youtube 영상의 내용을 거의 그대로 가져온 페이지입니다.문제가 될 경우 삭제하겠습니다.TLTRfunction 대신 arrow function 을 사용하자this를 사용하지 않는다면 더 가볍기 때문이다. 함수 작성시: arrow functioninstance 생성시 (생성자 함수를 사용하고 싶을 때): classgenerator 사용하려 할 때: function function는 생성자 함수를 만들기위해 존재하는 prototype prop이 존재하는데, this를 사용하지 않으면 불필요함. 대부분 함수 만들때 this를 사용하지 않는데 prototype prop이 존재하는 function을 사용할 이유는 없음. arrow function을 사용하면 prototype prop이 존재하지 않음으로 .. 2024. 4. 29. [JS] - Runtime 이란 JavaScript 환경에서 런타임은 JavaScript 코드가 실행되는 환경을 의미합니다. JavaScript 런타임은 JavaScript 코드를 해석하고 실행하는 데 필요한 인프라 및 리소스를 제공합니다. 여기에는 인터프리터 또는 JIT(Just-in-Time) 컴파일러, 메모리 관리 시스템 및 호스트 환경과 상호 작용하기 위한 라이브러리와 같은 다양한 구성 요소가 포함됩니다. JavaScript 런타임은 웹 브라우저, 서버 및 독립 실행형 응용.. 2023. 6. 21. [JS] - Array at Method 개념정수 (양수, 0, 음수)를 받아, 해당 값을 인덱스로 사용하여 요소를 반환하는 메소드 특징맨 마지막 값을 가져올 때 편하게 가져올 수 있음값이 없으면 undefined를 내려준다. 이부분이 맘에 든다.이유는 arr[arr.length - 1] 이렇게 하면 타입 추론에 undefined는 없기 때문이다. <.. 2023. 6. 19. 이전 1 2 다음
