프로젝트 진행 중 동료 개발자분이 특정 조건에 대하여 삼항 연산자를 즐겨 사용하시는 것을 느꼈는데요.하지만 특정 상황에서의 삼항연산자는 제가 보기가 불편했습니다. 그 이유는 두 개의 조건에 대응한 조건문이 삼항 연산자인데, 세 개의 조건에 대응하여중첩 삼항연산자를 사용하셨기 때문인데요.이에 대해 언젠간 팀원분과 이야기를 나눠보고 싶었고, 팀 컨벤션을 만들어가는 과정에서중첩 삼항 연산자 사용에 애착을 가지셔서 블로그에만 저의 방법을 기록해 봅니다. 제시 조건 01. 함수로 만들어 처리하자처음 제시했던 방법입니다. 일반 삼항 연산자라면 몰라도 중첩 삼항연산자라면 차라리 함수를 생성해내부에서 if 문으로 분기 처리하는 것이 가독성이 좋아 향후 유지보수에 유리할 것으로 판단했거든요.하지만 팀원분의 말씀을 듣고선..

서비스에서 사용되는 메서드 중 특이한 map인 flatMap을 발견하여 정리하고자 합니다. 보통 map을 사용해 새로운 배열을 리턴받는 것만 보아왔는데, flatMap을 사용해 새로운 배열을 리턴받는 것을 보고선 문득 둘의 차이가 궁금해졌습니다. 무슨 차이가 있는걸까요? 특징 map() 메서드는 원래의 배열 구조를 유지한 채로 새로운 배열을 반환합니다. 예시: let arr = [1, 2, 3]; let newArr = arr.map(x => [x * 2]); console.log(newArr);// [[2], [4], [6]]. 새로운 하위배열을 포함하는 형태로 반환 flatMap() 메서드는 추가적으로 한 단계 깊이까지 평탄화(flatten) 작업을 수행하며 새로운 배열을 반환합니다. 예시: let ..

지금껏 map과 forEach, 둘 다 원본 데이터를 기반으로새로운 데이터를 만든다고 알고있었고최근에 인터뷰를 진행하며 내가 잘못 알고있었다는 점을 깨닫게 되어정리를 해보았다.결론map은 배열을 리턴하는 callback,forEach는 순회하는 배열의 요소와 index를 기준으로내부 스코프에서 정의한 코드를 수행하고 아무것도 반환하지 않는 콜백이다.예시1) mapconst testArray = [1,2,3,4,5]const result = testArray.map((item, index) =>{ const eachItem = item*2; return eachItem;});// testArray 배열을 기준으로 순회하며 각 배열의 요소를 2씩 곱한 새로운 배열 생성console.log(result); ..

기존의 나는 integer 타입의 데이터가 들어있는 배열에만 sort 메서드를 사용해왔었고, 어느새 오름차순, 내림차순 정렬만 기억하고 있었다. 하지만 알고리즘 문제를 풀던 중 문자열을 정렬해야 할 필요가 있었고 integer를 정렬할 때의 방식대로 오름차순, 내림차순을 통해 string 배열을 정렬했을 때 전혀 정렬이 되지 않은 모습을 확인할 수 있었다. 위의 코드를 보고 문자열을 정렬하기 위해선 처리해주는 방식이 달라야 한다는 것을 알게되었다. arr.sort([compareFunction]) 위의 구문에서 compareFunction을 생략하면 배열은 각 요소의 문자열 변환에 따라 각 문자의 유니 코드 코드 포인트 값에 따라 정렬된다. 유니코드가 정확하게 무엇인지는 알지 못하지만 sort()만 작성..

일급 함수 JS에서의 함수는 일급 객체라는 말을 개발 초창기부터 들어왔고 그렇게 `함수는 객체에 속하는 것`이라는 것만 알고 개발을 해왔다. 그렇다면 왜 함수는 일급 객체에 속하게 되는것일까. 먼저 일급 객체의 특징에 대해 알아야 했다. 일급 객체의 특징 변수에 담을 수 있고, 파라미터로 전달이 가능하며, 리턴값으로 사용이 가능할 때 일급 객체라고 말할 수 있다. 일급 함수 함수를 일급 객체로 다루는 것 JS에서는 함수를 변수에 담는 것이 가능하고, 파라미터로 전달도 가능했으며 리턴값으로도 활용할 수 있었다. 그러므로 JS의 함수를 일급 함수이자 일급 객체라고 말할 수 있는 것이었다. 개발을 하며 당연하게 여겨오던 것들로 일급 함수의 예시를 들어보자. 일급 함수의 예시 1. 변수에 할당 const box..

인스타를 돌아댕기다가 JS의 형변환에 관한 짤을 보고 글을 작성하게 되었다. ↓ 문제의 짤 true / false인 이유 0 == '0'; // true 0 == [ ]; // true '0' == []; // false 3개의 연산 결과가 true/false인 이유에 대해 알아보자 나의 생각 결론부터 말하면 Null과 undefined로 접근을 했고, 틀렸다. 1) 0 == '0' 원시 데이터 타입 중 num과 string을 비교하는 것. 자바스크립트가 알아서 해주는 거 아녔나? 라는 생각이 들었다. 문득 값이 없는 것은 undefined가 아닐까라는 생각이 들었고, undefined == undefined 로서 true가 된 것 같았다. 2) 0 == [ ] 원시 데이터와 참조형 데이터를 비교하는 것..