JavaScript

JavaScript 문법 총 정리

고로케 2021. 6. 1.

1. console.log( ) : 출력 구문

2. let 변수이름 = 값 : 변수 할당

const 변수이름 = 값 : 변수 고정, 재할당 불가

3. 데이터 타입

숫자(number) : 1234
문자열 (string) : 'ㅁㄴㅇ'
참거짓(Boolean) : true / false
null : 빈값
undefined : 변수 선언 후 할당안됨

4-1. 연산자(1)

문자열 붙이기 : console.log('My' + 'car') // My car 출력 됨

* '문자' + 숫자 : 숫자가 문자로 인식된다.

템플릿 리터럴(Template literals) : 백틱 ( `` ) 으로 변수를 문자열 사이에 사용 가능

     const Price = 20000
     console.log(`커피 한잔에 ${Price}원 입니다.`)

산술연산자 (numeric operators)

사칙연산(+,-,*,/)

나머지값 연산 ( % ) 예) 5%2 = 1

거듭제곱 ( ** ) 예) 2**3 = 8

증감연산자 (increment and decrement operators)

증(++), 감(--)

(1) 변수 앞에 증감연산자

변수 값이 먼저 증감하고 다른 변수에 할당된다.

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

//결과 count: 2, something : 2

(2) 변수 뒤에 증감연산자

다른 변수에 할당되고 변수 값이 증감한다.

let count = 1
const something = count++
// 증감연산자를 뒤에 놓게 되면 아래 주석으로 처리한 두 줄의 코드와 같은 내용입니다.
// something에 자기 자신의 값을 먼저 할당하고, 이후에 1을 더해서 재할당합니다. 
// const something = count
// count = count + 1
console.log(`count: ${count}, something: ${something}`) // count: 2, something: 1

대입연산자 (Assignment operators)

대입 : = , 더해서 대입 : += , 빼서 대입 : -=

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

4-2 연산자(2)

비교연산자 (Comparison operators)

대소 비교 : < , > , <= , >=

결과로 boolean 값인 true/ false 값을 얻게 된다.

논리연산자 (Logical operators)

|| (or) , && (and) , ! (not)

|| (or) : 둘 중 하나만 참이여도 참(true)

&& (and) : 둘 다 참일 때 참(true)

! (not) : true -> false , false -> true 로 바꿔서 리턴

일치연산자 (Equality operators)

== : 비교하는 두 값의 데이터타입이 일치하지 않을 때 해당 값의 데이터타입을 자동으로 변환해주는 자바스크립트만의 특성이 있다.

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

>> == 과 === 의 차이 확인해보기

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

5. 조건문 if 문

> if 문 : if (조건) { 조건의 true 일 때 실행할 코드 }

const Price = 30000
if (shoesPrice < 50000) { // 가격이 50000원보다 작으므로 해당 코드가 실행됨
	console.log('고로케를 사겠습니다.')
}

>else if (조건2), else : if 문 이후에 조건2를 만족하면 else if 문 실행, 조건 만족안하면 else 문 실행

const distance = 2
if (distance < 2) {
	console.log("걸어가자")
} else if (distance >= 2 && distance < 5) { // 논리연산자를 && 를 이렇게 활용할 수 있어요!
	console.log("택시를 타자")
} else {
	console.log("기차를 타자")
}

6. 반복문 while, for

(1) while (조건) { 코드 } : ctrl + c 무한 루프 종료

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

console.log(`마지막 온도 ${temperature}`)

> temperature 가 25가 되면 종료 됩니다.

(2) for ( 선언 ; 조건 ; 증감) { 코드 }

for (let i = 1; i <10 ; i++) { 코드 }

 for (let i = 5; i <10 ; i++) { 
 console.log(`온도는 ${i}도 입니다.`)
 }

7. 함수

(1) 함수의 선언

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

(2) 함수의 호출

예)

// 함수의 선언
function avg(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 = avg(priceA, priceB)
console.log(`두 평균은 ${avg1}입니다.`)

8. 클래스와 객체 (class / object)

(1) 클래스(class) 선언

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

-예시)

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

1. class 키워드와 클래스명
: class는 클래스를 선언하는 문구이고 그 뒤에 바로 클래스 명

2. 생성자 (constructor)
: 중괄호 안에는 생성자를 적는다. 객체가 '생성'이 될 때 자바스크립트 내부에서 호출이 되는 함수.

예시의 생성자는 name, price, company 3개의 매개변수를 정의했다.

3. this와 속성(property)
: 생성자의 바디의 this는 클래스를 사용해 만들어질 객체 자기 자신을 의미하고

this 뒤에 붙는 name, price, company는 객체의 속성입니다.
생성자의 바디에서는 함수 호출시 전달할 매개변수 name, price, compay를

객체의 속성 name, price, company에 각각 할당하고 있는 것입니다.

(2) 객체 만들기

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

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

(3) 객체 속성 불러오기

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

9. 클래스 메소드, 객체 리터럴(Method, Object Literal)

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

(2) 객체 리터럴(Object Literal)

객체 리터럴을 활용해서 바로 객체를 만들 수 있다.

객체 리터럴은 클래스와 같은 템플릿 없이 빠르게 객체를 만들 수 있는 방법이다.

2개 이상의 속성과 메소드가 있을 때는 쉼표로 구별해주고 가독성을 위해서 줄바꿈도 해주는 게 좋다.

const 변수명 = {
속성명: 데이터,
메소드명: function () { 메소드 호출시 실행할 코드들 }
}

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

computer.printInfo()

10. 배열 (Array)

(1) 배열의 선언

방법 -1 : JS 내부 array 클래스를 이용하는 방법 : const 변수이름 = new Array(1,2,3,4,5)

방법 -2 : 직접적으로 배열을 나열하여 저장. 보통 이 방법으로 만듦

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

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

(2) 배열의 요소, index

index는 배열의 요소(데이터)의 위치이다. 아래와 같이 사용함.

배열의 index는 맨왼쪽 0 부터 시작한다. 0,1,2,3,4....

const Colors = ['red', 'orange', 'yellow']

console.log(Colors[0]) // o번 인덱스 red
console.log(Colors[1]) // 1번 인덱스 orage
console.log(Colors[2]) // 2번 인덱스 yellow

(3) 배열의 길이, length

Colors.length = 요소의 갯수이다. => 3

마지막 index 값 = 2 (0,1,2)

const rainbowColors = ['red', 'orange', 'yellow']
console.log(Colors.length) // 3을 출력
console.log(Colors[Colors.length - 1]) // yellow 출력
//index -1 값은 마지막 요소이다.

(4) 배열의 요소 추가, 삭제(push, pop)

push : 추가, pop : 삭제

const Colors = ['red', 'orange', 'yellow']

Colors.push('ultraviolet') // 배열의 마지막에 ultarviolet 추가
console.log(Colors) // 결과 red orange yellow ultraviolet

Colors.pop() // 배열의 마지막 요소 ultraviolet을 제거
console.log(Colors) // 결과 red orange yellow

(5) 배열과 반복문

하나씩 출력하기 index 이용

const Colors = ['red', 'orange', 'yellow']

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

하나씩 출력하기 for(const 변수 i of 배열)

: 변수에 배열의 요소를 하나씩 뽑아서 변수 i 에 할당해준다.

const Colors = ['red', 'orange', 'yellow']

for (const i of Colors) {
  console.log(i)
}

하나씩 입력하기 for문 push 이용

const nums = []

for (let i= 2; i < 5; i++) {
   nums.push(i)
}
console.log(nums)  //결과 [2, 3, 4]

예제) 열 개의 상품 가격 데이터를 갖고 있는 배열을 만듭니다. 반복문을 활용해 상품들의 가격 합계와 평균을 구하라.

const priceList = [1000, 2000, 5000, 7000, 10000, 9000, 3000, 15000, 20000, 17000]
let sum = 0

for (const price of priceList) {
	sum += price
}

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