본문 바로가기

FE/Javascript22

Flatten & Unflatten 플래턴(Flatten)과 언플래턴(Unflatten). 먼저, 플래턴은 중첩된 배열이나 객체를 한 단위로 풀어서 사용함을 말하고, 언플래턴은 그 반대로 특정 단위를 묶거나 curring처럼 다 쪼개어 사용함을 말한다. Flatten Flatten은 flat의 동사형이다. 따라서 평평하게 한다는 뜻을 갖고 있다. 위에서 언급했듯 배열이나 객체를 평탄화 시킨다는 의미다. 배열에서는 flat() 메서드를 통해 하위 배열까지 평탄화할 수 있고, 객체에서는 map() 혹은 reduce()와 concat() 이용한다. 코드를 보면 무슨 말을 하는 지 조금 더 이해된다. const arr1 = [1, 2, [3, 4]] arr1.flat() // [1, 2, 3, 4] const arr2 = [1, 2, [3, 4,.. 2022. 10. 26.
Recursive Functions 재귀 함수(Recursive Functions)는 자기 자신이 리턴 값인 함수다. 재귀라는 단어는 잘 사용하지 않는 단어라 영어 단어가 훨씬 더 직관적으로 보일 정도다. 한자어인 만큼 한자를 알면 사실 쉽다. 두 재 혹은 다시 재(再)와 돌아갈 귀(歸)다. 다시 돌아간단 뜻이다. 단어를 왜이렇게 길게 설명했느냐 묻는 다면, 이 함수는 이게 핵심이고 전부기 때문이다. 함수를 다시 리턴한다는 건 반복한다는 소리다. 즉, 반복문의 역할이라고 이해하면 좋다. 반복을 함수로 할 뿐인 셈. for문과 재귀함수를 비교하며 살펴보자. 반복의 대명사 팩토리얼로 비교했다. // for문을 이용한 팩토리얼 let n=4 let result=1 for (let i = n; i >= 1; i--) { result = resul.. 2022. 10. 22.
Closure 클로저(closure)는 직역만으론 작동원리를 이해하기 어렵다. 필자 또한 한 번에 이해하기 어려웠다. 크롬 개발자도구에서 지원하는 디버깅 툴을 통해 하나씩 살펴보고 이해했다. (크롬 개발자 도구는 참 많은 걸 지원한다.) 결론부터 말하자면, 클로저는 반환 된 내부 함수가 자신이 선언 되었을 때 환경을 기억하는 함수다. 클로저를 이해해야 하는 이유는 상태 유지, 고차컴포넌트, 매개변수 함수 등을 위해서다. 물론 클로저에 대한 이해가 없이도 어느정도 알 수 있으나, 접근이나 코드가 복잡해지면 길을 잃기 딱 좋아 보인다. 따라서 미리 이해하고 있고자 정리한다. 위 코드를 실행시키고 개발자도구 소스로 가서 해당 코드 진행 사항을 차근차근히 살펴볼 수 있다. 무엇보다 오른쪽 스코프탭을 통해 클로저 상태도 알 수.. 2022. 10. 18.
Scope 스코프(Scope)는 그 말대로 범위다. for문을 쓰든, if문을 쓰든 우리는 항상 중괄호({})를 열도 닫는다. 이 중괄호가 바로 범위를 뜻한다. 스코프가 하나라면 전혀 문제 없지만, 여러 개 중복된다면 매우 헷갈린다. 스코프는 크게 전역 스코프와 지역 스코프로 나뉜다. 이에 따라 해당 변수가 참조할 범위가 바뀐다. 코드를 보면서 살펴보자. let a = 10; for(let i = 1; i 2022. 10. 17.
정규 표현식 정규 표현식. 처음 들었을 때부터 무슨 말인지 몰라 사전부터 찾아봤다. 국어사전엔 역시 없으니 위키백과 찾아봤다. 정규 표현식(正規表現式, 영어: regular expression, 간단히 regexp 또는 regex, rational expression) 또는 정규식(正規式)은 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이다. 특정한 문자열을 가진 집합. 이게 핵심이었다. 다양한 프로그래밍 언어에서 지원할 정도로 정규 표현식은 그 쓰임이 많다. 프로그래밍은 패턴을 가지고 그룹화하는 게 기본이기 때문이다. 특히 함수형 프로그래밍에서는 더더욱 그룹화는 중요하다. 프론트엔드를 배우는 나로서는 이 정규식을 어디에서 주로 사용하는 지 찾아봤다. 생각외로 많진 않았다. 주로 텍스트 검증단계.. 2022. 10. 10.

티스토리툴바