javascript 기초

오늘은 처음으로 javascript언어에 대해 배웠다.
벌써 한 주가 지나고 2주차 시작이다 😳 첫 주 보다는 신체리듬이 좀 맞춰진 것 같아서 다행이다 :)

구조, 디자인에 이어 이제 동작까지 배우면 앞으로의 과제물이 전보다 더 멋있는 완성품이 될 거같다 !

오늘 배운내용을 바탕으로 기억해두고 싶은 내용을 정리해두자

타입(type)

: 타입은 값의 종류로, 총 7가지가 존재한다.

• number
• string
• boolean
• undefined
• null
• object
• symbol

🌟 여기서 기억해둘 것

• NaN(Not a Number)의 데이터타입은 무엇일까?
  • console.log( typeof NaN ); // number
  • NaN: 숫자가 아닌 것에 숫자타입의 연산시도를 할 때
    ex> console.log(undefined + 1); // NaN

1. Number (숫자)

: javascript에서는 정수, 실수 소수, n진법 모두 type이 number!

• typeof 연산자로 값이 숫자인지 확인 가능

• 산술연산자를 사용해 간단한 사칙연산 가능

• Math 내장 객체
  :좀 더 복잡한 계산을 위해서는 Math 내장 객체를 사용

  • Math.floor ( ) : 내림연산

  • Math.ceil ( ) : 올림연산

  • Math.round ( ) : 반올림연산

  • Math.abs ( ) : 절대값

  • Math.sqrt( ) : 루트값

  • Math.pow (a,b) : a를 밑, b가 지수인 숫자를 반환

    • 오늘 진행한 연습문제 내용 중
      "자바스크립트에서 x의 제곱(x squared)을 구하는 방법은 3가지 입니다. 세 가지 방법을 모두 사용해야 합니다."
      ex> let num1 =3;

      • 1. Math.pow( num1 ) // 9
      • 2. num1 * * 2 // 9
      • 3. num1 * num1 // 9

2. string (문자열)

: 인간의 언어, 자연어를 JavaScript에서 표현하기 위한 데이터 타입으로, 따옴표(’), 쌍따옴표(”), 백틱(`)으로 감싸면 ok ( 템플릿 리터럴의 정의와 헷갈리지 않기 ! )

• 템플릿 리터럴(template literal)
  백틱을 사용하는 방법을 템플릿 리터럴이라고 합니다.
  템플릿 리터럴은 큰 따옴표,작은 따옴표를 사용한 표기 방법과는 다른 기능을 가지고 있습니다.
  -> 특히,문자열 내부에 변수 삽입할 수 있는 기능은 매우 유용하게 사용
  템플릿 리터럴 내부에 ${}를 사용하여 변수를 삽입할 수 있습니다.
  ( 이때, 문자열이 할당되지 않은 변수도 문자열로 취급됩니다. )
  ex >
  let course = 'SEB FE';
  let cohort = 99;
  let name = 'kimcoding';
  console.log(${course} ${cohort} ${name});

• toLowerCase() : 문자열을 소문자로 변경
• toUpperCase() : 문자열을 대문자로 변경
• concat() : 문자열 연결 연산자 + 처럼 문자열을 이어붙일 수 있다.
• slice(a,b) : 문자열의 일부를 자를 수 있다. ( ⭐️ [a]부터 [b-1]까지 )
• indexOf () : 문자열 내 특정 문자가 몇번째 위치하는지 확인 (결과값 : number)
  • 존재하지 않는 경우 : -1
• includes () : 문자열 내 특정 문자가 포함되어 있는지 확인 (결과값 : boolean )

Boolean (불린)

: 사실 관계를 구분하기 위한 타입 (true/false)

• falsy : 불리언 타입은 아니지만, 자바스크립트에서 false로 여겨지는 값들

  • false, 0, 0n, -0, ' ' , " ", , undefined, null, NaN ...

• truthy : 자바스크립트에서 true로 여겨지는 값들

  • truthy의 값이 많기 때문에 falsy 값을 암기하고 구분하기 !

• 비교연산자(comparison operator) : 불리언은 비교연산자로 두 값이 같은지 다른지를 확인할 때 유용

  • === ( 엄격한 동치연산자 ) : 값과 타입이 모두 동일해야 true( !== )
  • == ( 느슨한 동치연산자 ) : 값이 동일하다면 true (!=)
    • ✨일반적으로 엄격한 동치 연산자 사용을 권장

• 논리연산자(logical operator) : 두 값 간의 논리관계 확인

  • AND ( && ) : 두 값이 모두 true일 때 true
  • OR ( || ) : 두 값 중 하나라도 true일 때 true
  • NOT( ! ) : 부정 , 오른쪽 피연산자 와 반대의 사실 관계를 출력

  변수

• 아무것도 선언되지 않은 변수 --> "undefined" ( 초기화 )

  ex > let str ;
  console.log( str ) ; // undefined
  

• 값의 재할당
  : let 키워드로 선언한 변수에 새로운 값을 할당할 수 있음

  • 할당연산자(=)를 사용
  • 📌 const 키워드로 선언한 변수에는 새로운 값을 할당할 수 없음 !!

• 네이밍 컨벤션
  : 하나 이상의 영어단어 사용하여 식별자 생성 -- > 네이밍 컨벤션 (가독성 up)

  • javascript -> 🐫 camelCase 사용
  • 첫 단어의 첫 문자는 소문자, 이후에 연결되는 단어의 첫 문자는 대문자로 작성
  • 이 외의 네이밍 컨벤션 종류
    • 🐍스네이크 케이스(snake_case) : 단어와 단어 사이에 언더스코어( __ )를 사용
    • 📐파스칼 케이스(PascalCase) : 단어의 시작을 대문자로 작성

• 템플릿 리터럴(template literal)

  • 백틱을 사용하는 방법을 템플릿 리터럴
    • 템플릿 리터럴은 큰 따옴표, 작은 따옴표를 사용한 표기 방법과는 다른 기능을 가지고 있다. 특히, 문자열 내부에 변수 삽입할 수 있는 기능은 매우 유용하게 사용.

템플릿 리터럴 내부에 ${}를 사용하여 변수를 삽입
이때, 문자열이 할당되지 않은 변수도 문자열로 취급

let course = 'SEB FE';
let cohort = 99;
let name = 'kimcoding';
console.log(`${course} ${cohort} ${name}`); // 'SEB FE 99 kimcoding'

✨ 단어와 단어 사이에 공백을 삽입하기 위해 ‘ ‘를 사용하는 것보다 템플릿 리터럴을 사용하는 것이 가독성 측면에서 훨씬 우수

• ex> 플러스 연산자(+) 사용은 금지됩니다. ('현재 시각은 ' + hour + '시 ' + min + '분 ' + sec + '초 입니다.')

  function showTime(hour, min, sec) {
  return `현재 시각은 ${hour}시 ${min}분 ${sec}초 입니다.`
  }