Frontend 개발자 - hyo.loui
자바스크립트 문법 (2/4) - 변수, 타입, 연산자 본문
❤️🔥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}원에 물건을 구입합니다.`)
'Javascript' 카테고리의 다른 글
자바스크립트 문법 (4/4) - 객체, 클래스, 배열 (2) | 2022.11.09 |
---|---|
자바스크립트 문법 (3/4) - 조건문, 반복문, 함수 (0) | 2022.11.08 |
자바스크립트 기본 상식 (1/4) - Hello World (0) | 2022.11.07 |
서버 통신? 어렵죠? '한방에 이해 시켜드릴게요' (0) | 2022.11.05 |
JQuery 로 '자바스크립트 쉽고 빠르게 쓰기' (4) | 2022.11.05 |