JavaScript 문법 뽀개기

[ 시작하기에 앞서]

▶ 프로그래밍이란?

데이터의 입력 → 처리 → 출력이 프로그램이 하는 일이고, 이렇게 프로그램이 정해진 방식에 따라 일할 수 있도록 작성해놓는게 '프로그래밍'

▶ 자바스크립트란?

프로그래머들은 어떤 도구를 이용해 코딩을 함. 이때 이용하는 도구가 바로 프로그램 언어 인간이 쓰는 언어와 마찬가지로 프로그램이 언어도 정해진 문법이 있음. 문법에 따라 코딩을 하면 컴퓨터는 이를 해석해 데이터를 입력받아 처리하고 출력함

프로그래밍 언어도 인간이 쓰는 언어처럼 매우 다양하고 계속 발전함. 자바스크립트는 이러한 프로그래밍 언어중에서도 몇 손가락 안에 들만큼 많이 쓰이는 언어

▶ Node.js란?

Node.js는 자바스크립트 언어의 문법에 맞게 코딩을 했을 때 컴퓨터가 이를 해석해서 처리할 수 있도록 해주는 일종의 전용번역기. 번역기가 이전에는 웹브라우저에만 있었지만, 컴퓨터에 설치해주면 웹브라우저가 아닌곳에서도 자바스크립트 코드를 실행하고 결과를 얻을 수 있음

 

[ Hello World ]

//hello.js
console.log('Hello World')

Hello World는 보통 코딩을 처음 시작하게 되면 하는 일이 "Hello World"라는 문구를 출력해보는 일

위에 예시는 console을 이용해 Hello World라는 문자열을 출력하는 명령어

//는 '주석'. 컴퓨터가 해석해서 실행하는 부분이 아니기 때문에 설명을 달고 싶은 것이 있을 때 사용

 

.js는 이 파일이 자바스크립트 파일이라는 것을 알려주는 확장자

이렇게 확장자를 명시해주면 코딩을 할때 에디터 툴(ex.VSCode)이 지원해주는 여러 도움을 받을 수 있음

 

파일을 실행시킬려면 터미널에서 node 파일명을 입력한후 엔터로 실행해 주면 됨

그러면 컴퓨터가 해석해서 실행결과를 출력해줌

 

[ 변수 ]

▶ 변수 선언과 데이터 할당

자바스크립트에서 변수를 선언할 때는 let, const라는 키워드를 사용

let 변수이름 = 값
const 변수이름 =  값

이것을 보통 "변수 <변수이름>를 선언했고 해당 변수에 <값>을 할당했다"고 함

변수는 저장해놓은 값을 가리키는 일종의 '이름표'라고 생각하면 됨

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

name = 'William' // 위에서 선언했던 name이라는 변수에 "William"이라는 값을 재할당
console.log(name) // 변수 name이 가리키고 있는 값 "William"을 출력

 

const는 let과 달리 변수에 값을 재할당할 필요가 없을 때 씀

해당 변수가 고정된 값을 계속 갖고 있을 때 쓰는 것(재할당하면 오류)

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

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

 

- 변수를 선언할 때 var라는 키워드를 쓰는 것을 볼수 있을때는 let, const가 있기 전에는 var를 써서 변수를 선언했음

하지만 최선 자바스크립트에서는 var의 여러 단점들로 인하여 사용X

 

[ 데이터 타입 ]

자바스크립트에서는 여러 종류의 데이터 타입들이 존재

기본 또는 원시형 (primitive)타입에는 number, string, boolean, null, undefined 있음

▶ 숫자(Number)

말 그대로 숫자 데이터

const myAge = 20
let yourAge = 25

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

▶ 문자열(String)

말 그대로 문자열 데이터

이중 따옴표("")나 작은따옴표('') 또는 백틱(``)으로 데이터를 감싸야 함

일반적인 출력 문자 외의 특수 문자는 이스케이프 표현을 사용해 출력할 수 있음(ex.\n = 줄바꿈)

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)
console.log(isWoman)

▶ 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 = 20000
console.log(`이 신발의 가격은 ${shoesPrice}원입니다`) // 이 신발의 가격은 20000원입니다
// 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) // 1, 10을 3으로 나누기 나머지 1
console.log(10 ** 2) // 100, 10의 2승인 100

▶ 증감연산자(Increment and Decrement operators)

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

증감연산자를 변수앞에 놓는냐, 변수뒤에 놓느냐에 따라 차이가 있음(먼저 증감, 끝나고 나중에 증감)

증감연산자를 사용하면 다시 재할당함으로 const를 사용하면 에러 발생

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

먼저 자기 자신에게 1을 더해서 재할당 한 후, 이를 preIncrement 에 할당

 

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

// postIncrement에 자기 자신의 값을 먼저 할당하고, 이후에 1을 더해서 재할당함

▶ 대입연산자(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)

▶ 비교연산자(Comparison operators)

숫자값을 비교하는 연산자

비교연산자를 통해서 얻는 값은 Boolean

console.log(1 < 2) // true
console.log(2 <= 2) // true
console.log(1 > 2) // false
console.log(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

↘일치 연산자는 ==도 있음

자바스크립트에는 두 가지의 일치연산자가 있음

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

반면 ==는 비교하는 두 값의 데이터타입이 일치하지 않을 때

해당 값의 데이터타입을 자동으로 변환해주는 자바스크립트만의 특성이 있음

이 특성이 자칫 개발자의 실수를 유발할 가능성이 크기 때문에 실무에서는 거의 사용하지 않음

 

==와 ===의 차이

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

 

[ 조건문 ] 

▶ if

조건을 만족했을 때만 코드 실행

조건의 결과값이 Boolean

const shoesPrice = 400
if (shoesPrice < 500) {
	// 신발가격이 500원보다 작으므로 해당 코드가 실행됨
	console.log('신발을 사겠습니다.')
}

const capPrice = 500
if (capPrice < 500) {
	// 모자가격이 500원보다 작지 않으므로 해당 코드가 실행되지 않음
	console.log('모자를 사지 않겠습니다.')
}

▶ else, else if

if 구문의 조건을 만족하지 않았을 때 실행하고 싶은 코드를 else 구문과 함께 작성

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

 

else if 구문을 활용하면 보다 더 많은 조건을 판단하고 코드를 실행할 수 있음

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

 

[ 반복문 ] 

반복문에 주의할 점은 조건에 포함된 변수의 값을 계속 변화시켜줘서 언젠가는 반복문이 끝날수 있도록 해주어야 함

반복문의 조건이 계속해서 true를 리턴한다면 무한루프에 빠져서 프로그램이 끝나지 않음

▶ while

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

조건을 설정해서 원하는 만큼만 반복할 수 있도록 함

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

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

▶ for

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

while보다 좀더 명시적으로 반복문의 조건을 표현할 수 있음

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)

[ 함수 ]

▶ 함수란?

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

반복되는 특정 작업을 수행해야 한다면 그 코드 자체를 어딘가에 만들어서 저장해놓고 편함

마치 변수에 데이터를 할당해놓고 계속 사용하는 것처럼 사용

▶ 함수의 선언과 호출

함수의 선언

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

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

함수명은 함수가 하는 일들을 대표할 수 있는 이름

매개변수(parameter)는 해당 함수의 바디에 있는 코드에서 사용할 수 있는 일종의 변수

매개변수는 함수 호출시 전달하고 함수를 실행하기 위해서 필요한 일종의 input

중괄호 안에는 이 함수가 해야할 일들을 코드로 쭉 작성하고, 반환해야 할 값을 명시해줌

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

 

함수의 호출

실제 이 함수를 사용하기 위해서는 호출을 해야 함

const 변수명 = 선언한 함수명(매개변수들...)

 

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

함수 호출시 코드의 흐름

 

1. 함수 calculateAvg를 호출하면서 변수 priceA와 priceB를 매개변수로 전달
2. 함수 calculateAvg의 바디 코드가 실행됨. 이 때 1번에서 전달한 매개변수의 값이 함수를 선언할 때 썼던 매개변수명인 price1, price2에 할당되었다고 보면 됨
3. 함수의 바디 코드가 최종적으로 변수 avg를 리턴하고 있고, 이것이 변수 avg1에 할당됨

[ 클래스와 객체 ]

▶ 객체(Object) 타입

객체를 어렵게 얘기하면 '물리적으로 존재하거나 추상적으로 생각할 수 있는 것중에서 자신의 속성을 갖고 있고 다른 것과 식별 가능한 것' 을 의미

▶ 클래스(Class) 선언

클래스는 템플릿이고 객체는 이를 구체화한 것

클래스를 미리 정의해놓으면 필요할 때마다 그 클래스를 사용해서 동일한 모양을 가진 객체를 만들 수 있음

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

• class키워드와 클래스명
  • class는 클래스를 선언하는 문구이고 그 뒤에 바로 클래스 명이 나옴
  • 클래스명도 마치 변수명처럼 내가 표현하고자 하는 데이터를 잘 나타낼 수 있는 이름이 좋음
• 생성자
  • 중괄호 안에는 생성자라는 것을 적어줌
  • 생성자는 말 그대로 나중에 객체가 '생성'이 될 때 자바스크립트 내부에서 호출이 되는 함수라고 생각하면 됨
  • 생성자를 좀 더 살펴보면 3개의 매개변수를 정의했고 각각의 이름은 name, price, company
• this와 속성(property)
  • 생성자의 바디를 보면 this 라는 키워드가 등장
  • 이 this는 클래스를 사용해 만들어질 객체 자기 자신을 의미하고 this 뒤에 붙는 name, price, company는 객체의 속성
  • 생성자의 바디에서는 함수 호출시 전달할 매개변수 name, price, compay를 객체의 속성 name, price, company에 각각 할당하고 있는 것

▶ 객체 만들기

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

클래스를 활용해 객체를 만들 때는 new 라는 키워드를 먼저 써주고 클래스명을 마치 함수처럼 호출하면서 매개변수값을 전달해주면 됨

그러면 해당 클래스의 생성자가 호출되면서 객체가 생성되고 객체의 속성들에 매개변수값들이 할당

만들어진 객체는 변수에 할당해줌

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

객체도 변수에 할당하고 나면 해당 변수를 활용해 객체에 접근할 수 있음

객체의 속성 하나하나에 접근해 데이터를 갖고와야 할 때는 this.속성명을 사용합니다.

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

[ 클래스와 객체 ]

▶ 메소드(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()

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

해당 객체의 printInfo 메소드를 바로 호출까지 해봄

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

그렇다면 왜 굳이 복잡하게 클래스를 정의하는 것일까? 바로 재사용성 때문

한번 클래스를 만들어두면 같은 속성과 메소드를 갖고 있는 객체를 훨씬 더 간결한 코드로 만들 수 있음

 

[ 배열 ]

▶ 배열(Array) 이란?

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

▶ 배열의 선언

// 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']

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

▶ 배열의 길이

배열이 얼마나 많은 데이터를 갖고 있는지, 길이를 알고 싶을때 사용하는것이 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])
}

 

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

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

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

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

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