자바스크립트 기초

[berryberrybin]

변수

1. 변수

   name = "Mike";
   age = 30;

2. 변수 접근

   alert(name);
   console.log(age);

3. 변수명 동일할 경우 발생하는 문제 방지

   • let : 변할수 있는 값은 let으로 선언
   • const : 절대로 바뀌지 않는 상수, 값변경 불가

let name = "Mike";
let name = "google" // name변수를 이미 사용하고 있어서 다시 사용하려고 할 경우 에러 발생함

//다른 값으로 변경하기 위해서는 아래와 같이 작성
let grade = "F";
grade = "A"; // 값 변경 가능

//const 예시
const PI = 3.14;
const SPEED_LIMIT = 50;
const BIRTH_DAY = '2020-01-01';

4. 변수명 제약사항
   • 변수는 문자와 숫자, $와 _만 사용가능
   • 첫글자는 숫자가 될 수 없음
   • 예약어는 사용할 수 없음
   • 가급적 상수는 대문자로 알려주기

   • 변수명은 읽고 쉽고 이해할 수 있게 선언

     자료형

5. 문자형 String

   // "", '' , `` 3가지 사용 가능
   const name1 = "Mike"; 
   const name1 = 'Mike'; 
   const name1 = `Mike`; 

const message = "I'm a boy.";  // 작은따옴표 사용했으면 큰따옴표로 묶어줌
const message = 'I\'m a boy.';
 // 작은따옴표 사용했는데 작은따옴표로 묶어주고 싶다면 \(역슬래시)를 통해 특수문자로 인식

const message3 = `My name is ${name}`; // $ { } 안에 변수가 변환되어서 표현됨
console.log(message3);

const message4 = `나는 ${20+5}살 입니다.`; // 표현식도 가능
console.log(message4);

2. 숫자형 NUmber

const age = 30;
const PI = 3.14;

console.log(1+2); // 더하기
console.log(3-2); // 빼기
console.log(10*2); // 곱하기
console.log(10/2); // 나누기
console.log(6%4); // 나머지

const x = 1/0;
console.log(x); // 0으로 나누면 결과값 Infinity 나옴

const name = "Mike";
const y = name/2;
console.log(y); // 문자를 숫자로 나누면 결과값 NaN 나옴  (NaN = not a number)

3. 논리형

const a = true; // 참
const b = false; // 거짓

const name = "Mike";
const age = 30;

console.log(name =='Mike'); // 결과값 true
console.log(age > 40); // 결과값 false

4. null 과 undefined

let age; // 선언만 하고 아무것도 할당하지 않음
console.log(age); //결과값 undefined

let user = null; // user가 존재하지 않는다.

5. typeof 연산자
   • 변수의 자료형을 알아낼 수 있음

     
     console.log(type of 3); // 결과값 : "number"

const name = "Mike"; console.log(type of name); // 결과값 : "String"

console.log(type of true); // 결과값 : "boolean" console.log(type of "xxx"); // 결과값 : "String"

console.log(type of null); // 결과값 : "object"
// null은 객체가 아니지만 초기버전의 오류이나 이미 작성한 코드의 호환성으로 인해 수정하지 않는다고 함

console.log(type of undefined); // 결과값 : "undefined"

------------------------------------------------------------------------------------------------------
- 문자열 연결
```javascript
const name="Mike";
const a = "나는 ";
const b = " 입니다.";

console.log(a + name + b); // 결과값 : "나는 Mike 입니다." 

const age = 30;
console.log(a + age + "살" + b); // 결과값 : "나는 30살 입니다." 
// age 숫자형이지만 결과값은 전체 문자형으로 나옴

[berryberrybin]

alert, prompt, confirm

• alert : 알려줌 (알림창이 띄워지면서 확인버튼만 있음)
• prompt : 입력받음 (사용자에게 값을 입력받을수 있음 / 취소버튼을 누르면 null값이 들어감)
• confirm : 확인받음 (alert과 차이점은 취소와 확인 버튼 같이 있음)

-단점 : 스크립트 일시정지되며, 스타일링이 불가능함

const name = prompt("이름을 입력하세요."); // 사용자에게 입력받을 수 있음
alert("환영합니다. " + name + "님"); // 입력받은 값을 받아 alert창 띄움
alert(`안녕하세요, ${name}님. 환영합니다`);

const date = prompt("예약일을 입력해주세요.", "2022-03-");
// default값도 입력할 수 있음
// 예약일을 입력하는 칸에 2022-03- 이 기본으로 작성되어짐

const isAdult = confirm("당신은 성인입니까?"); // 당신은 성인입니까? 물어보는 창이뜨면서 취소와 확인 버튼을 누를 수 있음
console.log(isAdult);  // 확인 누르면 true가 나오고, 취소 누르면 false가 나옴

---

형변환

• String() : 문자형으로 형변환

  console.log(
  String(3), // 결과값 : "3"
  String(ture), // 결과값 : "true"
  String(false), // 결과값 : "false"
  String(null),  // 결과값 : "null"
  String(undefined) // 결과값 : "undefined"
  )

• Number() : 숫자형으로 형변환

  console.log(Number("1234")); // 결과값 : 1234
  console.log(Number("1234ABCD")); // 결과값 : NaN
  console.log(Number("true"), Number("false")); // 결과값 : 1 0

• Boolean() : Boolean으로 형변환
  • 결과가 false인 경우 (아래 경우 이외에는 true를 반환함)
    • 숫자 0
    • 빈문자열 ""
    • null
    • undefined
    • NaN

< ⭐️ 주의사항 ⭐️>

• Number("문자")의 결과 : NaN

• Number(null)의 결과 : 0

• Number(0)은 false이지만 Number('0')은 true

• Number('')은 false이지만 Number(' ')은 true

[berryberrybin]

연산자

• +(더하기) -(빼기) *(곱하기) /(나누기) %(나머지)
• %(나머지) 응용방법
  • 홀수 : x % 2 = 1 , 짝수: y % 2 = 0
  • 어떤 값이 5를 넘으면 안될 경우 : x % 5 = 0 ~ 4사이의 값만 반환
• 거듭제곱
  • const num = 2**3; console.log(num); 결과값이 8이 나옴

// 연산자 줄여쓰기 (+=,  -=,  *=,  /=)
let num = 10;
num += 5;   // num = num + 5; 를 의미함

// 증가연산자, 감소연산자
let numA = 10;
let result = numA++; // result는 10이 나오고, num은 11이 됨

let numB=10;
let result = ++numB;  // result에 11이 나오고, num도 11이 나옴

---

비교연산자 및 조건문

• < , > , <=, >= , ==, !=
• ⭐️ 일치연산자 : ===는 값과 타입을 둘 다 비교함
• ==는 값만 비교하므로 1과 "1"을 동일하다고 봄

a=3; // a에 3을 할당
a==3; // a와 3이 같은가? 
a!=3; // a와 3이 다른가?

const a =1 ;
const b = "1";

console.log(a==b); // true
console.log(a===b); // false

• 조건문

  
  const age = 10;

if(age > 19) { console.log('환영합니다'); } else if(age===19){ console.log('수능잘치세요'); } else{ console.log('안녕히가세요'); }

논리연산자