시작하는 말

오늘은 그동안 독학했던 내용들에 대해 정리를 해보려고 한다.
그럼 바로 시작!!

1. 변수

• 변수란 데이터를 담는 공간을 말한다.
  변수를 선언할 때에는 var, let, const를 사용한다.
  
  -var는 재선언 및 값을 다른 값으로 변경하는 재할당이 가능하다.
  
  -let은 재선언은 불가하지만 재할당은 가능하다.
  
  -const는 재선언도 재할당도 불가하다.
   그렇기에 값이 변하지 않는 상수를 선언할 때 사용하면 좋다.  단, 값이 변하지 않는 상수의 변수명은 대문자로만 이루는게 좋다.
  
  
  

2.데이터 타입

• 데이터타입에는 String, Number, Function 등 이 존재한다.

-String(문자형)
  문자형은 큰따옴표, 작은따옴표, 백틱을 사용한다.
  
  const str1 = "Hello";
  const str2 = 'Hello';
  const str3 = `Hello`;

  숫자가 큰따옴표, 작은따옴표, 백틱 안에 있어도 문자형으로 구분된다.
  const str4 = "20";
  
  변수값에 기호를 추가하고싶으면 \를 입력하거나 다른 기호를 사용해야한다.
  const str5 = "He's a boy."; -가능
  const str6 = 'He's a boy'; -불가능

  백틱을 사용할 때 ${}를 사용하여 식을 값에 할당할 수 있다.
  const str7 = `나는 ${30+1}살 입니다.`;


-Number(숫자형)
  숫자형은 별도의 기호없이 입력한다.
  
  const num1 = 10; -정수
  const num2 = -10; -음수
  const PI = 3.14; -실수, 변하지 않는 값
  

-Function(함수)
  함수는 자바스크립트에서의 가장 기본적인 구성 블록 중 하나이다. 
  function 키워드를 이용하여 함수를 생성할 수 있다.
  
  function 함수명 (매개변수) {
   실행시키고자 하는 식 
  }
   위 식과 같은 구성요소를 가지고있고
   함수명(인자); 로 함수를 호출할 수 있다.
   인자에 아무것도 쓰지않아도 함수는 호출된다.
   
   
   function plus (a , b) {
     return a + b;
   }
   plus(3, 4);
   위 함수에서 함수명은 plus이고 매개변수는 a와 b이다.
   여기서 매개변수는 인자에서 전달받은 값을 의미한다.
   return은 함수를 실행한 후 나온 값을 반환해준다.
   
   
 -Array(배열)
  배열은 대괄호 안에 여러 값이 들어있다.
  
  let students = ["Amy", "Tom", "Peter"];
  배열에는 인덱스가 존재하는데 앞부터 0 , 1 , 2 ...로 커진다.
  students[0]; -Amy가 호출된다.
  students[0] = "Penny"; -인덱스0의 값을 Penny로 바꾼다.
  
  
 -Object(객체형)
 객체란 이름과 값으로 구성된 프로퍼티의 정렬되지 않은 집합이다.
 프로퍼티의 값으로 함수가 올 수도 있는데, 이러한 프로퍼티를 메소드라고 한다.
 
 예를 들어 이름은 피터피커이고 나이는 21살인 스파이더맨이 있다고 할 때
 
 const Spiderman ={
   name : "Peter Parker",
   age : 21,
 }
 
 위 와 같은 객체를 생성할 수 있고 name과 age는 키(Key),
 Peter Parker과 21은 키값(Value), 
 name : "Peter Parker" 과 age : 21 은 각각 프로퍼티(Property)라고 한다.
 프로퍼티는 , 로 구분한다.
 
 객체에 접근할 때에는 . , []를 사용한다.
 Spiderman.name
 Spiderman['age'] 와 같이 할 수 있다.
 
 객체에 추가할 때에도 . , []를 사용한다.
 Spiderman.gender = 'male';
 Spiderman['gender'] = 'male'; 와 같이 할 수 있다.
 
 객체에 있는 값을 삭제하고싶을때는 delete 연산자를 사용한다.
 delete Spiderman.gender;

 in 연산자를 사용하여 프로퍼티의 존재여부를 파악할 수 있다.
 'country' in Spiderman ---false
 'age' in Spiderman ---true


-Boolean(불리언,불린)
 불린형은 true와 false로 구성되어있다.
 const a = true;
 const b = false;
 논리연산자를 확인할때 주로 사용된다.
 
 
-Undefined,null
 Undefined는 변수에 값을 할당하지 않은 상태를 말한다.
 var Unde; -변수만 선언하고 값을 할당하지 않은 상태.
 
 null은 비어있는 데이터를 입력한 상태를 말한다.
 var empty = null; -비어있는 데이터를 변수에 할당한 상태.

3.typeof 연산자

• typeof 연산자를 사용하여 데이터타입을 구분할 수 있다.

console.log(typeof 3); --"number" 출력

4.기본 연산자

• 기본연산자에는 +,-,*,/,% 가 존재한다.
  +는 더하기, -는 빼기, 는 곱하기, /는 나누기, %는 나머지를 뜻한다.*

console.log(1+1); ---2 출력
console.log(10-5); ---5 출력
console.log(2*2); ---4 출력
console.log(6/3); ---2 출력
console.log(10%3); ---1 출력


const x = 1/0;
console.log(x); ---Infinity 출력

console.log("Hello"/2); ---NaN 출력 (NaN는 Not a Number의 줄임말이다.)

%(나머지)는 보통 홀수짝수를 구하거나 어떤수 사이의 값을 반환할때 사용한다.
홀수 : x%2=1  짝수 : x%2=0
x%5=0 : 0~4 사이의 값만 반환.

• 거듭제곱은 *(곱하기)를 두번 사용하면 된다.

console.log(2**3); ---8 출력

• *와 /는 +-보다 우선순위로 계산되기 때문에 +-를 먼저 계산하고싶다면 ()를 사용해야한다.

• 연산자는 줄여서 사용할 수 있다.

let num = 10;
num = num+5;  ->  num+=5 로도 사용가능하다.

5.증가연산자, 감소연산자

• 증가연산자와 감소연산자는 1씩 더해주거나 빼준다.
• 증가연산자는 +(더하기)를 두번 사용하여 나타낸다.

let num = 10;
num++; ---11 출력

• 감소연산자는 -(빼기)를 두번 사용하여 나타낸다.

let num = 10;
num--; ---9 출력

❗❗❗주의❗❗❗

let result = num++; 일 때는 10이 출력된다.
다른 변수에 증가연산자와 감소연산자를 사용할때는 위치가 중요하다.

let result = ++num; 일 경우 num에 1을 더한 값을 출력하고
let result = num++; 일 경우에는 num을 출력한 뒤에 1을 더한 값을 할당한다.

6.String(문자형)에서의 +

• 문자형에서도 +를 사용할 수 있다.

const name = "M.J";
const my = "My";
const who = "name is";

console.log(my + who + name); --- "My name is M.J" 출력

const a = "나는";
const age = 21; -숫자형
const b = "입니다.";

console.log(a + age + '살' + b); ---"나는 21살 입니다." 출력
이 식에서 age는 숫자형이었지만 출력될땐 문자형으로 바뀌었는데 이를 자동형변환이라고 함.

7.자동형변환

• 자동형변환은 자동으로 숫자형을 문자형으로 변환해주는것이다.

const Math = "90";
const English = "80";
const result = (Math + English) / 2; ---4540  출력
숫자형이 아닌 문자형으로 인식했기에 합한 값이 아닌 앞뒤로 이어붙어진 채 2로 나누어졌다.
여기서 "9080"/2 가 숫자형으로 출력된 이유는 자동형변환때문이다.

이처럼 잦은 오류를 발생시킬 수 있고 오류발생시 원인파악이 어렵기에 좋지않다.
이를 방지하기 위해 명시적 형변환을 사용하는것이 좋다.

8.명시적 형변환

• 명시적 형변환은 String, Number, Boolean 세가지가 있다.

String()은 문자형으로 변환시켜준다.
String(5) --- "5"출력

Number()은 숫자형으로 변환시켜준다.
console.log(Number("87642")); ---87642 출력
단, 숫자가 아니고 true와 false가 아닌 문자가 포함된 경우에는 NaN을 출력한다.
Number(true) --- 1 출력
Number(false) --- 0 출력

Boolean() 불리언형으로 변환될때는
숫자0, 빈 문자열'', null, Undefined, NaN는 false가 출력되고
그 외는 true가 출력된다.

*주의*
  Number(null) --- 0 출력
  Number(Undefined) --- NaN 출력
  Boolean(0) --- false 출력
  Boolean('0') --- true 출력
  Boolean('') --- false 출력
  Boolean(' ') --- true 출력

9.비교 연산자

• 비교 연산자에는 <,>,<=,>=,==,!=가 있다.
  (< : 크다, > : 작다, <= :크거나같다, >= : 작거나같다, == : 같다, != : 다르다)

console.log(10>5) --- true 출력
console.log(10==5) --- false 출력
  여기서 ==는 동등연산자이다
console.log(10!=5) --- true 출력

const a =1; const b = "1";
console.log(a==b); --- true 출력
console.log(a===b); --- false 출력
===는 데이터타입까지 비교한다.