Frontend 개발자 - hyo.loui

자바스크립트 문법 (2/4) - 변수, 타입, 연산자 본문

Javascript

자바스크립트 문법 (2/4) - 변수, 타입, 연산자

hyo.loui 2022. 11. 7. 21:45

❤️‍🔥TIL : Today I Learned

 

자 이번에도 라면이다..
내 인생.... 라면.....

수돗물에게
'맛있는물' 이라는 이름을 지어줬다

라면국물에게
'라국' 이라는 이름을 지어줬다

'맛있는물' + '라국'
이게 되나? 된다!

같은 액체라서 둘은 섞인다!

하지만,
냄비에게 '라면전용냄비' 
이름을 붙여준다

'맛있는물' + '라면전용냄비'
이건 안된다

물은 액체이고, 냄비는 고체이다
둘은 성질이 달라서 안섞인다!

내가 이름을 붙인건 '변수'를 설명하기 위함 이고
섞었는데 안되는건 '타입' 이 다르기 때문이라고 이해 하면 된다

복잡하게 생각하지 말고 받아들여야 한다.
우리는 컴퓨터에게 하나부터 열까지 설명하고
가르쳐야 하기 때문...

세상의 이치라고 편~하게 받아들이자



변수 (variable)

let, const

내가 위에서 이름을 붙여준 것 처럼
코드에서는 이름을 변수(variable) 라고 한다.
[저장해 놓는 데이터, 일종의 이름표]

난 보통 const 로 사용하고, 나중에 데이터가 바뀌는 변수만 let으로 바꿔준다!

const = 상수(바뀌지 않는 값) 이고,
let = 변수(바뀌는 값) 이다.

예전에는 var 를 사용했지만 여러 단점이 많아 지금은 사용하지 않는다
// 변수
let nickName = "Hyo, loui";
console.log(nickName);
// "Hyo, loui" 출력

nickName = "Chris";
console.log(nickName);
// "Chris" 출력

// + 상수
const nickName2 = "Hyo, loui";
console.log(nickName2);
// "Hyo, loui" 출력
// nickName2 = 'Chris' // 주석을 제외하면 이 부분에서 에러가 난다! 실행X
console.log(nickName2);

 

데이터 타입 (Data type)

숫자, 문자, boolean, undefined, null

// Number(숫자)
// console.log(10)

let age = 37;
console.log(age);


//-------------------------------------------------------------


// String(문자열)

let firstName = "Seung Hyo";
console.log(firstName);


// -------------------------------------------------------------


// Blooean(true / false)
let isMan = true;
let isWoman = false;

console.log(isMan);
console.log(isWoman);

console.log(true);
console.log(false);


// -------------------------------------------------------------


// null / undefined
let name1 = null;
console.log(name1); // null을 출력

let name2;
console.log(name2); // undefined를 출력

수많은 데이터를   [입력 👉처리👉출력]  하는 과정을 컴퓨터가 알아들을 수 있도록

빠르고, 효율적으로 처리하기 위해 프로그래밍 언어가 타입(type)을 구분 해 놓는것이다.


 

연산자 (operator)

문자열, 산술, 증감, 대입, 비교, 논리, 일치

 

이건 사실 워딩이 어려워서 그렇지 해보면 쉽다

 

(사실 나도 거부감이 들었다 ㅇㅅㅇ)

// 연산자

// 문자열 이어붙이기
console.log('My' + " car")
console.log('1' + 2)
console.log(1 + 2)

// + 템플릿 리터럴
const shoesPrice = 200000
console.log('이 신발의 가격은 ' + shoesPrice + '원 입니다.')
console.log(`이 신발의 가격은 ${shoesPrice}원 입니다.`) // 이게 템플릿 리터럴 - 위와 같음


// -------------------------------------------------------------


// 산술 연산자 (Numeric operators)
console.log(2 + 1)
console.log(2 - 1)
console.log(2 * 3)
console.log(4 / 2)
console.log(10 % 3)
console.log(10 ** 2)


// -------------------------------------------------------------


// 증감 연산자 (Increment and Decrement operators)
let count = 1
const preIncrement = ++count
console.log(`count: ${count}, preIncrement: ${preIncrement}`)

let num = 10
const postnum = num++

console.log(`num: ${num}, postCount: ${postnum}`)


// -------------------------------------------------------------


// 대입연산자 (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) 


// -------------------------------------------------------------


// 비교연산자 (Comparison operators)

console.log(1 < 2) // 1이 2보다 작은가? true
console.log(2 <= 2) // 2가 2보다 작거나 같은가? true
console.log(1 > 2) // 1이 2보다 큰가? false
console.log(1 >= 2) // 1이 2보다 크거나 같은가? false


// -------------------------------------------------------------


// 논리 연산자 (Logical operators)

let isOnSale = true
let isDiscountItem = true

console.log(isOnSale && isDiscountItem) // true && true 이므로 true
console.log(isOnSale || isDiscountItem) // true || true 이므로 true

isOnSale = false
console.log(isOnSale && isDiscountItem) // false && true 이므로 false
console.log(isOnSale || isDiscountItem) // false || true 이므로 true

isDiscountItem = false
console.log(isOnSale && isDiscountItem) // false && false 이므로 false
console.log(isOnSale || isDiscountItem) // false || false 이므로 false

console.log(!isOnSale) // !false 이므로 true


// -------------------------------------------------------------


// 일치 연산자 (Equality operators)

console.log(1 === 1) // true
console.log(1 === 2) // false
console.log('Javascript' === 'Javascript') // true
console.log('Javascript' === 'javascript') // 대소문자나 띄어쓰기도 다 정확히 일치해야 해요. 따라서 false

console.log(1 === "1") // false를 출력
console.log(1 == "1") // true를 출력


// quiz
const firstPrice = 50000
const secondPrice = 40000
let totalPrice = firstPrice + secondPrice

console.log(`총 ${totalPrice * 0.8}원에 물건을 구입합니다.`)