Javascript - 기초문법편

변수

주석달기 : //

변수 선언과 데이터 할당

let

• 자바스크립트에서 변수를 선언할 때는 let 이라는 키워드를 사용!
  let 변수이름 = 값 >> "변수___를 선언했고 그 변수에 값을 할당했다."

const

• const는 let과 달리 변수에 값을 재할당할 필요가 없을 때 사용! 이때 해당 변수는 고정된 값을 가짐

const name = "Sinok Kim" // name이라는 변수에 "Sinrok Kim"이라는 값을 할당
console.log(name) // 변수 name이 가리키고 있는 값 "Sinrok Kim"을 출력

name = "William" // 
값을 다시 재할당하려는 것이지만 실패. 에러 발생!

*var 함수는 요즘은 사용하지 않음!!!

데이터 타입

:number, string, boolean, null, undefined

숫자 (Number)

문자열 (String)

• 이중 따옴표("")나 작은따옴표('')로 데이터를 감싸야한다!

*구글링을 잘 하려면 영어 명칭을 잘 알아놓아야 한다!

Boolean

: True/False

• 비교 연산자에서 많이 활용한다!

const isMan = true
const isWoman = false

console.log(isMan)
console.log(isWoman)

isMan을 true로 선언했으므로 console.log(isMan)에는 true가 나타난다!

null, undefined (차이를 꼭 이해하기!)

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

*본 타입 이외에 객체형 타입이라는 데이터도 존재한다! 나중에 다시 알아보자.

연산자(1)

문자열 붙이기

+를 사용하면 문자열을 이어 붙일 수 있다.

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

'1'은 문자열이기 때문에 12가 된것.
*문자열과 숫자를 이어붙이면 숫자가 문자로 인식된다!

템플릿 리터럴 (Template literals)

: 백틱을 이용해 문자열 데이터를 표현. 백틱을 이용하면 따옴표를 이용할 때보다 문자열 붙이기가 더 간단하다.

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

산술연산자 (Numeric operators)

: 일상생활에서 많이 쓰는 사칙연산(+, -, *, /) 뿐만 아니라 // (나머지 연산), ** (거듭제곱) 도 있다.

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)
totalPrice += pantsPrice // totalPrice = totalPrice + pantsPrice 와 동일 
console.log(totalPrice)

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

연산자(2)

비교연산자 (Comparison operators)

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

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

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

• === 는 엄밀한 (strict) 일치연산자여서 비교하는 두 값의 데이터타입과 값 자체가 정확히 일치해야만 true를 리턴. ==의 경우 두 값의 데이터 타입이 일치하지 않을 때 해당 값의 데이터타입을 자동으로 변환하는 특성이 있다. >> 자칫하면 실수가 날 수 있으므로 ==는 실무에서는 거의 사용안함!

console.log(1 === "1") // false를 출력
console.log(1 == "1" // true를 출력

조건문

if

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

else, else if

: if 구문의 조건을 만족하지 않았을 때 실행하고 싶은 코드를 else 구문과 함께 작성. else if 를 사용하면 조건을 추가로 더 넣어줄 수 있음!

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

distance >= 2 && distance < 5
// distance가 2 이상이고 5 미만일 때

반복문

while

:while (조건) { 조건을 만족할 때 실행할 코드 } while을 쓸때는 끝날 수 있도록 해줘야 한다.

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

*실수로 무한루프에 빠져서 프로그램의 실행이 끝나지 않는다면 ctrl + c 를 눌러서 중단시킵니다.

for

: 제일 많이 쓰인다. 명시적으로 반복문의 조건을 표현
for (begin; condition; step) { 조건을 만족할 때 실행할 코드 }

for (let temperature = 20; temperature < 25; temperature++) {
	console.log(`${temperature}도 정도면 적당한 온도입니다.`)
}
//결과값: 20도면 적당한 온도입니다. 21도면 적당한 온도입니다. >>> 24도까지

반복문과 조건문 조합

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

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

예2) 1부터 20까지의 숫자중 홀수인 경우는 '숫자 ...은 홀수입니다.'를 짝수인 경우는 '숫자 ...은 짝수입니다'

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

함수

함수의 선언

:변수를 선언하고 해당 변수에 값을 할당했던 것처럼, 함수도 선언하고 그것이 실행할 코드의 집합을 만들어서 저장한다. 이때 함수의 이름은 함수가 하는 일을 따온다.

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

매개변수 (parameter)는 해당 함수의 바디에 있는 코드에서 사용할 수 있는 일종의 변수인데, 함수 호출시 전달하게 된다. (함수를 실행하기 위해 필요한 input)

사전적인 의미의 매개: 둘 사이에 관계를 맺어줌.
매개변수: 함수의 특정한 성질을 나타내는 함수

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

함수의 호출

const 변수명 = 선언한 함수명 (매개변수들...)
앞에서 선언해본 calculateAvg를 호출해서 써보자!

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}입니다.`)

: 함수 calculateAvg를 호출하면서 변수 priceA와 priceB를 매개변수로 전달

함수 호출시 코드의 흐름

1. 함수 calculateAvg를 선언 (함수 이름은 바껴도 됨)
2. 함수 calculateAvg를 호출하면서 변수 priceA와 priceB를 매개변수로 전달
3. 함수 calculateAvg의 바디코드가 실행됨 (코드의 바디 안으로 돌아가서 들어감)
4. 함수의 바디코드가 최종적으로 avg 변수를 리턴함
5. 변수 avg 가 avg1에 할당됨

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

클래스와 객체

객체(object)타입

:관련있는 데이터 타입을 한번에 묶어서 한번에 나타낼 수 있는 데이터 타입을 만드는 것

// 노트북1을 것을 표현하기 위한 데이터들
// 변수명을 명시적으로 하는 것 이외에는 이 데이터들의 관계를 표현해줄 수 있는 방법이 없음
const notebook1Name = 'Macbook'
const notebook1Price = 2000000
const notebook1Company = 'Apple'

// 이름, 가격, 제조사와 같은 정보를 다 담을 수 있는 좀 더 큰 범위의 데이터 타입이 있으면 좋지 않을까?

클래스(Class) 선언

=template = 함수를 정의하고 해당 함수를 필요할 때 사용하는 것처럼 클래스를 미리 정의해놓으면 필요할 때마다 클래스를 사용해서 동일한 형태를 가진 객체를 생성할 수 있음

class Notebook {
	constructor(name, price, company) {
		this.name = name
		this.price = price
		this.company = company
	}
}

"constructor"(생성자) = 함수와 같은 역할 (객체가 생성될 때 자바스크립트 내부에서 호출되는 함수) constructor는 constructor 그대로 써줘야함. 함수이름처럼 선언하는 건 "Notebook"임

매개변수: name, price, company

this: 자기 자신을 의미하며, 뒤에 붙는 name, price, company는 객체의 property(속성)이 된다.

클래스 통해 객체만들기

const 변수명 = new 클래스명(생성자에서 정의한 매개변수들...)

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

클래스를 활용해 객체를 만들 때는 new 라는 키워드를 먼저 써주고 클래스명을 마치 함수처럼 호출하면서 매개변수값을 전달해주면 된다.
여기서 Notebook은 객체, 'MacBook', 2000000, 'Apple'는 객체의 속성들에 할당된 매개변수값들

객체의 속성 하나하나에 접근해 데이터를 갖고와야 할 때는 this.속성명 을 사용한다!
배열과 생긴게 조금 비슷해보이는데 실제로 배열도 클래스를 활용해 객체를 선언해주는 개념이다.

console.log(notebook) // Notebook { name: 'Macbook', price: 2000000, company: 'Apple' } 
console.log(notebook.name) // MacBook
consoel.log(notebook.price) // 2000000
console.log(notebokk.company) // Apple

메소드 (method)

: 클래스를 통해 속성뿐만 아니라 특정 코드를 실행할 수 있는 함수같은 메소드도 정의할 수 있다. 객체를 생성한 후, 만들어진 객체의 메소드를 호출한다.

```jsx
// 클래스 선언
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 () { 메소드 호출시 실행할 코드들 }
}

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

computer.printInfo()

name, price라는 속성과 printInfo 라는 메소드를 가지고 있는 객체를 만들어서 computer라는 변수에 할당하는 코드이다!

class를 만들어두는 것의 핵심은 재사용성!

코드 연습해보기

class Cloth {
    constructor(color, size, price) {
        this.color = color
        this.size = size
        this.price = price
    }
    printinfo() {
        console.log(`${this.color}, 사이즈: ${this.size}, 가격: ${this.price}원`)
    }
}

    const shirts = new Cloth('white','m','50000')
    const coat = new Cloth('white','l','300000')

    shirts.printinfo()
    coat.printinfo()

배열

배열의 선언

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

• 숫자 1, 2, 3, 4, 5로 이루어진 배열을 선언하는 방법은 두가지:

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

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

1번 방법: 앞서 클래스 활용하여 객체 만든것과 똑같다. Array라는 클래스를 활용해 객체를 만들어 준 것 (Array는 자바스크립트 내부적으로 갖고있는 고유 클래스이다!)
2번 방법: 배열을 바로 만드는 법. 2번 방법을 많이 사용한다.

배열 안의 데이터

• 배열에 있는 데이터 각각을 요소(element)라고 부른다.
• 배열에서는 인덱스(index) (데이터가 배열내에 자리잡은 위치를 뜻하며 0부터 시작한다.) 가 객체의 속성명과 같은 역할을 해줍니다.

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

배열의 길이

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

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

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

요소 추가와 삭제 (배열)

: 새로운 요소를 추가하거나 (push) 제거 (pop)하는 기능

배열.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)
}

코드 연습해보기!

const pricelist = [1000,2000,3000,4000,5000,6000,7000,8000]

let sum = 0

for (const price in pricelist) {
    sum += price 
}

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

sum이라는 변수가 0으로 시작해서 계속 누적시키고 있는 코드