본문 바로가기
Language/Javascript

Javascript 기본문법

by 노믹 2022. 11. 21.

변수

// 기본적인 변수할당
let 변수이름 = 값

// 변수가 고정된 값을 가지고 있을 때
const 변수이름 = 값

// 과거엔 썼지만 지금은 쓰지 않는 키워드
var 변수이름 = 값

 

데이터 타입

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

const myAge = 37
const yourAge = 25

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

// 문자열
// 큰따옴표("")나 작은따옴표('')로 데이터를 감싸야 한다

const firstName = 'Jungmin'
const lastName = 'Kim'

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

// Boolean
// true / false
const isMan = true
const isWoman = false

console.log(isMan)		// true
console.log(isWoman)	// false

// null
// 할당되어 있는 값이 비어있는 것
let name1 = null
console.log(name) // null을 출력

// undefinded
// 변수에 값을 할당되지 않은 것
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 + '원입니다') 와 동일

 

  • 산술 연산자
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을 사용한다
let count = 1
const preIncrement = ++count
// count = count + 1
// const preIncrement = count
console.log(`count: ${count}, preIncrement: ${preIncrement}`) // count: 2, preIncrement: 2

const postIncrement = count++
// 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)

 

  • 비교 연산자
// Boolean 값을 얻는다
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

 

  • 논리 연산자
// ||(or), &&(and), !(not)
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

 

  • 일치 연산자
// == 는 비교하는 두 값의 데이터타입이 일치하지 않을 때 해당 값의 데이터타입을 자동으로 변환되기 때문에 쓰지 않는다
// 대문자나 소문자도 정확히 일치해야 한다
console.log(1 === 1)	// true
console.log(1 === 2)	// false
console.log('Javascript' === 'Javascript')	// true
console.log('Javascript' === 'javascript')	// false

// ==와 ===의 차이 확인하기
console.log(1 === "1")	// false를 출력
console.log(1 == "1"	// true를 출력

 

조건문

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

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

 

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

// else if을 활용하면 보다 더 많은 조건을 판단할 수 있다
const shoesPrice = 50000
if (shoesPrice < 40000) { 
	console.log('신발을 사겠습니다.')
} else if (shoesPrice <= 50000) {
	console.log('고민을 해볼게요...')  // 신발 가격이 50000원보다 작거나 같으므로 않으므로 해당 코드가 실행된다
} else {
	console.log('너무 비싸요. 신발을 사지 않겠습니다.')
}

 

반복문

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

 

  • for
for (begin; condition; step) {조건을 만족할 때 실행할 코드}
  1. temperature라는 변수를 선언하고 값을 할당합니다. (begin)
  2. temperature가 25보다 작은지 연산합니다. 결과값이 true라면 계속 실행. false라면 for 문 종료 (condition)
  3. 중괄호 안의 코드가 실행됩니다.
  4. temperature에 1을 더해서 재할당하고 2번 과정부터 다시 반복합니다. (step)
for (let temperature = 20; temperature < 25; temperature++) {
	console.log(`${temperature}도 정도면 적당한 온도입니다.`)
}
/* 20도 정도면 적당한 온도입니다.
21도 정도면 적당한 온도입니다.
22도 정도면 적당한 온도입니다.
23도 정도면 적당한 온도입니다.
24도 정도면 적당한 온도입니다. */

 

  • 반복문과 조건문 활용
for (let number = 1; number <= 10; number++) {
	if (number % 3 === 0) {
		console.log(`${number}는 3으로 나눠서 떨어지는 숫자입니다.`)
	}
}
/* 3는 3으로 나눠서 떨어지는 숫자입니다.
6는 3으로 나눠서 떨어지는 숫자입니다.
9는 3으로 나눠서 떨어지는 숫자입니다. */

 

함수

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

 

클래스와 객체

  • 클래스
class Notebook {
	constructor(name, price, company) {
		this.name = name
		this.price = price
		this.company = company
	}
}
  • class 키워드와 클래스명

class는 클래스를 선언하는 문구이고 그 뒤에 바로 클래스 명이 나옵니다. 클래스명도 마치 변수명처럼 내가 표현하고자 하는 데이터를 잘 나타낼 수 있는 이름이 좋습니다.

  • 생성자 (constructor)

중괄호 안에는 생성자라는 것을 적어줍니다.  생성자는 말 그대로 나중에 객체가 '생성'이 될 때 자바스크립트 내부에서 호출이 되는 함수라고 생각하면 된다. 생성자를 좀 더 살펴보면 3개의 매개변수를 정의했고 각각의 이름은 name, price, company 입니다.

  • this와 속성(property)

생성자의 바디를 보면 this 라는 키워드가 등장합니다. 이 this는 클래스를 사용해 만들어질 객체 자기 자신을 의미하고 this 뒤에 붙는 name, price, company는 객체의 속성입니다. 생성자의 바디에서는 함수 호출시 전달할 매개변수 name, price, compay를 객체의 속성 name, price, company에 각각 할당하고 있는 것입니다.

 

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


const notebook1 = 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)
// 클래스 선언
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라는 변수에 할당하는 코드입니다.

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

복잡하게 클래스를 정의하는 이유는 재사용성 때문입니다.

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

 

배열(Array)

  • 배열이란?

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

  • 배열의 선언
// 1번째 방법
const arr1 = new Array(1, 2, 3, 4, 5)

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

// 2번째 방법이 간단해서 2번째 방법을 많이 사용합니다
  • 배열 안의 데이터

배열에 있는 데이터 각각을 요소(element) 라고 부릅니다.

객체도 속성명을 통해 해당 데이터에 쉽게 접근할 수 있었습니다.

배열에서는 인덱스(index) 가 객체의 속성명과 같은 역할을 해줍니다.

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

console.log(colors[0]) // o번 인덱스를 통해서 데이터에 접근. red
console.log(colors[1]) // 1번 인덱스를 통해서 데이터에 접근. orage
console.log(colors[2]) // 2번 인덱스를 통해서 데이터에 접근. yellow
console.log(colors[3]) // 3번 인덱스를 통해서 데이터에 접근. green
console.log(colors[4]) // 4번 인덱스를 통해서 데이터에 접근. blue
console.log(colors[5]) // 5번 인덱스를 통해서 데이터에 접근. indigo
console.log(colors[6]) // 6번 인덱스를 통해서 데이터에 접근. violet
  • 배열의 길이
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

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

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

배열을 선언하고 난 이후에 새로운 요소를 더하거나(push) 빼는(pop) 것

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

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

colors.pop() // 배열의 마지막 요소 ultraviolet을 제거
console.log(colors) // ultraviolet이 제거된 colors 출력
  • 배열의 반복문
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

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

// for문 형식
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

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

 

'Language > Javascript' 카테고리의 다른 글

동기(Sync) & 비동기(Async)  (0) 2022.12.12
JavaScript란?  (0) 2022.12.12
[혼공스] Ch.09 클래스  (0) 2022.11.04
[혼공스] Ch.08 예외 처리  (0) 2022.11.03
[혼공스] Ch.07 문서 객체 모델  (0) 2022.11.03

관련글

티스토리툴바