Weekly I Learned- Java Script

Node.js 는 자바스크립트 문법을 해석해주는 툴

코드를 출력할때는 console.log () 사용

js 에서 변수를 입력할때 let 또는 const사용

let name = “Subin”

const name= “Subin”

let 은 값을 변경할수 있지만 const 변경 불가

변수를 선언할 때 var 이라는 명령값은 더이상 사용되지 않음

데이터 타입

• Number
• String (문자)
  • “”로 데이터를 감싸야 함 ex) let name=”Subin”
• Boolean (자바스크립트의 true or false를 나타냄)
  • const isMan= true
  • const isWoman= false
  • console로 출력시 isMan 은 true, isWoman 은 false
• null, undefined (data 값이 비어있다, 없다는 뜻)

문법을 배워보쟈!

연산자

template literal `` 연결하고자 하는 데이터를 ${변수} 사용하면 + 로 데이터를 연결하는것보다 간결하게 사용 가능

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

numeric operator (산술연자)

• +,-,*,% 등등 사칙연산

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

증감연산자 (자기 자신의 값을 증가 시키거나, 증감 시키는 것, +,++,-)

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

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

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 operator (논리 연산자)

• || (or), && (and), ! (not) 과 같은 연산자를 말해요. 이것 역시 조건문과 찰떡궁합입니다. || 는 연산 대상 중 하나만 true 여도 true 리턴 && 는 연산 대상이 모두 true 여야만 true 리턴 ! 는 true를 false로, flase를 true로 바꿔서 리턴

  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 (일치연산자)

=== 로 사용해야함

• strict equality operator로 비교하는 두개의 데이터 타입이 모두 일치해야 true 를 리턴한다

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

조건문 (if, else if, else)

조건을 만족했을대 코드를 실행한다 (boolean data type)

const distance = 2
if (distance < 2) {
	console.log("걸어가자")
} else if (distance >= 2 && distance < 5) { // 논리연산자를 && 를 이렇게 활용할 수 있어요!
	console.log("택시를 타자")
} else {
	console.log("기차를 타자")
}

// distance =2,  리턴값은 걸어가자

반복문 (while, for)

while 은 조건이 만족할때 까지 코드가 반복해서 실행 된다

for (begin; condition; step) { 조건을 만족할 때 실행할 코드 }

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

//콘솔창에서 온도가 24까지 출력됨 

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

//for문이 실행되는 순서를 한번 정리해볼까요?

//1. temperature라는 변수를 선언하고 값을 할당합니다. (begin)
//2. temperature가 25보다 작은지 연산합니다. 결과값이 true라면 계속 실행. false라면 for 문 종료 (condition)
//3. 중괄호 안의 코드가 실행됩니다.
//4. temperature에 1을 더해서 재할당하고 2번 과정부터 다시 반복합니다. (step)

반복문 + 조건문

숫자 1~20 까지 중에 홀수와 짝수를 구분해서 출력해보기

for (let number = 1; number <= 20; number++) {
	if (number % 2 === 0) {
		console.log(`숫자 ${number}는 짝수입니다.`)
	} else {
		console.log(`숫자 ${number}는 홀수입니다.`)
	}
}

함수 (function)

function 함수명(매개변수들, parameter) {

이 함수에서 실행할 코드들

return 반환값

}

// 함수의 선언
function calculateAvg(price1, price2) {
	const sum = price1 + price2 // 매개변수인 price1, price2을 변수처럼 활용!
	console.log(`두 상품의 합계는 ${sum}입니다.`)
	const avg = sum / 2
	return avg // 평균가격을 리턴!
}

const priceA = 1000
const priceB = 2000

// 함수의 호출
const avg1 = calculateAvg(priceA, priceB)
console.log(`두 상품의 평균은 ${avg1}입니다.`)

const priceC = 3000
const priceD = 4000
// 함수의 호출
const avg2 = calculateAvg(priceC, priceD)
console.log(`두 상품의 평균은 ${avg2}입니다.`)

클래스와 객체

여려개의 데이터 중 관련된 데이터를 한번에 묶어서 보여줄 수 있음

예시) 노트북 전문 온라인 쇼핑몰에 여러개 노트북의 가격, 제조사, 모델명들이 존재할텐데 클래스와, 객체를 활요해서 데이터를 불러오자.

//클래스 선언
class Notebook {
	constructor(name, price, company) {
		this.name = name
		this.price = price
		this.company = company
	}
}
printInfo() {
		console.log(`상품명: ${this.name}, 가격: ${this.price}원`)
	}
}

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

• 클래스: 객체를 만들때 설계도 처럼 사용하는 템플렛, 클래스명에 맞는 객체를 생성해야 함 Notebook 으로 class를 선언 했음.
• 생성자: 객체가 생성될 떼 자바스크립트가 호출되는 함수
• this 와 property: this 는 클래스를 사용해서 만들어질 객체를 의미함. 함수 호출시 전달할 매개변수 name, price, compay를 객체의 속성 name, price, company에 각각 할당하고 있는 것
• method: 클래스안에 함수와 같은 특정 코드를 실행하는 방법 printInfo ()

배열

같은 형식의 많은 데이터를 순서대로 저장하는 하려면 데이터 수 만큼 변수를 선언해야 한다. 이때 배열을 사용한다.

배열이란? 같은 타입의 데이터들을 하나의 변수에 할당하여 관리하기 위해 사용하는 데이터 타입

배열 안에 데이터는 element

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

console.log(rainbowColors[0]) // o번 인덱스를 통해서 데이터에 접근. red
console.log(rainbowColors[1]) // 1번 인덱스를 통해서 데이터에 접근. orage
console.log(rainbowColors[2]) // 2번 인덱스를 통해서 데이터에 접근. yellow
console.log(rainbowColors[3]) // 3번 인덱스를 통해서 데이터에 접근. green
console.log(rainbowColors[4]) // 4번 인덱스를 통해서 데이터에 접근. blue
console.log(rainbowColors[5]) // 5번 인덱스를 통해서 데이터에 접근. indigo
console.log(rainbowColors[6]) // 6번 인덱스를 통해서 데이터에 접근. violet

.length 배열의 길이를 셀때 사용하는 속성

.push 요소를 추가할 때

.pop 배열의 마지막 요소를 삭제할 때

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

console.log(rainbowColors.length) // 7을 출력

console.log(rainbowColors[rainbowColors.length - 1]) // length 를 응용하여 배열의 마지막 요소도 쉽게 찾아서 출력 가능!

rainbowColors.push('ultraviolet') // 배열의 마지막에 ultarviolet 추가
console.log(rainbowColors) // ultraviolet이 추가된 rainbowColors 출력

rainbowColors.pop() // 배열의 마지막 요소 ultraviolet을 제거
console.log(rainbowColors) // ultraviolet이 제거된 rainbowColors 출력

배열에서 반복문 사용하기

배열의 요소를 하나씩 꺼내서 출력해야 할때 사용

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

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

//간단한 형식 
const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

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