Javascript 기초 03(연산01_산술, 대입, typeof)

연산

연산이란 '식이 나타낸 일정한 규칙에 따라 계산함'을 뜻한다. 사용자는 Javascript 코드를 통해 연산을 처리하는 식을 만들 수 있고, 여기에 사용하는 기호를 '연산자'라고 한다.

문자열 붙이기

• + 를 사용하여 문자열을 이어 붙이기(문자열과 숫자를 이어붙이면 숫자가 문자로 인식된다.)

console.log('My' + ' car') // My car를 출력
console.log('1' + 2) // 12를 출력(2는 숫자인데 문자로 인식되서 12로 출력됨)

 

• 템플릿 리터럴(Template literals)

기존의 문자열은 따옴표를 이용해 표현했지만, 템플릿 리터럴은 백틱을 이용해 표현한다.

// 기존의 문자열
const str = '작은 따옴표'
const str = "큰 따옴표"

// 백틱을 이용한 템플릿 리터럴
const str3 = `백틱`

 

※표현식 삽입 방법

템플릿 리터럴은 표현식을 내장할 수 있는 문자열 표현법이다. 이는 문자열 내용에 데이터를 삽입한다는 것을 의미한다. 템플릿 리터럴로 표현한 문자열 내부에 플레이스홀더(${})를 기입하고, 그 안에 데이터를 기입하면 데이터는 문자열의 멤버가 된다. +를 사용하지 않아도 되서 조금 더 간결한 느낌이다.

const data1 = "데이터"
const str1 = `문자열 중간에 ${data1} 삽입하기`      ---> 백틱사용
console.log(str1)

const data2 = 100
const srt2 = `숫자도 문자로 녹아든다 : ${data2} !`  ---> 백틱사용
console.log(srt2)

---

※prompt

window 객체의 prompt 메소드는 사용자로부터 문자열을 입력받을 수 있는 다이얼로그 박스를 열어주는 메소드이다.

window.prompt() // window 생략가능

괄호 안은 다이얼로그 박스에 띄울 메세지(문자열)을 전달할 수 있다.

 

prompt메소드는 실행 시에 사용자로부터 문자열을 입력받고, 입력받은 문자열을 자신이 사용된 곳에 그대로 반환한다. 즉, 메소드가 문자열로 바뀌게 된다. (prompt라는 메소드는 자신의 동작 후 입력받은 값을 자신이 원래 있던 자리에 놓고 간다.)

 

▶내용실습◀

window.prompt("프롬프트 다이얼로그에 표시될 문자열")

const promptmessage = "프롬프트에 표시할 문자열"
prompt(promptmessage)

---

const promptmessage = "프롬프트에 표시할 문자열"
const result = prompt(promptmessage)     ---> prompt가 입력받아서 반환한 값을 result에 지정/대입하겠다.
console.log(result)

prompt 다이얼로그에 값을 입력하면

console의 result에 나타나는것을 확인해볼수있다.

---

데이터를 반환하는 메소드 또한 데이터와 마찬가지로 취급할 수 있다. (prompt + Template literals)

const str = `그렇다면 이건 될까? ${prompt('그렇다면 이건 될까?')}`
console.log(str)

---

산술 연산(Numeric operators)

• 산술 연산은 더하기, 빼기 등 수를 이용한 계산이다. 두 개의 숫자 데이터를 피연산자로 받아서 하나의 숫자 데이터를 결과로 반환한다. (더하기+, 빼기-, 곱하기*, 나누기/, 나머지%_ 나눗셈을 진행했을때 몫과 나머지 중 나머지가 최종 결과로 나타나는 연산자로 12%5 = 2가 된다.)
• 산술 연산을 처리하는 식을 사용하면, 해당 식은 연산 결과를 반환한다. (즉, 식이 데이터로 대체 된다는 의미)

let number = 3 + 3;
// ▼
let number = 6;

console.log(2 + 1) // 3을 출력
console.log(2 - 1) // 1을 출력
console.log(4 / 2) // 2를 출력
console.log(2 * 3) // 6을 출력
console.log(10 % 3) // 나머지(remainder) 연산자. 1을 출력
console.log(10 ** 2) // exponentiation. 10의 2승인 100을 출력

실제 코드가 바뀌는게 아닌, 실행 시에 결과가 반영된다는 뜻

 

증감 연산(Increment and Decrement operators)

• 자기 자신의 값을 증가시키거나 감소시키는 연산자(++, —)
• 이 증감연산자를 변수앞에 놓는냐, 변수뒤에 놓느냐에 따라 차이가 발생

++coount : 증가 연산자는 수를 증가시키고 증가 후 값을 반환

let count = 1
const preIncrement = ++count
// 증감연산자를 앞에 놓게 되면 아래 주석으로 처리한 두 줄의 코드와 같은 내용입니다.
// 먼저 자기 자신에게 1을 더해서 재할당 한 후, 이를 preIncrement 에 할당했다는 의미입니다.
// count = count + 1
// const preIncrement = count
console.log(`count: ${count}, preIncrement: ${preIncrement}`) // count: 2, preIncrement: 2

count++ : 증가 연산자는 수를 증가시키고 증가하기 전 값을 반환

let count = 1
const postIncrement = count++
// 증감연산자를 뒤에 놓게 되면 아래 주석으로 처리한 두 줄의 코드와 같은 내용입니다.
// postIncrement에 자기 자신의 값을 먼저 할당하고, 이후에 1을 더해서 재할당합니다. 
// const postIncrement = count
// count = count + 1
console.log(`count: ${count}, postIncrement: ${postIncrement}`) // count: 2, postIncrement: 1

우리가 증감연산자를 활용해 count의 값을 계속 증가시키고 다시 count에 할당하고 있기 때문에 const를 사용하면 에러가 발생

참고 : 증가 연산자(++) - JavaScript | MDN (mozilla.org)

반환 값을 사용하지 않는 경우라면, 전위형과 후위형엔 차이가 없다.

let counter = 0;
counter++;
++counter;
alert( counter ); // 2, 위 두 라인은 동일한 연산을 수행합니다.​

값을 증가시키고 난 후, 증가한 값을 바로 사용하려면 전위형 증가 연산자를 사용하면 된다.

let counter = 0;
alert( ++counter ); // 1​

값을 증가시키지만, 증가 전의 기존값을 사용하려면 후위형 증가 연산자를 사용하면 됩니다.

let counter = 0;
alert( counter++ ); // 0​

 

대입 연산(Assignment operators)

• 대입 연산은 오른쪽 피연산자의 데이터를 왼쪽 피연산자에 대입한다.
• 왼쪽 피연산자는 주로 변수나 상수가 자리하며, 오른쪽 피연산자로는 데이터 또는 데이터를 반환하는 식이 자리한다.

const shirtsPrice = 100000
const pantsPrice = 80000
let totalPrice = 0

totalPrice += shirtsPrice // totalPrice = totalPrice + shirtsPrice 와 동일
console.log(totalPrice)
totalPrice += pantsPrice // totalPrice = totalPrice + pantsPrice 와 동일 
console.log(totalPrice)

totalPrice -= shirtsPrice // totalPrice = totalPrice - shirtsPrice 와 동일
console.log(totalPrice)

 

※연산자 우선순위

하나의 구문에 여러 개의 연산자가 함께 사용 되는 경우가 있다. 이 경우 연산자 우선순위가 반영되어 우선순위가 높은 것부터 계산된다.

 

• 산술연산 : 곱하기, 나누기 > 더하기, 빼기

1 + 3 * 2 - 2;

 

• 대입 연산 : 대입 연산자 오른쪽에 있는 식보다 무조건 나중에 처리된다.

변수 = 1 + 2 + 3;

 

• 우선순위에서는 밀리지만 먼저 처리하고자 하는 연산이 있는 경우 사용자는 해당 연산 부분을 소괄호로 감싸주어 연산의 순서를 바꿀 수 있다.

1 + 3 * (2 - 2);  

 

 

▶내용실습◀

console.log(3 + 4)
console.log(3 - 4)
console.log(3 * 4)
console.log(3 / 4)
console.log(3 % 4)

---

let result = 1 + 1
console.log(result)
result = 1 - 1
console.log(result)
result = 1 * 1
console.log(result)
result = 1 / 2
console.log(result)

---

let result = 1 + 1 / 2 * 3 + 3
console.log(result)
result = (1 + 1) / 2 * 3 + 3
console.log(result)

---

let result = 3

result = result + 3         ---> 대입연산자의 특징으로 오른쪽의 값이 먼저라는 우선순위가 있기에 가능한 것
console.log(result)

---

복합대입 연산자

let result = 3

result += 3 // result + 3     ---> += 3의 의미가 result의 값에 3을 더해서 갱신하겠다는 의미
console.log(result)
result -= 2
console.log(result)

---

"" + 1 + 0 = "10" // (1)
"" - 1 + 0 = -1 // (2)
true + false = 1
6 / "3" = 2
"2" * "3" = 6
4 + 5 + "px" = "9px"
"$" + 4 + 5 = "$45"
"4" - 2 = 2
"4px" - 2 = NaN
7 / 0 = Infinity
"  -9  " + 5 = "  -9  5" // (3)
"  -9  " - 5 = -14 // (4)
null + 1 = 1 // (5)
undefined + 1 = NaN // (6)
" \t \n" - 2 = -2 // (7)

1. 피 연산자 중 하나가 문자열인 "" + 1에서 1은 문자형으로 변환됩니다. 따라서 공백과 문자열 1을 더한, "" + 1 = "1"과 같은 효과를 발휘하죠. 그다음 연산 "1" + 0에도 같은 규칙이 적용됩니다.
2. 뺄셈 연산자 -는 기타 수학 연산자처럼 숫자형만을 인수로 받습니다. 빈 문자열 ""는 숫자 0으로 변환되기 때문에 결과는 -1이 됩니다.
3. 피 연산자 중 하나가 문자열이므로 숫자 5가 문자열로 변환됩니다.
4. 뺄셈 연산자는 인수를 숫자형으로 변화시키므로 " -9 "는 숫자 -9로 변합니다. 앞, 뒤 공백은 제거되죠.
5. 숫자형으로 변환 시 null은 0이 됩니다.
6. undefined는 숫자형으로 변환시 NaN이 됩니다.
7. 문자열이 숫자형으로 변할 땐 문자열 앞뒤의 공백이 삭제됩니다. 뺄셈 연산자 앞의 피연산자는 공백을 만드는 문자 \t와 \n, 그 사이의 “일반적인” 공백으로 구성됩니다. 따라서 " \t \n"는 숫자형으로 변환 시 길이가 0인 문자열로 취급되어 숫자 0이 됩니다.

---

typeof 연산자 

사용하고 있는 데이터의 type이 무엇인지 확인해서 반환해줌(오류는 제외) typeof 연산자는 타입을 확인해야 하는 피연산자 앞에 위치합니다. typeof는 연산자이므로 함수처럼 괄호[()]를 사용할 필요가 없습니다. 즉 피연산자의 타입을 확인할 때는 typeof(operand)가 아니라 typeof operand를 사용하는 것이 맞습니다. typeof(operand)도 사용 가능한 문법이지만, 불필요한 괄호[()]를 넣은 사용방법이니 추천드리지는 않습니다.

let data = true;
console.log(typeof data); 
// 출력 결과: "boolean"

data = false;
console.log(typeof data);
// 출력 결과: "boolean"

data = True;
console.log(typeof data);
// 오류 : 대문자T 사용x

console.log(typeof undeclaredVariable);
// 출력 결과: "undefined"

console.log(typeof null);
// 출력 결과: "object"

console.log(typeof true);
// 출력 결과: "boolean"

console.log(typeof 27);
// 출력 결과: "number"

console.log(typeof 'YD');
// 출력 결과: "string"

console.log(typeof Symbol());
// 출력 결과: "symbol"

console.log(typeof function() {});
// 출력 결과: "function"

console.log(typeof {});
// 출력 결과: "object"

 

 

 

출처 : https://www.youtube.com/@uknowcoding