개발공부 18일차 [JavaScript 문법뽀개기]

프로그래밍 : 입력→ 처리 → 출력

코딩 : 도구를 활용해서 프로그래밍을 함.

Node.js : 자바스크립트 언어의 맞게 코딩을 했을때 해석하는 컴퓨터용 전용 번역기

 

변수 :값을 저장해놓고 사용하기 위한 이름표

//변수
let name2 = 'uri'
console.log(name2)
//콘솔에 uri가 찍힘
name2 = 'stella'
console.log(name2)
//uri가 출력 된 이후에 stella도 출력됨


const name2 = 'uri'
console.log(name2)
//콘솔에 uri가 찍힘
name2 = 'stella'
//uri라는 값이 나오고 4번째줄 에러가 뜸
//const는 해당변수의 값을 재할당 할 수 없기 때문

데이터 타입

원시형 타입 : number, string, boolean, null, undefined

• 숫자 (Number)
  • 따옴표가 필요 없음

console.log(10) // 10을 출력

const myAge = 37
const yourAge = 25

console.log(myAge) // 37을 출력
console.log(yourAge) // 25를 출력

• 문자열 (String)
  • 이중 따옴표("")나 작은따옴표('')로 데이터를 감싸야 함

const firstName = 'Sinrok'
const lastName = 'Kim'

console.log(firstName) // Sinrok을 출력
console.log(lastName) // Kim을 출력

• Boolean
  • 자바스크립트에서 참과 거짓을 나타내는 true / false를 표현하는 데이터

const isMan = true
const isWoman = false

console.log(isMan) // true가 출력됨
console.log(isWoman) // false가 출력됨

• null, undefined
  • null은 텅텅 비어 있는 값을 의미
  • undefined은 변수를 선언만 하고 값이 할당되어 있지 않은 것이다.

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

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

연산자

어떤 데이터와 데이터를 같이 처리해서 반환해줌

• 문자열 붙이기
  • 문자열과 숫자를 이어붙이면 숫자가 문자로 인식

console.log('My' + ' car') // My car를 리턴받아 출력
console.log('1' + 2) // 12를 출력

• 템플릿 리터럴 (Template literals)
  • 백틱(``) 을 사용하여 문자열 데이터를 표현할 수 있어요. 이중 따옴표나 작은 따옴표로 문자열을 표현할 때보다 간결하게 문자열 붙이기가 가능합니다.

const shoesPrice = 200000
console.log(`이 신발의 가격은 ${shoesPrice}원입니다`) 
// console.log('이 신발의 가격은 ' + shoesPrice + '원입니다') 와 동일

• 산술연산자 (Numeric operators)

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

 

 

• 증감연산자 (Increment and Decrement operators)
  • 자기 자신의 값을 증가시키거나 감소시키는 연산자(++, —)라고 생각하시면 좋음
  • 이 증감연산자를 변수앞에 놓는냐, 변수뒤에 놓느냐에 따라 차이가 있다.

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

증감연산자를 활용해 count의 값을 계속 증가시키고 다시 count에 할당하고 있기 때문에 const를 사용하면 에러가 발생함.

 

• 대입연산자 (Assignment operators)

const shirtsPrice = 100000
const pantsPrice = 80000
let totalPrice = 0

totalPrice += shirtsPrice // totalPrice = totalPrice + shirtsPrice 와 동일
console.log(totalPrice). //값 : 100000
totalPrice += pantsPrice // totalPrice = totalPrice + pantsPrice 와 동일 
console.log(totalPrice) //값 : 180000

totalPrice -= shirtsPrice // totalPrice = totalPrice - shirtsPrice 와 동일
console.log(totalPrice) //값 : 80000

• 비교연산자 (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)
• || (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)
  • 두 값이 일치하는지를 비교

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

==는 쓰지말자!!!!

 

조건문

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

const shoesPrice = 50000
if (shoesPrice < 40000) { 
	console.log('신발을 사겠습니다.') 
} else if (shoesPrice <= 50000) {
	console.log('고민을 해볼게요...')  
// 신발 가격이 50000원보다 작거나 같으므로 않으므로 해당 코드가 실행됨
} else {
	console.log('너무 비싸요. 신발을 사지 않겠습니다.')
}



const distance = 2
if (distance < 2) {
	console.log("걸어가자")
} else if (distance >= 2 && distance < 5) // 2 =< distance < 5
	console.log("택시를 타자") //해당 조건이 실행됨
} else {
	console.log("기차를 타자")
}

반복문

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

let temperature = 20
while (temperature < 25) {
	console.log(`${temperature}도 정도면 적당한 온도입니다.`)
	temperature++ 
}
// 증감연산자를 활용해서 온도를 1도씩 올리고 계속 반복되다가 24가되면 반복을 멈춤

⭐️⭐️⭐️여기서 주의할 것은 반복문의 조건에 포함된 변수의 값을 계속 변화시켜줘서 언젠가는 반복문이 끝날 수 있도록 해줘야 한다.

위의 코드에서도 온도를 1도씩 계속 올려서 반복문의 조건이 언젠가는 false를 리턴하고 바디의 코드가 실행되지 않습니다. 반복문의 조건이 계속해서 true 를 리턴한다면 무한루프에 빠져서 프로그램이 끝나지 않는다.

프로그램 강제종료 : command + c⭐️⭐️⭐️

 

• for
  • 좀 더 명시적으로 반복문의 조건을 표현할 수 있습니다.
  • for (begin; condition; step) { 조건을 만족할 때 실행할 코드 }

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

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

• 반복문과 조건문 활용
• 반복문과 조건문을 같이 활용하여 1 ~ 10까지의 숫자중 3으로 나누었을 때 나머지가 0인 숫자를 구해서 출력해봐요.

for (let number = 1; number <= 10; number++) {
	if (number % 3 === 0) {
		console.log(`${number}는 3으로 나눠서 떨어지는 숫자입니다.`)
	}
}

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

함수

• 함수의 선언
  변수를 선언하고 해당 변수에 값을 할당했던 것처럼, 함수도 선언을 하고 해당 함수가 실행할 코드의 집합을 만들어서 저장해준다.

 

• function 함수명(매개변수들...) {
  이 함수에서 실행할 코드들
  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}입니다.`)

//결과값
//두 상품의 합계는 3000입니다.
//두 상품의 평균은 1500입니다.
//두 상품의 합계는 7000입니다.
//두 상품의 평균은 3500입니다.

Q. 세 개의 물건가격을 매개변수로 전달받아 평균값을 리턴하는 함수를 정의하고, 그 함수를 호출해서 평균값을 출력해보세요.

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 Notebook {
  constructor(name, price, compnay) {
    this.name = name
    this.price = price
    this.compnay = compnay
  }

}

const notebook1 = new Notebook('Macbook',2000000,'Apple')

console.log(notebook1)
console.log(notebook1.name)
console.log(notebook1.price)
console.log(notebook1.compnay)

클래스를 활용해 객체를 만들 때는 new 라는 키워드를 먼저 써주고 클래스명을 마치 함수처럼 호출하면서 매개변수값을 전달해주면 된다. 그러면 해당 클래스의 생성자가 호출되면서 객체가 생성되고 객체의 속성들에 매개변수값들이 할당된다.

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

// 클래스 선언
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원

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

2개 이상의 속성과 메소드가 있을 때는 쉼표로 구별해주고 가독성을 위해서 줄바꿈도 해주는 게 좋다.

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

computer.printInfo()

결과적으로는 클래스를 활용해 객체를 만든 것과 동일하다.

그렇다면 왜 굳이 복잡하게 클래스를 정의하는 걸까?

→ 바로 재사용성 때문이다. 한번 클래스를 만들어두면 같은 속성과 메소드를 갖고 있는 객체를 훨씬 더 간결한 코드로 만들 수 있다.

 

 

Q. 여러분만의 의류 쇼핑몰을 만들려고 합니다. 옷의 종류는 많지만 기본적으로 색깔, 사이즈, 가격의 속성을 갖고 있네요. 그리고 이 옷들의 세 속성을 바로 확인할 수 있게 출력해주는 메소드가 필요할 거 같습니다. 클래스와 객체를 활용해 작성해보아요.

class clothes {
  constructor(color, size, price) {
    this.color = color
    this.size = size
    this.price = price
  }
  printInfo() {
    console.log(`색깔: ${this.color}, 사이즈: ${this.size}, 가격: ${this.price}`)
  }
}

const shrits = new clothes('white', 'm', '50000')
const coat = new clothes('black', 'xl', '180000')

shrits.printInfo()
coat.printInfo()

배열

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

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

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

1번째 방법은 앞서 우리가 클래스를 활용해 객체와 같다. Array라는 클래스를 활용해서 객체를 만들었다고 생각해주면 된다.

우리가 직접 Array라는 클래스를 선언한 적은 없지만 자바스크립트 내부적으로 이미 갖고 있는 것이고 그래서 우리는 바로 사용을 하기만 하면 된다.

2번째 방법은 배열을 바로 만드는 방법이다. 대괄호 안에 우리가 배열로 저장할 데이터를 쭉 나열해주면 된다.

그래서 배열을 만들때는 1번째보다는 2번째 방법을 많이 사용한다.

 

• 배열 안의 데이터
  • 배열에 있는 데이터 각각을 우리는 요소 (element) 라고 부른다.
  • 배열에서는 인덱스(index) 가 객체의 속성명과 같은 역할을 해준다.
  • 인덱스 : 배열 안의 데이터들이 자리잡은 순서 / 0부터 시작함.

const rainbowColors = ['red', 'orange', 'yellow', 'green']

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

• 배열의 길이
• length : 배열안에 요소의 갯수를 확인 하는 속성

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

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

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

• 요소 추가와 삭제
  • 추가 : push
  • 삭제 : pop

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

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])
}

1. 배열의 인덱스는 0부터 시작이니 변수 i의 시작값도 0으로!
2. i가 배열의 길이보다 작을 때에만 반복문 안의 코드 실행
3. 모든 요소를 빠짐없이 다 출력해야 하므로 i는 1씩 증가

배열과 함께 좀 더 자주 쓰이는 간단한 형식의 for 문도 있다.

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

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

배열에서 요소들을 차례대로 하나씩 찾아 color라는 변수에 할당한다.

자동으로 배열의 끝까지 반복문이 실행되기 때문에 첫번째 for 문보다 쓰기 편하다.

 

Q. 열 개의 상품 가격 데이터를 갖고 있는 배열을 만듭니다. 반복문을 활용해 상품들의 가격 합계와 평균을 구해보아요.

const prices = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let sum = 0

for (const price of prices) {
  sum += price
}
//반복문을 활용해 상품들의 가격 합계와 평균을 구해보아요.


const avg = sum / prices.length
console.log(`합계 : ${sum}, 평균 : ${avg}`)

 

 

 

생각보다 강의 앞부분은 여러번 들었던 내용이라 쉽게 이해하고 넘어갔는데 클래스와객체부터 멘붕이였다...

왜 굳이 메소드를 써야하는가에서 또 멈춰서 한참을 고민에 빠졌다..

아직까지는 이해는 못했지만 어찌되었든 유지보수를 위해 메소드는 써주는게 맞다 라고 이해하고 넘기기로 했다. 더 다른 의미가 있을 순 있으나 현재로서는 이해하기 힘든 부분이답... ㅠㅠ

리턴도 한참 멘붕이고 이해할 수 없다가 여러번 사용하고 여러 강의를 듣다보니 어느정도 이해가 된것처럼 메소드도 분명 이해하는 날이 오겠지....😩😩😩

 

그래도 재밌었다...ㅎ..?