Javascript

---

1. 시작

console.log('Hello world!')
//Hello world!를 출력하는 명령어

2. 변수

• let a = b
  a에 b를 할당했다.

• const a = b
  a에 b를 할당했다.(값을 재할당할 필요가 없을때 씀. 변수가 고정된 값을 가지고 있을때 사용)

3. 데이터 타입

• 숫자: 말 그대로 숫자 (e.g. 1,2,3,4)
• 문자열: 말 그대로 문자 (e.g. "chicken",'pizza')
• Boolean: 참과 거짓을 나타냄(true,false)
• null: 값이 없음
• undefined: 값이 할당되지 않음

4. 연산자

1) +를 사용해 문자열 이어붙이기 가능

console.log('안녕' + ' 하세요') // 안녕하세요를 출력
console.log('1' + 2) // 12를 출력

1-1) 템플릿 리터럴 (Template literals)

const year = 2022
const month = 11
const day = 07
console.log(`오늘은 ${year}년 ${month}월 ${day}일 입니다.`)
//오늘은 2022년 11월 07일 입니다. 출력
//`(백틱)

2) 산술연산자

• 사칙연산(+,-,*,/)

console.log(1 + 1) // 2를 출력
console.log(1 - 1) // 0을 출력
console.log(2 / 1) // 2를 출력
console.log(1 * 2) // 2를 출력

• 나머지 연산(%), 거듭제곱(**)

console.log(5 % 3) // 나머지 연산 2를 출력
console.log(2 ** 3) // 2의 3제곱인 8을 출력

3) 증감연산자
자기 자신의 값을 증가시키거나, 감소시키는 연산자(++,--)
변수 앞에 놓느냐 뒤에 놓느냐에 따라 차이가 남

let i = 0
const a = ++i
console.log(i,a)
//1, 1이 출력됨

let i = 0
const a = i++
console.log(i,a)
//1, 0이 출력됨

4) 대입연산자(=,+=,-=)

const a = 2
const b = 1
let c = 0

c += a // c = c + a 와 동일
console.log(c)// 2출력
c += b // c = c + b 와 동일 
console.log(c)// 3출력
c -= a // c = c - a 와 동일
console.log(c)// 1출력

5) 비교연산자
숫자값을 비교하는 연산자

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

6) 논리연산자
||(둘중 하나만 true이면 true), &&(둘 다 true여야 true), !(true면 false false면 true)

let a = true
let b = true

console.log(a && b) // true && true 이므로 true
console.log(a || b) // true || true 이므로 true

a = false
console.log(a && b) // false && true 이므로 false
console.log(a || b) // false || true 이므로 true

b = false
console.log(a && b) // false && false 이므로 false
console.log(a || b) // false || false 이므로 false

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

7)일치연산자
두 값이 일치하는지 비교

console.log(1 === 1) // true
console.log(1 === 2) // false
console.log('Same' === 'Same') // true
console.log('Same' === 'same') // 대소문자나 띄워쓰기도 다 정확히 일치해야 함 false
// ==과 ===의 차이
console.log(1 === "1") // false를 출력
console.log(1 == "1" // true를 출력

5. 조건문

if(조건){조건을 만족할 때 실행할 코드}

const a = 3
if (a < 5) { // a가 5보다 작으므로 실행됨
	console.log(5-a)
} else { // a가 5보다 작지 않을때 실행됨
  	console.log(a)
}

const b = 5
if (b < 5) { // b가 5보다 작지않으므로 실행이 되지않음
	console.log(5-b) 
} else if (b <= 5){ // b는 5이므로 실행됨
  	console.log(b)
} else (b > 5 { // b는 5보다 같지도 작지도 않으므로 실행되지않음
    console.log(b-5)
}

6. 반복문

• while (조건){조건을 만족할 때 실행할 코드}: 특정코드를 조건을 만족할때 반복한다.

let a = 0
while (a < 5) {
	console.log(`${a}`)
	a++ // 0,1,2,3,4 순서로 출력
}

• for (시작; 조건; 단계){조건을 만족할 때 실행할 코드}: while과 같지만 조건을 좀더 명시적으로 표시

for (let a = 0; a < 5 ; a++){
  	console.log(`${a}`)
} // 0,1,2,3,4 순서로 출력

7. 함수

함수는 특정 작업을 수행하는 코드의 집합

// 함수의 선언
function calculate(a, b) {
	const sum = a + b // 매개변수인 a, b 변수처럼 활용!
	console.log(`${sum}`)
	const avg = sum / 2
	return avg // 평균가격을 리턴!
}

const A = 1
const B = 2
// 함수의 호출
const avg1 = calculate(A, B)
console.log(`${avg1}`) // 3 1.5 출력

const C = 3
const D = 4
// 함수의 호출
const avg2 = calculate(C, D)
console.log(`${avg2}`) // 7 3.5 출력

8. 클래스와 객체

• 객체 : 물리적으로 존재하거나, 추상적으로 생각할 수 있는 것 중에서 자신의 속성을 갖고 있고 다른 것과 식별 가능한 것

• 메소드(Method)

//클래스 선언
class Product {
	constructor(name, price, company) {
		this.name = name
		this.price = price
		this.company = company
	}
    printInfo() {
          console.log(`상품명: ${this.name}, 가격: ${this.price}원, 제조사: ${this.company}`)
	}
}
//객체 생성 및 메소드 호출
const phone = new Product('Galaxy23', 1590000, 'Samsung')
phone.printInfo() // 상품명: Galaxy23, 가격: 1590000원, 제조사: Samsung 출력

• 객체 리터럴: 클래스와 같은 템플릿 없이 빠르게 객체를 만들 수 있는 방법

const phone = {
	name: 'Galaxy23',
	price: 1590000,
  	company: 'Samsung',
	printInfo: function () {
		console.log(`상품명: ${this.name}, 가격: ${this.price}원, 제조사: ${this.company}`)
	}
}

phone.printInfo() // 상품명: Galaxy23, 가격: 1590000원, 제조사: Samsung 출력

9. 배열

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

// 1번째 방법
const arr1 = new Array(1, 2, 3, 4, 5)

// 2번째 방법
const arr2 = [1, 2, 3, 4, 5]

// 배열 안의 데이터
const rainbow = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple']

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

// 배열의 길이
const rainbow = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple']

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

console.log(rainbow[rainbow.length - 1]) // purple을 출력

// 요소 추가와 삭제
const rainbow = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple']

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

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