본문 바로가기

JavaScript25

옵셔널 체이닝(?.) 03/13 사실 JS 에서도 TS 에서도 사용할 수 있는 문법이라서 어디에 쓸까 하다가.. JS 는 좀 글이 쌓이는데 반해 특별하게 TS에만 있는 문법이 아니라면 잘 쓰지 않게 되는 것 같아 이쪽으로 정했다. 조만간 둘이 통합해야 되는게 아닌가 몰라..?사실 swift 에도 있다고 한다 Optional Chaining옵셔널 체이닝은, 속성 값이 null 이거나 undefined 일 수 있는 객체에 안전하게 접근할 수 있게 해주는 연산자이다. 다시 말해서, 어떠한 객체나 속성이 값이 존재하는지 여부를 알지 못하더라도, 오류를 발생시키는 대신 undefined 를 반환하고 넘어가는 것이다.// 주소 정보가 없어도 에러가 나지 않음user?.adress?.city // 메서드가 존재할 때만 실행admin.s.. 2025. 12. 19.
문자열의 숫자 체크 03/08 JavaScript 에서 문자열이 숫자인지 체크하는 방법을 정리해보자. isNan()Nan 은 Not a Number 로, 문자열이 숫자인지 체크하기 위한 내장함수. 숫자가 아닌 경우 true, 숫자인 경우 false 를 반환한다. 이를 반대로 사용해 !isNan() 으로 보기 쉽게 표현할 수도 있다.하지만, 주의해야 할 점은 empty content 의 경우 에러를 발생하는 것이 아니라 false 를 반환한다...isNan("123"); // falseisNan("123.1"); // falseisNan(123); // falseisNan(-123); // falseisNan(.1); // falseisNan("apple"); // trueisNan("321-1.. 2025. 12. 7.
JS 는 이상해 02/20 JavaScript 는 이상함이 자명하며 이는 사실이다. 타입을 정해주지 않고 추론 연산을 JS 에 맡기게 되는 경우, 대부분 문자열 연산으로 실행되는 것으로 대충 추정하면 맞는데,문제는 이를 맞았는지 틀렸는지 확인하지 않고 적당히 넘어 갈 경우, 컴파일러 에러 대신 일단 어떻게든 연산을 시도하고 이상한 값을 넣어 놓는다(?) 진짜 나중에 확인할 때마다 억장이 무너짐...그나마 나는 현재 TypeScript 사용중이라 이럴 일은 적긴 한데, 가끔 번역되는 과정에서 문제가 생기기도 해서, 이번엔 쉬어가는 코너 겸 이상한 JS 문제들을 조금 알아보자.문제와 정답을 가려놓을 테니, 궁금하다면 도전해봐도 좋다.뭔가 맞긴 한데, strict 검사가 꺼림칙한, 살짝 망설여지는 문제더보기더보기더보기답은 f.. 2025. 12. 2.
Object.assign 01/21 assign 을 사용하게 된 이유는.. 이미 사용하고 있는 구조에 재사용성이 있을만한 것들을 추가해서 사용하고 싶은데, 그렇다고 부모 자체에 추가하기엔 여기서만 사용할 것 같은, 그 정도의 사용성이 있는 객체를 어떻게 활용해볼까.. 해서 사용했다. Object.assign(target, ...sources);target: 목표 객체. 출처 객체의 속성을 복사해 반영한 후 반환할 객체.sources: 출처 객체. 목표 객체에 반영하고자 하는 속성들을 갖고 있는 객체.Object.assign() 메서드는 출처 객체들의 모든 열거 가능한 자체 속성을 복사해 대상 객체에 붙여 넣고, 그 후 대상 객체를 반환한다.const target = { a: 1, b: 2 };const source = { b: .. 2025. 12. 2.
커스텀 정렬하기 01/14 JavaScript 에서 기본 Array.prototype.sort() 를 사용하게 되면, 기본적으로 문자열의 유니코드 순서를 따르게 된다.예를 들면, [1, 2, 10] 인 경우 sort 후 [1, 10, 2] 가 되는 식.이런 기본 sort 말고, 원하는 방법으로 커스텀 하여 정렬하는 방법을 정리해보자. arr.sort([compareFunction]);compareFunction 은 optional 로, 생략하면 앞에서도 소개했지만 배열 각 요소의 문자열 변환에 따라 각 문자의 유니코드 코드 포인트 값에 따라 정렬된다.반환은 원 배열이 정렬되어 반환되는 것에 주의. 복사해서 반환하도록 하고 싶다면 .sort 대신 .toSorted() 이쪽을 사용하면 된다.이제 실제로 커스텀 정렬을 하려.. 2025. 11. 27.
숫자 자릿수 구분하기 11/21 자릿수가 많은 수를 표기할 때, 세 자리씩 끊어서 ,(콤마) 를 찍어서 표기하게 된다.별건 아니지만 갑자기 생각난건데.. 이 세개씩 찍는 thousand 단위 구분과, 국내에서 쓰는 만 단위 구분법이 달라 수치가 커지면 매번 헷갈리는것이 좀 억울하다...아무튼 오늘은 이 3자리마다 콤마를 찍어서 문자열로 리턴하는 방법! 정규식 (Regular Expression) 사용const n1 = 12345.6789;const cn1 = n1.toString() .replace(/\B(?먼저 .replace(... , ",") 는 정규식으로 찾은 위치마다 , 를 삽입하는 기능이고.. 정규식을 봐보자./\B//\B/는 비-단어 경계를 의미한다. 문자열의 경계가 아닌 위치를 찾는 것으로 \b(단어 경계) 와.. 2025. 11. 11.