TIL: Javascript

Javascript 변수

변수 할당 방법

1 ) let : 변수를 재할당 할 수 있다.

let name = 'hihee Cho' //name에 'hihee cho'를 할당함
console.log(name) // => hihee cho
name = 'hyoni' // name에 'hyoni'라는 문자를 재할당
console.log(name) // = > hyoni

2 ) const : 변수를 재할당 할 수 없다.

const name = 'hihee Cho'
console.log(name) // => hihee cho

데이터 타입

1 ) num : 숫자데이터

console.log(10) // => 10

let age = 27
console.log(age) // => 27

2 ) string : 문자열

let name = 'apple'
console.log(name) // => apple

3 ) boolean ( True / False )

let isMan = false
let isWoman = true
console.log(isMan) // => False
console.log(isWoman) // => True

console.log(false) // => False
console.log(true) // => True

4 ) null / undefined

let melon = null // 비어있는 값
console.log(melon) // => null

let banana //선언만 하고 할당되어 있지 않은 값
console.log(banana) // undefined

Javascript 연산자

0 ) 문자열 붙이기

• +를 사용해서 붙이기

console.log('my' + 'car') // => my car
console.log('1' + 2) // => 12(문자열 + 숫자 => 숫자를 문자열로 인식)
console.log(1+2) // => 3

• 템플릿 리터럴 (Template literals)
  : 백틱(``)을 사용해서 문자열 데이터 표현. 보다 간결하게 문자열 붙이기가 가능하며 ${변수명}을 사용해서 변수에 할당된 값을 표현할 수 있다.

const coffePrice = 4500
console.log('톨사이즈 커피는 ' + coffePrice + '원 입니다.')// => 톨사이즈 커피는 4500원 입니다.
console.log(`톨사이즈 커피는 ${coffePrice}원 입니다.`)
// => 톨사이즈 커피는 4500원 입니다.

//같은 내용을 보다 간결하게 출력할 수 있다. 

1 ) 산술연산자

console.log(2+1) //더하기 => 3
console.log(2-1) //빼기 => 1
console.log(2*3) //곱하기 => 6
console.log(4/2) //나누기 => 2
console.log(10%3) //10을 3으로 나눈 나머지 값 => 1
console.log(10**2) //10의 2승 => 100

2 ) 증감연산자
: 자기자신의 값을 증가시키거나 감소시키는 연산자

• 증감연산자를 앞에 놓은 경우

let count = 1 //count에 1을 할당
const preIncrement = ++count //결과값을 preIncrement에 할당
// '++count' 증감연산자는 아래의 내용을 의미함.
//count = count + 1 //count에 '자기 자신에 1을 더한 값'을 다시 할당 => 2
//const preIncrement = count //count를 preIncrement라는 변수에 할당함 => 2
console.log(`count: ${count}, preIncrement:${preIncrement}`) 
// => count: 2, preIncrement: 2

• 증감연산자를 뒤에 놓은 경우

let count = 1 //count에 1을 할당
const postIncrement = count++ //결과값을 postIncrement에 할당
// 'count++' 증감연산자는 아래의 내용을 의미함.
//const postIncrement = count //postIncrement에 자기 자신의 값(1)을 할당 => 1
//count = count + 1 //count에 '자기자신에 1을 더한 값'을 다시 할당 => 2
console.log(`count: ${count}, postIncrement:${postIncrement}`) 
// => count: 2, preIncrement: 1

• 증감연산자를 활용할 때 count의 값을 계속 증가시키고, count에 다시 할당하고 있기 때문에( 값을 계속 재할당해야하기 때문에 ) const로 선언하면 안됨.( => 에러발생 )

3 ) 대입연산자
: 대입연산자 : =, +=, -+ 를 이용해 연산과 대입을 한번에 할 수 있다.

const shirtPrice = 15000
const shoesPrice = 80000
let totalPrice = 0 //값이 변할때마다 재할당 해야하기 때문에 const가 아닌 let사용

totalPrice += shirtPrice //totalPrice에 shirtPrice를 더해서 대입해라*
console.log(totalPrice) // => 0 + shirtprice = 15000

totalPrice += shoesPrice //totalPrice에 shoePrice를 더해서 대입해라*
console.log(totalPrice) // => 100000 + shoePrice = 95000

totalPrice -= shirtPrice//totalPrice에 shirtPrice를 빼서 대입해라*
console.log(totalPrice) // => 95000 - shirtPrice = 80000

4 ) 비교연산자
: 비교연산자를 통해서 얻는 값이 바로 boolean 데이터!

console.log(1 < 2) // => T
console.log(1 <= 2) // => T
console.log(1>2) // => F
console.log(1>=2) // => F

5 ) 논리연산자
: ||(or), &&(and), !(not)

let isStudent = true
let isAdult = true

console.log(isStudent && isAdult)// => True
console.log(isStudent || isAdult)// => True

isStudent = false // isStudent를 false로 재할당

console.log(isStudent && isAdult)// => False
console.log(isStudent || isAdult)// => True

isisAdult = false // isAdult를 false로 재할당

console.log(isStudent && isAdult)// => False
console.log(isStudent || isAdult)// => False

console.log(!isAdult)// => not False니까 True

6 ) 일치연산자
: ===(엄밀한 일치연산자) / ==(일반적인 일치연산자)

console.log(1===1) // => True
console.log(3===1) // => False
console.log('Javascript'==='Javascript')// => True
console.log('Javascript'==='javascript')// => False
//=== vs ==
console.log(1 === "1") // => False(형식이 같지 않음)
console.log(1 == "1") // => True

Javascript 조건문

: boolean 데이터

문법 : if (조건){조건을 만족할 때 실행할 코드}
1 ) if 문 ( T / F )

const shirtPrice = 30000
if(shirtPrice < 40000){
    console.log('살래요!') 
} else{
	console.log('너무 비싸요!')
} // => 살래요!

1 ) else if 문 ( T / F( T / F ) )

const bottomPrice = 40000
if (bottomPrice<40000){
    console.log('살게요!')
}else if(bottomPrice <= 50000){
    console.log('고민해볼게요...')
}else{
	console.log('안살래요ㅠㅠ')
} // => 고민해볼게요...

Javascript 반복문

1 ) while
문법 : while( 조건 ) { 실행할 코드 }

let temperature = 20 //temperature 20으로 선언
while (temperature < 25){
    console.log(`${temperature}도는 적당한 온도입니다.`) 
    temperature++
} //temperature가 25보다 작을 때까지 템플릿리터럴을 출력하고, temperature에 1을 더한다. 

=>  20도는 적당한 온도입니다.
    21도는 적당한 온도입니다.
    22도는 적당한 온도입니다.
    23도는 적당한 온도입니다.
    24도는 적당한 온도입니다.

2 ) for
문법 : for( 초기변수값; 반복조건; 반복실행조건; ) { 실행할 코드 }

let temperature = 20
for(let temperature = 20; temperature < 25; temperature++){
    console.log(`${temperature}도는 적당한 온도입니다.`)
} //temperature가 25보다 작을 때까지 템플릿리터럴을 출력하고, temperature에 1을 더한다. 

 => 20도는 적당한 온도입니다.
    21도는 적당한 온도입니다.
    22도는 적당한 온도입니다.
    23도는 적당한 온도입니다.
    24도는 적당한 온도입니다.

3 ) 반복조건문

for(let num = 1; num<=10; num++){
    if(num % 3 === 0 ){
        console.log(`${num}은 3으로 나눠서 떨어지는 숫자입니다.`)
    }
} // num이 10보다 작거나 같을때, num이 3으로 나눈 나머지가 0이면, 위와 같이 출력하고, num을 1씩 증가시킨다.

=>  3은 3으로 나눠서 떨어지는 숫자입니다.
    6은 3으로 나눠서 떨어지는 숫자입니다.
    9은 3으로 나눠서 떨어지는 숫자입니다.

Javascript 함수

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

function calculateAvg(price1,price2){
    const sum = price1 + price2
    console.log(`두 상품의 가격 총합은 ${sum}입니다.`)
    const avg = sum / 2
    return avg
} //정의만 하고 호출은 아직 안한 상태

const priceA = 1000
const priceB = 3000 //변수를 선언해 각각 데이터를 할당하고 있음
const avg1 = calculateAvg(priceA,priceB) //함수를 호출해 매개변수로 priceA와 B를 전달 (price1과 2에 A,B를 다시 할당)
console.log(`A와 B의 평균은 ${avg1}입니다.`)

Javascript 클래스와 객체

2 ) class선언
문법 :

 class 클래스명 { 
	constructor(매개변수정의){
    this.객체의속성 = 매개변수 
   }
}

객체만들기 :

const 변수명 = new 클래스명(매개변수들)

example
⬇︎ ⬇︎ ⬇︎ ⬇︎

class Notebook {
  constructor(name,price,company){
    this.name = name
    this.price = price
    this.company = company
  }  
} //Notebook이라는 클래스를 만들어 coustructor(생성자)로 매개변수 name,price,company를 정의함. 
//매개변수를 각각 'this(객체 자기자신을 의미).객체의속성' 에 할당하고 있다.
const firstNotebook = new Notebook('Macbook',1800000,'apple')
//firstNotebook이라는 변수를 선언하여 new라는 키워드 뒤에 클래스명을 함수처럼 호출하면서 매개변수값을 전달하면 된다.
console.log(firstNotebook)
// => Notebook { name: 'Macbook', price: 1800000, company: 'apple' }
console.log(firstNotebook.name)
// => Macbook

2 ) method

• 객체 리터럴(object literal)
  문법 :

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

  example
  ⬇︎ ⬇︎ ⬇︎ ⬇︎

  const computer = {
      name : 'gram',
      price : 2000000,
      printInfo : function(){
          console.log(`name : ${this.name}, price: ${this.price}`)
      }
  }
  computer.printInfo() 
  //computer라는 변수에 printInfo라는 메소드를 실행시킴
  // => name : gram, price: 2000000

• class method
  example
  ⬇︎ ⬇︎ ⬇︎ ⬇︎

  //클래스 선언
  class Product {
    constructor(name,price){
        this.name = name
        this.price = price
    }
    printInfo(){
        console.log(`name : ${this.name}, price : ${this.price}`)
    }
  }
  //객체생성
  const notebook = new Product('gram',2000000)
  //객체의 method 호출
  notebook.printInfo();
  // => name : gram, price: 2000000

Javascript 배열

1 ) 배열문
: array라는 클래스를 활용해서 객체를 만들었다고 이해하면 쉬움!

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])

⬇︎ ⬇︎ ( 실행 ) ⬇︎ ⬇︎

red
orange
yellow
green
blue
indigo
violet

console.log(rainbowColors.length)//배열의 개수를 출력
console.log(rainbowColors[rainbowColors.length -1])//배열의 마지막 요소를 출력 (0부터 시작이니까 -1!!!)

rainbowColors.push('ultraviolet') //배열의 마지막에 추가
console.log(rainbowColors)

rainbowColors.pop('ultraviolet') //배열에서 삭제
console.log(rainbowColors)

⬇︎ ⬇︎ ( 실행 ) ⬇︎ ⬇︎

7 //배열의 개수
violet //배열의 마지막요소 출력
[
  'red',
  'orange',
  'yellow',
  'green',
  'blue',
  'indigo',
  'violet',
  'ultraviolet'
] //배열에 'ultraviolet'추가
[
  'red',    'orange',
  'yellow', 'green',
  'blue',   'indigo',
  'violet'
] //배열에서 'ultraviolet'제거

2 ) 배열에서 반복문 실행하기
: 배열의 모든 요소를 출력하는 방법 = 반복문

const rainbowColors = ['red', 'orange' , 'yellow', 'green', 'blue', 'indigo', 'violet']
//0부터 시작해서 rainbowColors의 길이가 작을때까지 for문의 body가 실행 
for(let i =0; i < rainbowColors.length; i++){
    console.log(rainbowColors[i])//접근은 인덱스[]로접근
}
//배열에서 요소들을 차례대로 하나씩 찾아 color라는 변수에 할당. 자동으로 배열끝까지 반복문 실행됨.
for(const color of rainbowColors){
    console.log(color)
}

⬇︎ ⬇︎ ( 실행 ) ⬇︎ ⬇︎

red
orange
yellow
green
blue
indigo
violet

example )
나이의 배열을 만들어 반복문을 활용해 나이의 평균구하기

const ageList = [ 19, 23,55,61, 43, 73, 83, 22, 25, 29] //배열
let totalAge = 0 //합계를 먼저 0으로 할당**(틀린부분)
for (const age of ageList) {
  totalAge += age //for문안에서 합계를 누적
}
let avg = totalAge / ageList.length
console.log(`나이 평균 : ${avg}세`)
// => 나이 평균 : 43.3세