JavaScript 올인원

자바스크립트 기초 강의를 들었다. 한 주 강의로 이루어진 짧고 기초적인 강의였다.

Node.js를 처음으로 설치해봤다. git bash처럼 명령어를 입력할 수 있는 터미널이 바로 뜬다.

Visual Studio Code에서 터미널을 켜고 node 언급해주면 바로바로 콘솔창으로 결과를 확인할 수 있다는 이점이 있다.

이걸 알기 전에는 직접 크롬창에 끌어다가 개발자도구 > 콘솔창까지 켜서 실행 결과를 확인해야 했다.

이번 강의에서 배운 내용을 간단히 정리해보자.

 

1. 프로그래밍, Node.js, VS Code

프로그래밍은 데이터의 입력, 처리, 출력을 한다.

Node.js란 자바스크립트는 일종의 번역기이다. 무엇을 전용으로 하느냐?

자바스크립트의 문법에 맞게 코딩했을 때

컴퓨터가 이를 해석해서 처리할 수 있도록 해주는 전용으로 사용되는 번역기다.

그리고 이 강의에서 사용하는 VS Code는 코딩을 위한 전용 에디터 툴로 무척 가볍고 실행 속도가 빠르다는 특징이 있다.

 

2. 변수

변수 선언: let 변수이름 = 값

이를 자연어로 보면 변수를 변수이름으로 선언했고, 해당 변수에 값을 할당했다는 뜻이다.

const로 변수를 선언하면 변수 재할당이 불가능하다. 고정된 값으로만 쓴다.

 

3. 데이터 타입

숫자number, 문자열string, 불리안boolean,

null(텅텅 비어 있는 값), undefined(변수를 선언만 하고 값이 할당되지 않은 것)

그 밖에 객체형 타입도 있다.

 

4. 연산자

1) 문자열 붙이기

+를 이용해서 문자열이나 숫자를 이어붙일 수 있다. 이때 문자열과 연결된 숫자는 문자로 인식된다.

템플릿 리터럴 Template literals: 백틱(``)을 사용해서 문자열 데이터를 표현함. ${}를 쓸 때 같이 쓰는 경우 많음.

2) 산술연산자 Numberic Operators: + - * / % **

3) 증감연산자 Increment and Decrement operators

++ -- 등 자기 자신의 값을 증가/감소시키는 연산자. 변수를 let으로 둘 것

4) 대입연산자 Assignment operators: = += -= *= 등등 어떤 값을 어떤 변수에 할당하는 연산자

5) 비교연산자 Comparison operators: 숫자값을 비교하는 연산자. 비교연산자를 통해 boolean값을 얻게 된다.

6) 논리연산자 Logical operators: II && ! 조건문과 함께 쓰임

7) 일치연산자 Equality operators ===

 

5. 조건문

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

 else if () {}

 else {}

 

6. 반복문

while (조건) {조건을 만족할 때 실행할 코드} 변수의 값을 변화시켜줘서 언젠가는 끝나게 해줘야 함.

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

반복문과 조건문을 조합해서 코딩하는 것이 핵심이다.

 

7. 함수

함수란, 특정 작업을 수행하는 코드의 집합이다.

1) 함수의 선언

function 함수명 (매개변수) {

  함수에서 실행할 코드들

  return

}

2) 함수의 호출

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

 

8. 클래스와 객체

1) 객체 Object란 물리적으로 존재하거나 추상적으로 생각할 수 있는 것 중에서

자신의 속성을 가지고 있고 다른 것과 식별 가능한 것을 말한다.

 

2) 클래스 Class 란 객체를 만들 때 설계도처럼 사용하는 것이다.

클래스(템플릿) - 객체(이를 구체화한 것). 클래스를 선언한다고 한다.

//class 키워드와 클래스명
class Notebook {
	//생성자 constructor와 매개변수
	constructor(name, price, company) {
    	//this와 속성property
		this.name = name
		this.price = price
		this.company = company
	}
}

3) 생성자 constructor 란 객체가 생성될 때 자바스크립트 내부에서 호출되는 함수이다.

 

4) this는 클래스를 사용해 만들어질 객체 자기 자신을 의미한다.

this. ____ 빈칸에는 객체의 속성을 넣는다. 즉, 객체의 속성에 접근할 땐 꼭 this 키워드를 적어주어야 한다.

 

5) 객체 만들기: const 변수명 = new 클래스명(매개변수)

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

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

 

6) 메소드 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원

7) 객체 리터럴 Object Literal을 해줘도 되지만 클래스 정의하는 것이 재사용성이 높다.

 

9. 배열 Array

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

배열 선언 방법으로 가장 쉬운 것은 const arr2 = [1,2,3,4,5]처럼 대괄호 안에 넣어주기다.

요소 element는 배열 안의 데이터 각각을 말하며,

인덱스 index는 배열 안의 데이터들이 자리 잡은 순서로, 객체의 속성명과 같은 역할을 해준다.

배열의 길이는 .length로 구할 수 있다. .length-1로 배열의 마지막 요소를 구할 수 있다.

배열은 push("")로 요소를 추가할 수 있고 pop()으로 요소를 제거한다.

 

배열의 요소를 하나씩 꺼내서 확인/출력할 땐 반복문(while, for)을 활용한다.

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

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

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

 

혼공스에서 2,3,4강에서 배운 내용이 주된 것 같다.

어서어서 함수랑 객체지향을 끝내야 할텐데~~

일단 자바스크립트 끝냈고, 남은건 혼공스와 자료구조알고리즘이당!!