자바스크립트 정리

@변수선언방식

 

1.var

• 동일한 이름으로 중복 선언 O
• 마지막에 할당된 값이 변수에 저장됨

2.let

• 중복선언 X 
• 재할당 O

3.const

• 중복선언 X
• 재할당 X
• 고정할때 사용하기
• 먼저 const로 선언하고 추후에 변경될 것들을 let으로 하기

*조건)

1. 문자와 숫자, $, _만 사용
2. 첫글자로 숫자 X
3. 예약어 X
4. 상수는 대문자로

---

@자료형

 

*문자형

` `  : 문자열 내부의 변수를 표현해줄 때 사용

const name3 = `Mike`;
const message3 =`My name is ${name}`;

 const name = "Mike";
 const message =`My name is ${name}`;
 
 const message2 = "My name is ${name}";
 console.log(message2) // "" 쓰면 변수명그대로 출력됨

 

 

*숫자형

  - 사칙연산 가능

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

const name = "mike";
const y = name/2;
console.log(y); //NaN (Not a Number)

 

*boolean

const a =true; 
const b =false;

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

console.log(name==Mike) //true
console.log(age>40) //false

 

*null / undefined

let age;
console.log(age) //변수를 선언만하고 할당하지않으면 undefined

let user =null;
console.log(user) //null

 

*typeof

• 변수의 자료형을 알아낼 수 있음

const name = "Mike";

console.log(typeof 3); //number
console.log(typeof name); //string
console.log(typeof true); //boolean
console.log(typeof "xxx"); //string
console.log(typeof null); //object
console.log(typeof undefined); //undefined

 

---

 

 

@대화상자

 

*alert() : 알려줌 

• 메세지를 띄우고 사용자가 확인버튼 누르기 전까지 띄워짐
• ex) 비번이 틀림, 이름은 필수값입니다

*prompt  : 입력받음

const name = prompt("이름을 입력하세요."); → 입력하라는 창이 뜸
alert("환영합니다"+name+"님");

------------------------------------------------------------
const name = prompt("이름을 입력하세요.");
alert(`안녕하세요, ${name}님. 환영합니다.`);

• 취소하면 null값 출력
• prompt는 두 개의 인수를 받을 수 있음

 

*confirm : 확인받음

const isAdult = confirm("당신은 성인입니까?");

console.log(isAdult)

• 확인 클릭 : true
• 취소 클릭 : false

 

**단점

• 스크립트 일시정지
• 스타일링 X

---

 

 

@형변환

• prompt로 입력받은 값은 문자형

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

 

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

console.log(
  Number("1234ㅁㅇㄹㅇㄹㅇ"), //NaN
  Number(true), //1
  Number(fase)  //0
)

✨✨✨

• Number(null) → 0
• Number(undefined) → NaN
•  
• Boolean(0) → false
• Boolean('0') → true
•  
• Boolean('') → false
• Boolean('  ') → true

✨✨✨

 

*Boolean() : boolean형으로 변환

→ false를 기억하기

1. 숫자 0
2. 빈문자
3. null
4. undefined
5. NaN

---

@함수

• 함수선언문
• 어디서든 호출 가능

*매개변수가 없는 함수

function showError(){
  alert('에러가 발생했습니다.');
}

showError();

 

*매개변수가 있는 함수

function sayHello(name){
  const msg = `Hello ${name}`;
  console.log(msg);
}

sayHello('Mike');

**name에 값이 없을 때

function sayHello(name){
  console.log(name)
  let msg = `Hello`;
  if(name){
    msg = `Hello, ${name}`;
  }
  console.log(msg);
}

sayHello();
-----------------------
<결과>
undefined
"Hello"

---

 

@함수표현식

• 코드에 도달하면 생성됨
• 그 이후에 사용 가능

 

@화살표함수

• 간결하게 작성할 수 있음
• return문이 한 줄 이면 괄호 생략가능
• 인수가 한 개 이면 괄호 생략가능

let add = function(num1,num2){
  return num1+num2;
}

---화살표함수

let add = (num1,num2)=>{
  return num1+num2;
}

let add = (num1,num2)=>(
  return num1+num2;
)


let add = (num1,num2)=>num1+num2
let sayHello = name => `Hello, ${name}`;

//함수표현식
showError();

let showError = function(){
  console.log('error');
}

//함수 선언문
showError();

function showError(){
  console.log('error');
}

//화살표 함수
let showError=()=>{
  console.log("error");
}

////////////////////////////////////////

const sayHello = function(name) {
  const msg = `Hello,${name}`;
  console.log(msg);
}

//화살표함수로 변경
const sayHello = (name) => {
  const msg = `Hello,${name}`;
  console.log(msg);
}

////////////////
const add = function(num1,num2){
  const result = num1+num2;
  return result;
};

//화살표함수
const add =(num1,num2)=>(
  num1+num2;
);

---