자바스크립트 문법 뽀개기1

자바스크립트 문법 뽀개기1

 

• Chrome
• Visual Studio Code
• Node.js

 

📌 프로그래밍이란?

프로그램 : 입력 → 처리 → 출력

프로그램이 정해진 방식에 따라 일할 수 있도록 작성해놓은게 프로그래밍!

 

📌 Node.js란?

자바스크립트 언어의 문법에 맞게 코딩했을 때 이를 해석하는 일종의 전용 번역기

웹브라우저가 아닌 곳에서도 자바스크립트 코드를 실행하고 그 결과물을 확인할 수 있다.

---

Visual Studio Code 폰트 사이즈 조정

vs code 설정

[설정]

 

vs code zoom설정

검색 창에 'zoom' 검색 [Editor: Mouse Wheel Zoom] 설정 체크 박스 체크!

[Ctrl] + [마우스 wheel]로 폰트 조절 할 수 있음.

---

Hello World

웹브라우저 없이 node.js로 실행

// 주석처리
console.log('Hello World')

주석처리는 [Ctrl]+[/]

[터미널]-[새 터미널]

> node hell.js

---

변수

값 할당

데이터가 의미하는 바를 변수의 이름을 통해 보다 정확하게 나타낼 수 있고 추후 데이터를 다시 활용할 때 유용!

 

📌 let

let 변수이름 = 값

값을 재할당 가능!

 

📌 const

const 변수이름 = 값

값을 재할당 불가!

 

최근 여러 단점으로 인해 변수를 선언할 때, var 키워드는 사용하지 않음.

---

데이터 타입

세상에 무수히 많은 데이터들이 존해하기 때문에 컴퓨터가 이러한 데이터들을 보다 빠르고 효율적으로 처리하기 위해 자바스크립트라는 프로그래밍 언어가 구분해 놓은 것

 

📌 원시형(Primitive) 타입

• Number
• String
• Boolean
• Null
• Undefined

// 숫자
let age = 37
console.log(age)

// 문자열
let name = 'dbyeon'
console.log(name)

// 불린(비교 연산자)
let isMan = true
let isWoman = false
console.log(isMan)
console.log(isWoman)

// null 텅텅 비어 있는 값
let nothing = null
console.log(nothing)

// undefined 변수를 선언했지만 아무값도 할당하지 않은 값
let height
console.log(height)

---

연산자

 

📌 문자열 붙이기

+기호 이용!

console.log('My' + 'car')
console.log('1' + 2) // 12
console.log(1 + 2) //3

'My'와 'car'를 이어붙인 값을 반환(return)받아 콘솔창에서 출력!

문자열과 숫자를 이어붙이면, 숫자가 문자로 인식됨!

 

📌 템플릿 리터럴(Template Literals)

백틱(``) 이용해 문자열 데이터를 표현할 수 있음.

문자열 붙이기를 더욱 간결하게 사용할 수 있기 때문에 쓰임.

const shoesPrice = 200000
console.log(`이 신발 가격은 ${shoesPrice}원 입니다.`)

 

📌 산술연산자(Numeric Operators)

console.log(2+3) //5
console.log(2-3) //-1
console.log(2*3) //6
console.log(2/3) //0.6666666666666666
console.log(2%3) //2
console.log(2**3) //8

 

📌 증감연산자(Increment and Decrement Operators)

const preIncrement = ++count // 증가 후, preIncrement에 할당
const postIncrement = count++ // postIncrement에 할당 후, 증가

 

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

숫자값을 비교하는 연산자. 

비교연산자를 통해서 얻는 값은 boolean!

조건문과 같이 많이 활용될 예정

console.log(1 < 2) //true
console.log(1 <= 2) //true
console.log(1 > 3) //false

 

📌 논리연산자(Logical Operators)

// OR 연산자
console.log(true || true)
console.log(true || false) //console.log(true || !true)
console.log(false || true)
console.log(false || false)

// AND 연산자
console.log(true && true)
console.log(true && false)
console.log(false && true)
console.log(false && false)

 

📌 일치연산자(Equality Operators)

console.log(1 === 1)
console.log(1 == "1")

=== : strict 엄밀한 일치연산자로, 데이터타입과 값 둘다 정확히 일치해야 true리턴

== : 데이터 타입을 자동으로 변환해주는 자바스크립트 특성으로 인해 true리턴됨.

 

따라서 ==을 사용하면 개발자의 실수를 유발할 가능성이 크기 때문에, 정확한 프로그래밍을 위해 ===만 쓸 예정!

---

조건문(if)

if (조건) {

   조건이을 만족할 때 실행하는 코드

}

const shoesPrice = 40000
if (shoesPrice < 50000) {
    console.log('이 신발을 사겠습니다.')
}

들여쓰기 중요!

const shoesPrice = 50000
if (shoesPrice < 40000) {
    console.log('이 신발을 사겠습니다.')
} else if(shoesPrice <= 50000) {
	console.log('고민을 해볼게요...')
} else {
	console.log('너무 비싸요. 신발을 사지 않겠습니다.')
}

 

📌 quiz

const disdance = 2

if(disdance < 2){
	console.log('걸어가자')
} else if(disdance>=2 && disdance < 5){
	console.log('택시를 타자')
} else {
	console.log('기차를 타자')
}