카테고리 없음

Til (2022.11.07)

2022. 11. 7. 20:45
목차
  1. javascript 정리

배운것

 

javascript 정리

 

//변수

 

let name = 'Shin’

console.log(name) //Shin

 

name = 'william'

console.log(name) //william

 

// let은 변수 다시 할당 가능

 

const name = 'Shin jung'

console.log(name) //Shin jung

 

name = 'william' (불가능)

 

// const는 변수 재할당 불가능

 

———————————————

 

데이터 타입

 

기본 또는 원시형데이터(primitive) = number, string, boolean, null, undefined

 

//숫자 (Number)

console.log(10) //10

 

let age = 37

console.log(age) //37

 

———————————————

 

//문자열 (String)

let name = ’Shin’

 

console.log(name) //Shin

// 작음따옴표나 큰따옴표로 묶어서 표현

 

———————————————

 

Boolean (참과 거짓을 나타내는 true,false를 나타내는 데이터)

 

let isMan = true

let isWoman = false

//불린데이터를 변수에 할당

 

console.log(isMan) //true

console.log(isWoman) //false

 

console.log(true) //true

console.log(false) //false

 

———————————————

 

null, undefined

 

null(비어있는 값)

undefined(변수를 선언만 하고 값이 할당되어 있지 않는 것)

 

let name = null

console.log(name) // null

 

let age

console.log(age) // undefined

 

———————————————

 

// 연산자

// +를 사용하면 여러 문자열을 이어붙여서 반환(return)

console.log('My' + 'car')  //Mycar

console.log('1' + 2) //12 (문자열과 숫자를 이어붙이면 뒤 숫자가 문자열로 인식됨)

console.log(1 + 2) //3

 

———————————————

 

//템플릿 리터럴 (Template literals)

// 백틱(` `)을 사용해서 간단하게 표현하는 것

 

const shoesPrice = 200000

console.log('이 신발의 가격은 ' + shoesPrice + '원입니다.') //문자열 이어붙이기

console.log(`이 신발의 가격은 ${shoesPrice}원입니다.`) //전체를 백틱으로 감싼후 변수는 ${변수명} 으로 표현

 

———————————————

 

//산술연산자 (Numeric operators)

// 사칙연산, 나머지연산, 거듭제곱 

 

console.log(2 + 1) //3

console.log(2 - 1) //1

console.log(2 * 1) //2

console.log(4 / 2) //2 

console.log(10 % 3) //1 (나머지 연산자, 나누고 나머지를 리턴)

console.log(10 ** 2) //100 (exponentiation, 10의 2승인 100을 출력)

 

———————————————

 

//증감연산자

//자기 자기자신의 값을 증가시키거나 감소시키는 연산자(증감연산자를 앞에 놓느냐 뒤에 놓느냐 차이있음)

 

let count = 1

const preCount  = ++count

//count앞에 놓게 되면 먼저 자기자신한테 1을더해 재할당 후 그것을 preCount에 할당

 

console.log(`count: ${count}, preCount: ${preCount}`) //count: 2, preCount: 2 

 

let count = 1

const postCount = count++

//count뒤에 놓게 되면 먼저 postCount에 자기자신을 할당 후 1을 더해 자기자신을 재할당.

 

console.log(`count: ${count}, postCount: ${postCount}`) //count: 2, postCount: 1

 

———————————————

 

//대입연산자 (Assignment operators)

//+=, -= 같은 것을 통해 연산과 대입을 한번에 가능

 

const shirtsPrice = 100000

const shoesPrice = 80000

let totalPrice = 0 

 

totalPrice += shirtsPrice //totalPrice에 totalPrice와 shirtsPrice를 더한 결과를 할당

console.log(totalPrice) //100000

 

totalPrice += shoesPrice //totalPrice와 shoesPrice를 더한 결과를 할당

console.log(totalPrice) //180000

 

totalPrice -= shirtsPrice //totalPrice에 shirtsPrice를 뺀 결과를 할당

console.log(totalPrice) //80000

 

———————————————

 

//비교연산자 (Comparison operators)

//숫자값을 비교하는 연산자. 이를 통해 얻는 값이 boolean(true, false)

 

console.log(1 < 2) //true (1이 2보다 작은지)

console.log(1 <= 2) //true (1이 2보다 작거나 같은지)

console.log(1 > 2) //false (1이 2보다 큰지)

console.log(1 >= 2) //false (1이 2보다 크거나 같은지)

 

———————————————

 

//논리연산자 (Logical operators)

// ||(or) 연산 대상중 하나만 true여도 true 리턴

// &&(and) 연산 대상이 모두 true 여야만 true 리턴

// !(not) true를 false로 false를 true로 바꿔서 리턴

 

let isOnSale = true

let isDiscountItem = true

 

console.log(isOnSale && isDiscountItem) //true

console.log(isOnSale || isDiscountItem) //true

 

isOnSale = false //다시 할당

console.log(isOnSale && isDiscountItem) //false

console.log(isOnSale || isDiscountItem) //true

 

isDiscountItem = false

console.log(isOnSale && isDiscountItem) //false

console.log(isOnSale || isDiscountItem) //false

 

console.log(!isDiscountItem) //true

 

———————————————

 

//일치연산자 (Equality operators)

//두 값이 일치하는지 비교

// ==은 두 데이터타입이 일치하지 않을때 데이터타입을 자동으로 변환해 리턴할 수 있으니 ===만 사용

 

console.log(1 === 1)  //true

console.log(1 === 2)  //false

console.log('Javascript' === 'Javascript')  //true (문자열 데이터도 가능)

console.log('Javascript' === 'javascript')  //false (대소문자, 띄어쓰기도 정확히 일치해야 true)

 

———————————————

 

//else, else if 조건문

//if 구문의 조건을 만족하지 않았을 때 해당 코드를 실행

 

const shoesPrice = 50000

if (shoesPrice < 40000) {

    console.log('이 신발을 사겠습니다') //shoesPrice가 40000 미만일시 리턴

} else {

    console.log('너무 비싸') //shoesPrice가 40000 이상일시 리턴

}

 

//else if 를 사용하면 else에서 조건 추가 가능

 

const shoesPrice = 50000

if (shoesPrice < 40000) {

    console.log('이 신발을 사겠습니다') //shoesPrice가 40000 미만일시 리턴

} else if (shoesPrice <= 50000) {

    console.log('고민해볼게요') //40000보다 크고 50000보다 작거나 같으면 리턴

} else {

    console.log('너무 비싸') //50000보다 크면 리턴

}

 

———————————————

 

//while 반복문

//while을 사용하면 조건을 설정해서 원하는 만큼 특정 코드를 반복해서 실행가능

//while (조건) {조건을 만족할 때 실행할 코드}

 

let temperature = 20

while (temperature < 25) {

    console.log(`${temperature}도 정도면 적당한 온도입니다.`)

    temperature++ //1씩 더해서 재할당

}

 

결과 //1씩 더해서 25미만일때 까지 반복해서 리턴

20도 정도면 적당한 온도입니다.

21도 정도면 적당한 온도입니다.

22도 정도면 적당한 온도입니다.

23도 정도면 적당한 온도입니다.

24도 정도면 적당한 온도입니다.

 

———————————————

 

//for 반복문

//while과 같은 반복문. 좀 더 명시적으로 조건 표현 가능

//for (begin: condition; step) {조건을 만족할 때 실행할 코드}

//begin : 변수 선언 후 해당 변수에 데이터 할당

//condition : 조건

//step : 앞의 변수에 증감연산자등을 활용해 값의 변화를 줌

 

for (let temperature = 20; temperature < 25; temperature++) {

    console.log(`${temperature}도 정도면 적당`)

}

 

결과 //1씩 더해서 25미만일때 까지 반복해서 리턴

20도 정도면 적당한 온도입니다.

21도 정도면 적당한 온도입니다.

22도 정도면 적당한 온도입니다.

23도 정도면 적당한 온도입니다.

24도 정도면 적당한 온도입니다.

 

———————————————

 

//함수

//특정 작업을 수행하는 코드의 집합 (함수를 선언하고 해당 함수가 실행할 코드를 만들어서 미리 저장해 놓는 것)

//  function 함수명 (매개변수들..) {

//        함수에서 실행할 코드

//        return반환값

//  }

 

function calculateAvg(price1, price2) {

    const sum = price1 + price2

    console.log(`두 상품의 가격 총합은 ${sum}입니다.`)

    const avg = sum / 2

    return avg

}

 

const priceA = 1000

const priceB = 2000

const avg1 = calculateAvg(priceA, priceB)

console.log(`두 상품의 평균은 ${avg1}입니다`)

 

const ABC = 2000

const DEF = 3000

const English = calculateAvg(ABC, DEF)

console.log(`두 상품의 평균은 ${English}입니다`)

 

/*

결과

두 상품의 가격 총합은 3000입니다.

두 상품의 평균은 1500입니다

두 상품의 가격 총합은 5000입니다.

두 상품의 평균은 2500입니다

*/

 

———————————————

 

//클래스와객체

//class는 클래스를 선언하는 문구 

//constructor (생성자) 객체가 생성될때 자바스크립트 내부에서 호출되는 함수

//this는 클래스를 사용해서 만들어질 객체 자기자신을 의미

 

class Notebook {

    constructor(name, price, company) {

        this.name = name

        this.price = price

        this.company = company

    }

}

 

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

const notebook2 = new Notebook('Galaxy', 3000000, 'Samsung')

 

console.log(notebook1)

console.log(notebook2)

 

결과

Notebook { name: 'Macbook', price: 2000000, company: 'Apple' }

Notebook { name: 'Galaxy', price: 3000000, company: 'Samsung' }

  1. javascript 정리
prdg
prdg
prdg
신정근 개발일지
prdg
전체
오늘
어제
  • 분류 전체보기 (89)
    • 프로젝트 (3)
    • 프로그래머스 (2)
    • 블록체인 (2)
    • 리액트 (0)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 구조분해할당
  • state
  • react
  • ReactQuery
  • Blockchain
  • TypeScript
  • TODOLIST
  • usemutation
  • 프로그래머스
  • ReactNative
  • 블록체인
  • Props
  • socket.io
  • node.js
  • Node
  • touchableopacity
  • SafeAreaView
  • JavaScript
  • 리액트
  • Recoil

최근 댓글

최근 글

hELLO · Designed By 정상우.
prdg
Til (2022.11.07)
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.