12.27.화(JS 문법)

1. 프로그램
입력 > 처리 > 출력

2. 프로그래밍 언어
-도구를 사용해서 정해진 문법으로 작성
-'{}' > body 형식

3. node.js
-JS 언어 문법에 맞게 코딩했을 때, 해석하는 일종의 컴퓨터 전용 번역기

---

4. 변수
1) var
: 동일한 이름으로 여러 번 중복해서 선언 가능
(1) 장점
-필요할 때마다 변수를 유연하게 사용 가능
(2) 단점
-기존에 선언해둔 변수의 존재를 잊고 값을 재할당하는 등의 실수 발생 가능
2) let
: 중복 선언 불가능, 재할당 가능
(1) 재할당 가능 명령어
name = 'vue' > name = 'popoo'
-변수 선언 및 초기화 이후 반복해서 다른 값 재할당
3) const
: 중복 선언 불가능, 재할당 불가능
*값을 바꿀 수는 없지만 배열과 오브젝트의 값을 변경하는 것은 가능

const list = ["A", "B", "C"];
const newList = [].concat(list, "D");  
// concat(list, 배열에 추가하고자 하는 데이터)
// concat(문자열 합치는 함수)

console.log(newList); // ["A", "B", "C", "D"];
console.log(list === newList); // false

---

5. 데이터 타입
-무수히 많은 데이터를 컴퓨터가 빠르고 효율적으로 처리하기 위해
1) number

const a = 10 
console.log(a) // 10 출력

2) string (문자열)
-문자열 데이터 : 이름, 브랜드명, 제품명 등

const a = 'popoo'
console.log(a) // popoo 출력

3) boolean
-참과 거짓을 나타내는 true/false를 표현하는 데이터
4) null
-텅텅 비어있는 값 의미
5) undefined
-변수를 선언만 하고 갑싱 할당되어 있지 않는 것

let name
cosole.log(name) // undefined 출력

---

6. 연산자(1)
1) 문자열 붙이기

• '+'를 사용하여 문자열 이어 붙이기
• template literals (템플릿 리터럴)

const Price = 20000
console.log(`이 신발의 가격은 ${Price}원입니다.`)
// 백틱(``)을 사용하여 문자안에 원하는 값 출력 가능 

2) Numeric operators (산술 연산자)
-숫자 데이터에 관련된 연산자
+추가 연산자 기술

17//3 > 5 '//' 나눗셈의 몫
2**3 > 8 '**' 거듭제곱

3) Increment and Decrement operators (증감연산자)
-자기 자신의 값을 증가, 감소시키는 연산자(++,--)
-변수를 기준으로 앞, 뒤에 연산자를 작성할 시, 출력 값이 달라짐

let count = 1
const ab = ++count
console.log(`count:${count}, ab:${ab}`) 
// 먼저 자기 자신에게 1을 더해서 재할당 한 후, 이를 ab에 할당
// 출력값 ) 2,2

const count = 1
const ab = count++
console.log(`count:${count}, ab:${ab}`)
// ab에 자기 자신의 값을 먼저 할당하고, 이후에 1을 더해서 재할당
// 출력값 ) 2,1

let을 사용한 이유 : count의 값을 계속 증가시키고 할당하기 때문에 const를 사용하면 에러 발생

4) Assignment operators (대입 연산자)

• =뿐만 아니라 +=,-= 같은 것들을 통해서 연산과 대입 해결 가능

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) 
// 출력값 ) 100000, 180000, 80000

7. 연산자(2)
1) Comparison operators (비교연산자)
2) Logical operators (논리연산자)
|| (or), && (and), ! (not) , 주로 조건문에서 활용
(1) || : 연산 대상 중 하나만 true 여도 true 리턴
(2) && : 연산 대상이 모두 true 여야만 true 리턴
(3) ! : true를 false로, flase를 true로 바꿔서 리턴

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

else if (distance >= 2 && distance < 5) {
console.log("택시를 타자") }

3) Equality operators (일치연산자)

---

8. 조건문
1) 기본 형식
if (조건) {조건을 만족할 때 실행할 코드}
2) else, else if
(1) 개념
*if 구문의 조건을 만족하지 않을 때
① else if 구문
-더 많은 조건을 실행하고 싶을 때 사용
② else 구문
-if문 마무리 짓을 때 사용하는 코드

---

9. 반복문
*반복문의 조건에 포함된 변수의 값을 계속 변화시켜줘서
언젠가는 반복문이 끝날 수 있도록 해야 함
1) while
(1) 형식
while (조건) {조건을 만족할 때 실행할 코드}

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

2) for
(1) 형식
for (begin; condition; step) {조건을 만족할 때 실행할 코드}
(2) 형식 추가 설명
① begin
-변수를 선언하고 해당 변수에 데이터를 할당하는 부분
② condition
-비교연산자를 활용해서 해당 조건이 만족되면 for문의 body 실행
③ step
-앞서 활용했던 코드의 증감연산자등을 활용해서 값 변화시키기
-언젠가는 조건문이 false가 되서 반복문이 끝날 수 있도록 하는 역할

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

---

10. 함수
1) 개념
-특정 작업을 수행하는 코드의 집합
-함수의 선언 > 호출
함수의 선언 : 변수를 선언하고 해당 변수에 값을 할당했던 것처럼,
선언 후 해당 함수가 실행할 코드의 집합을 만들어 저장

2) 함수 선언(형식)

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

2-1) 형식 추가 설명
(1) parameter (매개변수)
① 정의
-변수의 특별한 한 종류로서 함수 등에 input으로 제공되는 데이터
② 종류
1) Premitive parameters : passed by value
-하나의 값을 가짐
2) Object parameters : passed by reference
-배열을 갖고 있음
③ parameter 기본값 지정 (default parameters)
-비어있는 경우, 기본값을 지정하는 방법
-파라미터에 '='기본값'' 설정

function show(message, from='axce') {
	console.log(`${message} by ${from}`)}

④ REST parameters (added in ES6)
④-1) 정의

• ... > rest parameters로 불리는 배열 형태로 전달받음
  ④-2) 형식

function f(a, b, ...theArgs) {
  // …
}

④-3) 관련 코드

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, ["three", "four", "five", "six"]

④-4) 주의사항
-하나의 나머지 매개변수만 있을 수 있으며 나머지 매개변수는 함수 정의의 마지막에 서술되어야 함
-함수의 length 속성에 포함되지 않음
④-5) 참고사항
(나머지 parameter[매개변수]와 arguments[전달인자, 인자] 객체의 차이)
(①) arguments 객체는 실제 배열이 아니지만
나머지 매개변수는 Array instance이므로 sort(),map(),forEach(),pop() 등의 메서드를 직접 적용할 수 있음
(②) arguments 객체는 callee 속성과 같은 추가 기능 포함
(③) ...restParam은 후속 매개변수만 배열에 포함하므로
이전에 정의한 매개변수는 포함하지 않습니다.
하지만 arguments 객체는 ...restParam의 각 항목까지 더해 모든 매개변수를 포함
④-6) 참고 블로그
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters

3) 함수 호출

(1) 개념
-함수를 선언하고 끝내면 안 됨, 이 함수를 사용하기 위해 호출 진행
(2) 형식
const 변수명 = 선언한 함수명 (parameters...)

4) property(프로퍼티)
-객체 속성
-보통 key:value 값으로 이루어짐
-name, age 가 property

const obj = {
    name : 'you'
    age : 25 }

5) method(메소드)
-property 값이 함수일 경우

const obj = {
    num : 5,
    decrese : function() {
        this.num--
    }
}

property와 method
-property : 객체의 상태를 나타내는 값
-method : 프로퍼티를 참조하고 조작할 수 있는 동작

---

11. Class(클래스)와 Object(객체)
1) Object(객체) 타입
(1) 개념
-관련있는 데이터들을 묶어서 한번에 나타내는 데이터 타입
-0개 이상의 property로 구성된 집합

// 노트북1을 표현하기 위한 데이터들
// 변수명을 명시적으로 하는 것 외에 데이터들의 관계를 표현할 수 있는 방법 X
const notebook1Name = 'Macbook'
const notebook1Price = 2000000
const notebook1Company = 'Apple'

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

2) Class(클래스) 선언
(1) 개념
-객체를 만들 때, 마치 설계도처럼 사용하는 것

• 클래스 ) template[형식] , 객체 ) 이를 구체화한 것

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

(2) 코드분석
① class 키워드와 클래스명
-class ) 클래스를 선언하는 문구, 뒤에 클래스 명이 나옴
② 생성자 (constructor)
-중괄호 안에 생성자 작성
-나중에 객체가 생성 될 때까지 JS 내분에서 호출되는 함수
-해당 코드에서는 3개의 매개변수 정의
③ this 와 속성(property)
-생성자의 body를 보면 this 키워드 등장
-this 클래스를 사용해서 만들어질 객체 자기 자신을 의미,
this 뒤에 붙는 name, price, company 는 객체의 속성
-생성자의 바디에서는 함수 호출 시
전달받을 매개변수 name, price, company
객체의 속성 name, price, company에 각각 할당

3) Method (메소드)
(1) 개념
-클래스에는 데이터(값)을 나타내는 속성 뿐만 아니라
함수와 같은 특정 코드를 실행할 수 있도록 도와줌
(2) 코드

// 클래스 선언
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원

4) Object Literal (객체 리터럴)
(1) 개념
-바로 객체 작성 가능
,클래스와 같은 템플릿 없이 빠르게 객체를 만들 수 있음
-2개 이상의 속성과 메소드가 있을 경우, 쉼표로 구별
(2) 형식

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

(3) 코드

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

computer.printInfo()

---

12. Array (배열)
1) 개념
-같은 형식의 많은 데이터를 순서대로 저장하고자 할 때,
데이터의 수만큼 변수들을 선언할 수 밖에 없었는데
배열을 활용하면 해당 문제가 해결됨
-같은 타입의 데이터들을 하나의 변수에 할당하여 관리하기 위해 사용하는 데이터 타입
2) 배열의 선언
*숫자 1-5로 이루어진 배열 선언 방법
(1) const arr1 = new Array(1,2,3,4,5)
(2) const arr2 = [1,2,3,4,5]
3) 배열 안의 데이터
-element(요소) : 배열에 있는 데이터 각각
-index(인덱스) : 배열에서 객체의 속성명과 같은 역할

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

console.log(rainbowColors[0]) // o번 인덱스를 통해서 데이터에 접근. red
console.log(rainbowColors[1]) // 1번 인덱스를 통해서 데이터에 접근. orage
console.log(rainbowColors[2]) // 2번 인덱스를 통해서 데이터에 접근. yellow
console.log(rainbowColors[3]) // 3번 인덱스를 통해서 데이터에 접근. green
console.log(rainbowColors[4]) // 4번 인덱스를 통해서 데이터에 접근. blue
console.log(rainbowColors[5]) // 5번 인덱스를 통해서 데이터에 접근. indigo
console.log(rainbowColors[6]) // 6번 인덱스를 통해서 데이터에 접근. violet

4) 배열의 길이
-length 속성

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

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

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

5) 요소 추가와 삭제
(1) push method
-배열 추가
(2) pop method
-배열 제거

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

6) 배열과 반복문
*list 내용을 순차적으로 출력
const rainbow = ["red","orange","yellow","green","blue","indigo","violet"];
(1) 기본

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

(2) 배열을 활용할 경우

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

---

13. JS 문법에 익숙해지기 위해 연습한 코드
https://github.com/popoo9910/sparta_jsex