81일차
[JavaScript] Unary (+) Operator | 단항 연산자 (+)로 문자열을 숫자로 변환하는 법, 활용예시
자바스크립트에서 문자열을 숫자로 변환할 때 parseInt(), parseFloat(), Number() 등의 메서드를 사용하기도 하지만, 단항 연산자(+)를 사용하면 더욱 간단하고 가독성 좋게 변환할 수 있다.
1. 단항 연산자(+)의 역할
단항 연산자(+)는 한 개의 피연산자, 즉 한 개의 인수와 짝을 이루어 역할을 합니다. 더하기를 의미하는 기존의 (+) 기호와는 달리, 숫자로 변환해주는 역할을 담당하는 단항 연산자 (+)는 인수의 바로 앞에 붙습니다. ECMA 공식 문서에 따르면 단항 연산자 (+)는 문자열인 인수를 숫자 형태로 빠르고 간단하게 바꾸어주는 문법입니다. 간단하게 형을 바꾸어준다는 장점이 있지만, 그렇게 할 수 없는 경우도 있기 때문에 각각의 경우를 알아보겠습니다.
1-2. 단항 연산자(+)가 적용될 수 있는 경우
문자열 앞에 단항 연산자 (+))를 붙여주면, 문자열을 숫자 타입으로 변환하여 리턴합니다. 문자열 뿐만 아니라 true, false, null값 또한 숫자 타입으로 변환합니다. 또 이진법과 16진법 수도 변환해줍니다. 다양한 경우에 어떤 숫자로 변환해주는지 알아봅시다.
console.log(+"10"); // 10
console.log(+"10.1");// 10.1
console.log(+"-10"); // -10
console.log(+true); // 1
console.log(+false); // 0
console.log(+0xBABE) // 47806 (Hexadecimal)
console.log(+null) // 0
원래 숫자일 경우에는 +를 붙여도 아무 변화가 없습니다. +를 붙인다는 것의 의미가 양수로 만들어준다는 뜻은 아닙니다.
const a = -10
console.log(+a); // -10
문자열의 내용에 해당하는 숫자를 합치려면, 예를 들어 "10"과 "25"를 합해서 "35"의 결과가 나오도록 하려면 각각 숫자로 변환한 후 더해야 합니다. 문자열 상태에서 더한다면 문자가 나열된 상태로 리턴되기 때문입니다. 예시를 보겠습니다.
let bread = "2500"
let cake = "30000"
console.log(+(bread+cake)) // 250030000
console.log(+bread + +cake) //32500
1-2. 단항 연산자(+)가 적용될 수 없는 경우
문자열을 숫자로 변경할 수 없다면 NaN (Not a Number)를 리턴합니다. 대표적으로 문자열, 또는 빈 문자열이나 함수, 빈 객체는 숫자로 변환할 수 없기 때문에 NaN으로 리턴합니다.
console.log(+"abc"); // NaN
console.log(+function(val) {return val}) // NaN
console.log(+'') // NaN
console.log(+'123a') // NaN
console.log(+{}) // NaN
2. 단항 연산자(+)를 활용한 예시
이전에 작업한 가계부 앱에서 단항 연산자를 사용했습니다. 폼으로 사용자의 거래 날짜와 금액을 받은 후 그 값대로 sort 및 filter를 하기 위해 단항 연산자(+)를 활용했습니다. 그리고 나서 사용자가 선택한 수입 또는 지출 선택지에 따라 따로 + 또는 - 기호를 붙여주었습니다.
//Add transaction
const addTransaction = (e) => {
e.preventDefault()
//Generate random ID
const generateID = () => Math.floor(Math.random() * 100000000)
if (text.value.trim() === '' || amount.value.trim() === '') {
alert('내역과 금액을 모두 입력해주세요.')
} else {
const sign = radio[0].checked === true ? '+' : '-'
const transaction = {
id: generateID(),
text: text.value,
amount: +`${sign}${amount.value}`,
date: +`${yearInput.value}${monthInput.value}${dayInput.value}`
}
transactions.push(transaction) //add the transaction into the transactions array
updateValues() // update the calculated transaction
radio[0].checked = false
radio[1].checked = false
yearInput.value = ''
monthInput.value = ''
dayInput.value = ''
text.value = ''
amount.value = ''
updateLocalStorage()
init()
}
}
//Sort by date
const sortByDate = () => {
return transactions.sort((a, b) => {
if (a.date > b.date) {
return 1
} else if (a.date < b.date) {
return -1
} else {
return 0
}
})
}
//Rendering storage data
const renderTransactions = () => {
if (sort_plus.classList.contains('sort')) {
list.innerHTML = ''
const incomeTransactions = transactions.filter((transaction) => transaction.amount > 0)
incomeTransactions.forEach((transaction) => {
addTransactionDOM(transaction)
})
} else if (sort_minus.classList.contains('sort')) {
list.innerHTML = ''
const expenseTransactions = transactions.filter((transaction) => transaction.amount < 0)
expenseTransactions.forEach((transaction) => {
addTransactionDOM(transaction)
})
}
}
//Update the balance, income and expense
const updateValues = () => {
//map() method result array
const amounts = transactions.map((transaction) => transaction.amount)
const total = amounts.reduce((acc, item) => (acc += item), 0)
const income = amounts
.filter((item) => item > 0)
.reduce((acc, item) => (acc += item), 0)
const expense = amounts
.filter((item) => item < 0)
.reduce((acc, item) => (acc += item), 0)
balance.innerText = `₩${numberWithCommas(total)}`
money_plus.innerText = `${numberWithCommas(income)}`
money_minus.innerText = `-${numberWithCommas(Math.abs(expense))}`
}
Author And Source
이 문제에 관하여(81일차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@minkuk90/81일차저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)