Java Script 기본 문법

1. Hellow 월드

hello.js파일생성-> Terminal메뉴바 -> new Terminal -> Terminal영역에 node hello.js 입력 -> hello.js에 입력하였던 값이 나타남

2. 변수

let 변수이름 = 값
const는 한번 값을 선언하면 다시 할당 할 수 없음
var는 예전에 많이 사용하던 변수로 지금은 사용하지않음

3. 데이터타입

기본타입(primitive) : number, string, boolean, null, undefiend

• 숫자 (number) : 1,2,3,4
• 문자열(string) : 'ㄱㄷㄴㅇ'
• 참거짓(boolean) : true / false
  let isMan = true;
  let isWomee = false;
• null :변수가 비어있다는 뜻
  let name = null;
• undefined : 변수만 선언되고 값이 없다는 뜻
  let age;
  

4-1 연산자(1)

문자열 붙이기 : console.log('My' + 'car') => My car 출력
'문자'+ 숫자 : console.log('1' + 2) =>12 문자로 출력

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

const price = 30000;
console.log(`이 물건의 가격은 ${price}원입니다.`)

• 산술 연산자(Numeric operators)
  사칙연산(+,-,*,/)
  나머지값 연산(%) 3%2 = 1
  거듭제곱 [**] 3**2 = 9
  
  
• 증감 연산자(increment and decrement operators)
  (1) 변수 앞에 증감연산자
  변수 값이 먼저 증감하고 다른 변수에 할당된다.

let count = 1
const preCount = ++count
console.log(`count : ${count}, preCount: ${preCount}`)
결과 conut : 2, preCount : 2

(2) 변수 뒤에 증감 연산자
다른 변수에 할당되고 변수 값이 증감한다.

let count = 1
const postcount = count++
console.log(`count : ${count}, postcount: ${postcount}`)
결과 count : 2, postcount : 1

• 대입연산자(Assignmentoperators)
  대입 =, 더하고 대입 +=, 뺴고 대입-=

4-2 연산자(2)

• 비교 연산자(Comparison operators)

console.log(1 < 2)
console.log(1 <= 2)
console.log(1 > 2)
console.log(1 >= 2)

• 논리 연산자(Logical operators)
  ||(or) : 둘 중 하나만 참이어도 참(true)
  &&(and) : 둘 다 참일 때 참(true)
  !(not) : true -> false, false -> true로 바꿔서 리턴

let isOnsale = true
let isDiscountItem = true
<br>
console.log(isOnsale && isDiscountItem) // true
console.log(isOnsale || isDiscountItem) // ture
<br>
isOnsale = false
<br>
console.log(isOnsale && isDiscountItem)  // false
console.log(isOnsale || isDiscountItem)  // true
<br>
isDiscountItem = false
<br>
console.log(isOnsale && isDiscountItem) // false
console.log(isOnsale || isDiscountItem) // false
<br>
console.log(!isDiscountItem) // true

• 일치 연산자(Equality operators)
  == : 비교하는 두 값의 데이터 타입이 일치하지 않을 때 해당 값의 데이터타입을 자동으로 변환해주는 자바스크립트만의 특성이 있다. (실무에서 잘 안쓰임)
  === : 엄밀한(strict) 일치연산자여서 비교하는 두 값의 데이터타입과 값 자체가 정확히 일치해야만 true를 리턴

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

5. 조건문 if문

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

const shoesPrice = 40000
if (shoesPrice < 50000) {
    console.log('이 신발을 사겠습니다.')
}
const capPrice = 50000
<br>
if (capPrice < 50000) {
    console.log('이 모자를 사겠습니다.')
}

else if((조건2), else : if문 이후 조건2를 만족하면 else if문 실행,
조건이 만족하는 것이 없다면 else문 실행

const length = 6
if (length < 2) {
    console.log('걸어가자')
} else if (length >= 2 && length < 5) {
    console.log('택시 타자')
} else {
    console.log('기차를 타자')
}

6. 반복문 while, for

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

let temperature = 20
while (temperature < 25) {
    console.log(`${temperature}도 정도면 적당한 온도입니다.`)
    temperature++
}

(2)for(선언; 조건; 증감){코드}
for(let i =1; i<10; i++){코드}

for (let temperature = 20; temperature < 25; temperature++) {
    console.log(`${temperature}도 정도면 적당한 온도입니다.`)
}

7. 함수

(1) 함수의 선언

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

(2) 함수의 호출
예)

function calculateAvg(price1, price2) {
    const sum = price1 + price2
    console.log(`두 상품의 가격의 총합은 ${sum}입니다.`)
    const avg = sum / 2
    return avg
}
const priceA = 1000;
const priceB = 2000;
<br>
const avg1 = calculateAvg(priceA, priceB)
console.log(`A와 B의 평균은 ${avg1}입니다.`)
<br>
const priceC = 2000
const priceD = 3000
<br>
const avg2 = calculateAvg(priceC, priceD)
console.log(`C와 D의 평균은 ${avg2}입니다.`)

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)
   생성자는 말 그대로 나중에 객체가 '생성'이 될 때 자바스크립트 내부에서 호출이 되는 함수
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(notebook1)  // Notebook { name: 'Macbook', 
price: 200000, company: 'apple' }
console.log(notebook1.name) // Macbook
console.log(notebook1.price) // 2000000
console.log(notebook1.company) // apple

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

(1)메소드(method)
클래스에는 데이터(값)를 나타내는 속성 뿐만 아니라 함수와 같이 특정 코드를 실행할 수 있는 메소드도 정의할 수 있다. 객체를 생성한 후, 만들어진 객체의 메소드를 호출하면 된다.

class Cloth {
    constructor(color, size, price) {
        this.color = color
        this.size = size
        this.price = price
    }
    printInfo() {
        console.log(`상품색:${this.color},사이즈:${this.size},
        가격:${this.price}`)
    }
}

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

const Musinsa = {
    name: 'T-shirt',
    size: 'M',
    price: 200000,
    printInfo: function () {
        console.log(`상품명:${this.name}, 사이즈:${this.size}, 
        가격:${this.price}`)
    }
}
Musinsa.printInfo()

10.배열(Array)

(1) 배열의 선언
방법 -1 : const arr1 = new Array(1, 2, 3, 4);
방법 -2 : const arr = [1, 2, 3, 4, 5];
(2) 배열의 요소 (index)
index는 배열의 요소(데이터)의 위치이다. 아래와 같이 사용한다.

const rainbowColors = ['red', 'orange', 'yellow', 'green', 
'blue', 'indigo', 'violet']
console.log(rainbowColors[0])
console.log(rainbowColors[1])
console.log(rainbowColors[2])
console.log(rainbowColors[3])
console.log(rainbowColors[4])
console.log(rainbowColors[5])
console.log(rainbowColors[6])

(3) 배열의 길이(length)
rainbowColors.length = 요소의 갯수 => 7이다.

console.log(rainbowColors.length) // 7
console.log(rainbowColors[rainbowColors.length - 1]) 
// index -1 값은 마지막 요소이다.

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

rainbowColors.push('ultravilot') // 맨마지막에 추가
<br>
rainbowColors.pop() // 맨 마지막값 제거

(5) 배열과 반복문
1번 : 하나씩 index 이용

const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo']
for (let i = 0; i < rainbowColors.length; i++) {
    console.log(rainbowColors[i]); 
}

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

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