세 자리마다 콤마(,) 넣어주는 함수

 

쇼핑몰 개발을 하면서 가격을 표시하는 부분이 많아서 만든 함수

 

const changeComma = (price) => {
	if (price <= 0) return 0;
    
    let returnString = price?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return returnString;
}

 

- 화살표 함수 방식 사용

- 'price'는 매개변수(parameter) 받는 부분

- if (price <= 0) return 0;: 'price' 값이 0 이하일 경우, 즉 유효하지 않은 가격 정보일 경우 0을 반환

- price?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") 

-> 이 부분에서는 'price' 값을 문자열로 변환한 후, 정규 표현식을 사용하여 세 자리마다 콤마(,)를 추가

-> '?'는 옵셔널 체이닝으로, 'price' 값이 null 또는 undefined일 경우 에러를 방지하기 위해 사용

- let returnString = ... ; return returnString;

-> 변환한 문자열을 'returnString' 변수에 저장한 후 반환 

 

=> 결과적으로, 이 함수는 주어진 가격 정보를 문자열로 변환하고, 세 자리마다 콤마를 추가하여 보기 편한 형태로 변환하는 작업을 수행

 

 

* 옵셔널 체이닝(?.)

- JavaScript에서 객체의 속성에 접근할 때, 해당 객체나 속성이 undefined 또는 null인 경우 에러를 방지하기 위해 사용하는 문법

- 객체의 속성에 접근할 때 해당 객체나 속성이 존재하지 않으면 에러가 발생하는데 옵셔널 체이닝을 사용하면, 객체나 속성이 존재하지 않아도 에러가 발생하지 않고 대신 undefined를 반환

 

let user = {};
console.log(user.profile.name);  // TypeError: Cannot read property 'name' of undefined

// user 객체에는 profile 속성이 존재하지 않기 때문에 user.profile.name에 접근하려고 하면 에러가 발생


let user = {};
console.log(user.profile?.name);  // undefined

// 옵셔널 체이닝을 사용하면, profile 속성이 존재하지 않아도 에러가 발생하지 않고 undefined를 출력

 

=> 옵셔널 체이닝은 안전하게 객체의 속성에 접근할 수 있게 해주는 유용한 문법