[javascript] 자바스크립트 기본 문법 정리 (java와 비교하며 작성)

- 자바스크립트를 사용하기앞서, Visual Studio Code 와 Node.js 를 설치해준다!

-  Node.js 란 ? "Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser" Node.js를 정의하는 문장.

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

 

- 자바스크립트에서는 java와 달리 system.out.println();으로 출력하지 않고, 터미널에 파일명을 입력하여 출력을 받는다!

- VSCode 상단에 위치한 메뉴바에서 Terminal - New Terminal을 클릭 -> 아래쪽 화면에 커서를 위치하고 "node hello.js"(node 파일명.js) 라고 타이핑한 후 엔터를 누르면 "Hello World" 출력 완료!   우리가 터미널에서 node hello.js 라고 명령함으로서 컴퓨터는 Node.js를 활용해 hello.js 파일을 해석하고 그 결과물을 우리에게 출력해준 것!!

 

- 자바스크립트에서 변수를 선언할 때는 let , 고정된값(상수)을 선언할때는 const라는 키워드를 사용한다. 

 

- 자바스크립트에서는 '템플릿 리터럴(Template literals)'이란게 있다.

- 백틱(``) 을 사용하여 문자열 데이터를 표현할 수 있다. 이중 따옴표나 작은 따옴표로, 더하기 연산자(+) 로 문자열을 표현할 때보다 간결하게 문자열 붙이기가 가능. 

- 백틱 안에 ${변수명} 이라고 써주면 된다!

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

- 증감연산자 (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

 

- 자바스크립트에서는 함수의 선언을 다음과 같이 한다. (function ~~~)

function 함수명(매개변수들...) {        //java와 달리 반환타입을 써주지 않는듯 하다..

이 함수에서 실행할 코드들

return 반환값

}

// 함수의 선언
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}입니다.`)

- 자바스크립트에서의 클래스(Class) 선언

- java와달리 생성자이름을 클래스명과 동일하게 하지않고 그냥 constructor라고 쓰는듯하다.

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

- 자바스크립트에서의 객체만들기 (const 변수명 = new 클래스명(생성자에서 정의한 매개변수들...))

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

console.log(notebook) // Notebook { name: 'Macbook', price: 2000000, company: 'Apple' } 
//JS에서는 객체를 바로 호출하면 이렇게 map형식으로 나온다...

console.log(notebook.name) // MacBook
consoel.log(notebook.price) // 2000000
console.log(notebokk.company) // Apple

 

- 객체 리터럴(Object Literal)  : JS에서는 1회용객체(?)를 만들수가 있다..

- 자바스크립트에서는 객체 리터럴을 활용해서 바로 객체를 만들 수도 있다. 객체 리터럴은 클래스와 같은 템플릿 없이 빠르게 객체를 만들 수 있는 방법이다.  2개 이상의 속성과 메소드가 있을 때는 쉼표로 구별해주고 가독성을 위해서 줄바꿈도 해주자!

const 변수명 = {

     속성명: 데이터,

     메소드명: function () { 메소드 호출시 실행할 코드들 }

}

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

computer.printInfo()

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

해당 객체의 printInfo 메소드를 바로 호출까지 해보았다.

결과적으로는 클래스를 활용해 객체를 만든 것과 동일하다. 그렇다면 왜 굳이 복잡하게 클래스를 정의하는 걸까? 바로 재사용성 때문이다. 한번 클래스를 만들어두면 같은 속성과 메소드를 갖고 있는 객체를 new를 사용하여 훨씬 더 간결한 코드로 만들 수 있다.

 

 

- 배열(Array)의 선언

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

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

 

- 배열의 요소 추가와 삭제 (push 와 pop메소드 사용)

- java에서는 배열의 크기를 변경할수 없다. 대신 ArrayList를 사용하거나 새 요소를 수용하기 위해 더 큰 새 배열을 만들어야 한다.

- java와는 달리 JS에서는 push, pop을 사용해 추가가 가능하다.

  (java에서 push/ pop은 STACK구조의 저장과 추출시에 사용하였다.)

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

 

 

[출처] 스파르타코딩클럽 자바스크립트 문법 뽀개기