타입과 변수

시작하며

코드스테이츠 부트캠프 이틀 차.
공유받은 캘린더와 커리큘럼 순서가 맞지 않아 아침부터 우왕좌왕 했다.
알고보니 캘린더가 잘못 된..(ㅜㅜ)
커리큘럼대로 수정 후 공부 시작!
아직 초반이라 그런지 진도가 여유로운 편인데, 나중에는 얼마나 빡세질지(?) 기대된다.

cp2. 타입

학습 목표

• ✅ 데이터 타입이 무엇인지 이해한다.
• ✅ JavaScript의 데이터 타입 중 Number, String, Boolean이 있다는 것을 기억한다.
• ✅ Number 타입에 사용가능한 연산자를 사용하여 간단한 연산을 console에 출력할 수 있다.
• ✅ Math 내장 매서드 중 Math.floor(), Math.sqrt() 등에 대해 설명할 수 있다.
  • Math.floor(): 인수에 들어온 숫자를 내림하여 리턴
  • Math.sqrt(): 인수에 들어온 숫자의 루트값을 리턴
• ✅ + 연산자로 문자열과 문자열을 합칠 수 있다.
  • 'Hello' + name
• ✅ 문자열의 길이를 조회할 수 있다.
  • 문자열에 .length 속성을 사용
• ✅ Boolean타입의 두 가지 값인 true와 false를 이해한다.
• ✅ 비교연산자(===)와 논리연산자(!, &&, ||)를 이해한다.

---

타입에는 Number(숫자형), String(문자형), Boolean(불린타입) 등이 있다.

typeof 연산자로 어떤 타입인지 확인할 수 있다.

1. Number: 자바스크립트에서 숫자를 표현하기 위한 데이터 타입. 정수와 실수 모두 표현 가능.
   • 산술 연산자: 수학 기호 (+ - * /)를 사용해 간단한 사칙연산 가능
   • 좀 더 복잡한 계산을 위해서는 Math 내장 객체를 사용
     • Math.floor(): 괄호 안의 숫자를 내림하여 반환합니다.
     • Math.ceil(): 괄호 안의 숫자를 올림하여 반환합니다.
     • Math.round(): 괄호 안의 숫자를 반올림하여 반환합니다.
     • Math.abs(): 괄호 안의 숫자의 절대값을 반환합니다.
     • Math.sqrt(): 괄호 안의 숫자의 루트값(제곱근)을 반환합니다.
     • Math.pow() : 괄호 안의 첫 번째 숫자를 밑, 두 번째 숫자를 지수인 숫자를 반환합니다.(거듭제곱)
     • 더 많은 Number 내장 객체 메소드

2. String: 자연어(인간의 언어)를 표현하기 위한 데이터 타입. 따옴표(’), 쌍따옴표(”), 백틱(`)으로 감싸 입력
   • .length: 문자열의 길이를 확인할 수 있는 속성
   • 인덱스: 각 문자가 몇 번째에 위치하는지 인덱스(Index)로 확인할 수 있음. 0부터 세는 Zero-based numbering
   • 문자열 주요 메서드
     • toLowerCase() : 문자열을 소문자로 변경합니다.
     • toUpperCase() : 문자열을 대문자로 변경하니다.
     • concat() : 문자열 연결 연산자 + 처럼 문자열을 이어붙일 수 있습니다.
     • slice() : 문자열의 일부를 자를 수 있습니다.
     • indexOf() : 문자열 내에 특정 문자나 문자가 몇 번째 위치하는지 확인합니다.
       • 만약 찾는 문자가 2개 이상일 경우, 가장 앞에 있는 문자의 인덱스를 조회합니다.
       • 포함되어 있지 않으면 -1 을 반환합니다.
     • includes() : 문자열 내에 특정 문자나 문자가 포함되어 있는지 확인합니다.

3. Boolean: Boolean(불리언)은 사실 관계를 구분하기 위한 데이터 타입. 불리언 타입의 값은 true 혹은 false 둘 중 하나.
   • falsy: 불리언 타입은 아니지만, 자바스크립트에서 false로 “여겨지는” 값으로, 대표적인 falsy 값은 아래와 같음
     • false
     • 0
     • -0
     • 0n
     • “”, ‘’, `` (빈 문자열)
     • null
     • undefined
     • NaN (Not a Number)
   • 비교 연산자: 두 값이 같은지 다른지를 확인
     • === , !== (엄격한 동치 연산자): 두 피연산자의 값과 타입이 같으면 true, 다르면 false 를 반환합니다. 엄격한 동치 연산자는 보이는 값이 같아도, 두 값의 타입이 다르면 false 가 됩니다.
     • ==, != (느슨한 동치 연산자): 느슨한 동치 연산자는 “대체로” 타입이 달라도 값이 같으면 true, 다르면 false를 반환합니다. 이렇게 “느슨하게” 동치 여부를 판단하기 때문에 예외가 많아 현대 웹 개발에서는 사용을 권장하지 않습니다.
     • > , < , >= , <= : 대소 관계 비교 연산자 두 피연산자의 값의 크기를 비교합니다. 수학에서의 부등호 기호의 사용법과 유사합니다.
   • 논리 연산자: 두 값 간의 논리 관계를 확인
     • ||: 논리합(or)
       • 두 값 중 하나만 true 여도 true 로 판단, 두 값이 모두 false면 false로 판단
     • &&: 논리곱(and)
       • 두 값이 모두 true 면 true로 판단, 두 값 중 하나만 false여도 false로 판단
   • 논리 부정 연산자: 사실 관계를 반대(부정)로 표현
     • !: 부정(not)
       • ! 기호 오른쪽 피연산자와 반대의 사실을 반환

cp.3 변수

학습 목표

• ✅ 변수가 메모리에 데이터를 저장하는 방법이라는 것을 기억한다.
• ✅ let 키워드를 활용하여 변수를 선언하고 원하는 값을 할당할 수 있다.
• ✅ 변수를 활용하여 더 쉽게 구구단을 출력할 수 있다.
• ✅ template literal을 사용할 수 있다.
  • 백틱으로 감싼 문자열 내에 ${변수명} 사용 시 변수를 넣을 수 있음
    Hello ${name}

---

• 변수를 선언할 때는 let 키워드를 사용. let 키워드 뒤에 선언하고자 하는 변수명 입력
  • 변수명을 포함한 식별자 네이밍 규칙
    • 문자, 숫자, _, $로 만들어야함
    • 숫자로 시작하는 것은 허용하지 않음(_, $, 문자로 시작)
    • 예약어(프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어)는 식별자로 사용 불가
      • ex) let, const, true, false, typeof 등 (더 많은 예약어 키워드는 MDN 에서 확인 가능!)
    • 변수의 존재 목적을 명확히 알 수 있는 변수명으로 표현
      • ex) a, b 와 같이 의미없는 변수명으로 쓰지 말자
    • 하나 이상의 영단어를 사용하여 식별자를 만들 경우, JS에서는 일반적으로 카멜 케이스를 사용
      • ex) first name → firstName
• 선언된 변수에 값을 할당할 때는 할당 연산자 = 를 사용
• 선언과 할당은 동시에 가능
• 아무것도 할당되지 않은 변수는 undifined가 자동으로 할당
• let 키워드로 선언한 변수는 새로운 값을 할당할 수 있음 (재할당)
• const 키워드로 선언한 변수는 재할당 X

let num; // 변수 선언
num = 5; // 값의 할당
console.log(num); // 5
num = 6; // 값의 재할당
console.log(num); // 5

let str = 'Hello'; // 변수 선언과 값 할당을 동시에

• 템플릿 리터럴: 백틱으로 감싼 문자열 내부에 ${} 를 사용하여 변수를 삽입할 수 있음.
  (+ 연산자보다 자주 사용되는듯)

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

// 위의 문장은 아래와 동일하게 작동
console.log(course + ' ' + cohort + ' ' + name);

---

오늘의 용어

• REPL(Read-Evaluate-Print loop): 읽고(read), 평가(evaluate)하고, 출력(print)을 반복(loop)하는 가장 간단한 개발 환경입니다. 내가 작성한 코드가 문법에 맞는지 틀린지 간단하게 실행해볼 수 있습니다.
• 프로그램(program): 작업(task) 수행을 위한 코드 모음
• 프로세스(process): 프로그램 실행의 결과물.
• 기계어: 컴퓨터가 이해할 수 있는 숫자로만 구성된 언어. 사람이 쉽게 이해할 수 없음.
• 프로그래밍 언어: 개발자가 프로그램을 작성하기 위한 언어. 기계어와 다르게 사람이 다룰 수 있는 수준의 문법과 의미를 지님.
• 자바스크립트(JavaScript): JavaScript는 브라우저, 서버, 모바일 개발이 가능한 멀티 패러다임 프로그래밍 언어.
• JavaScript 엔진: JavaScript 코드를 실행할 수 있는 프로그램. 크롬에 내장된 v8이 대표적임.
• 주석: JavaScript 엔진이 따로 해석하지 않는 코드. 개발자가 쓰고 싶은 사람의 언어, 자연어를 자유롭게 작성할 수 있다.
• 자연어: 인간이 쓰는 언어. 컴퓨터공학에서 프로그래밍 언어와 구분하기 위해 사람의 언어를 자연어로 따로 구분한다.
• 값(value): 하나의 고유한 의미를 가지는 코드. JavaScript 엔진이 하나의 값으로 읽고 평가할 수 있어야 한다.
• 표현식(expression): 값으로 평가될 수 있는 코드.
• 연산자(operator): 특정 연산을 수행할 수 있는 코드.

---

마치며

역시 개발용어(?)가 제일 익숙치 않다. 기존에 강의를 들을 때도 이게 무슨 단어야? 하던 것들이 많아 당황 했었는데… 역시 검색과 메모가 답이다. 자주 보고 친해지자…