javascript 기초 문법 정리

변수

let = 변수의 값 재할당 / const = 변수의 값 고정

let name = 'Sinok Kim' 
console.log(name) 

name = 'William' 
// 위에서 선언했던 name이라는 변수에 "William"이라는 값을 재할당

const name = "Sinok Kim" 
console.log(name)

name = "William" 
// 위에서 선언했던 name이라는 변수에 
"William"이라는 값을 다시 재할당하려는 것이지만 실패. 에러 발생!
const는 한번 할당한 값으로 고정됨

데이터 타입

숫자/ 문자열/ boolean/ null/ undefined

const yourAge = 25
console.log(myAge) 				#숫자 10 출력

const firstName = 'Sinrok'
console.log(firstName) 			#문자열 Sinrok을 출력

const isMan = true
const isWoman = false
console.log(isMan)				#boolean True, False 출력
console.log(isWoman)

let name1 = null
console.log(name) 				#null을 출력

let name2
console.log(name2) 				#undefined를 출력

연산자

템플릿 리터럴

const shoesPrice = 200000
console.log(`이 신발의 가격은 ${shoesPrice}원입니다`) 
// console.log('이 신발의 가격은 ' + shoesPrice + '원입니다') 와 동일
// + 를 활용한 문자열 붙이기보다 간결하게 표현할 수 있다는 게 보이시나요?

산술 연산자

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을 출력

증감연상자

증감 ++X, 증감 X++ 의 차이

let count = 1
const preIncrement = ++count
console.log(`count: ${count}, preIncrement: ${preIncrement}`) 
// count: 2, preIncrement: 2

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

let count = 1
const postIncrement = count++
console.log(`count: ${count}, postIncrement: ${postIncrement}`) 
// count: 2, postIncrement: 1 

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

대입연산자

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) 

비교연산자

:비교연산자를 통해서 얻는 값은 바로 boolean

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

논리연산자

|| 는 연산 대상 중 하나만 true 여도 true 리턴
&& 는 연산 대상이 모두 true 여야만 true 리턴
! 는 true를 false로, flase를 true로 바꿔서 리턴

일치연산자

=== 는 엄밀한 (strict) 일치연산자여서 비교하는 두 값의 데이터타입과 값 자체가 정확히 일치해야만 true를 리턴.

== 는 비교하는 두 값의 데이터타입이 일치하지 않을 때
해당 값의 데이터타입을 자동으로 변환해주는 자바스크립트만의 특성이 있음.

조건문

if ~ else if ~ else

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

반복문

변수값에 변화를 줘서 반복문이 끝날수 있도록 하자.
실수로 무한루프에 빠져서 프로그램의 실행이 끝나지 않는다면
ctrl + c 를 눌러서 중단시키자.

while

let temperature = 20
while (temperature < 25) {
	console.log(`${temperature}도 정도면 적당한 온도입니다.`)
	temperature++ // 증감연산자를 활용해서 온도를 변화시킵니다.
}

for

for (let temperature = 20; temperature < 25; temperature++) {
	console.log(`${temperature}도 정도면 적당한 온도입니다.`)
}

함수

function 함수명(매개변수들...) {
이 함수에서 실행할 코드들
return 반환값
}

함수는 특정 작업을 수행하는 코드의 집합으로 반복되는 특정 작업을 수행해야 할떄
그 코드 자체를 어딘가에 만들어서 저장해놓고 계속 사용하는 것.

#함수의 예

function calculateAvg(price1, price2, price3) {
	const avg = (price1 + price2 + price3) / 3
	return avg
}

const priceA = 1000
const priceB = 2000
const priceC = 3000
const avg = calculateAvg(priceA, priceB, priceC)
console.log(`평균가격: ${avg}`)

클래스와 객체

메소드

:클래스에는 데이터(값)를 나타내는 속성 뿐만 아니라 함수와 같이 특정 코드를 실행할 수 있는 메소드도 정의할 수 있음.
객체를 생성한 후, 만들어진 객체의 메소드를 호출하면 됨

// 클래스 선언
class Product {
	constructor(name, price) {
		this.name = name
		this.price = price
	}

	printInfo() {
		console.log(`상품명: ${this.name}, 가격: ${this.price}원`)
	}
}

// 객체 생성 및 메소드 호출
const notebook = new Product('Apple Macbook', 2000000)
notebook.printInfo() // 상품명: Apple Macbook, 가격: 2000000원

객체리터럴

const 변수명 = {
속성명: 데이터,
메소드명: function () { 메소드 호출시 실행할 코드들 }
}

const computer = {
	name: 'Apple Macbook',
	price: 20000,
	printInfo: function () {
		console.log(`상품명: ${this.name}, 가격: ${this.price}원`)
	}
}

computer.printInfo()

배열

요소 추가 push/삭제 pop

const rainbowColors = ['yellow', 'green', 'blue', 'indigo', 'violet']

rainbowColors.push('ultraviolet') 
// 배열의 마지막에 ultarviolet 추가

rainbowColors.pop() 
// 배열의 마지막 요소 ultraviolet을 제거

배열 반복문

const rainbowColors = ['yellow', 'green', 'blue', 'indigo', 'violet']

for (let i = 0; i < rainbowColors.length; i++) {
	console.log(rainbowColors[i])
}

const rainbowColors = ['yellow', 'green', 'blue', 'indigo', 'violet']

for (const color of rainbowColors) {
	console.log(color)
}