반응형
1. 변수
변수는 값을 저장하는 공간이라고 생각하면 편하다.
name = "min";
age = 30간단하게 선언이 가능하지만 이렇게 변수를 선언하는 것은 상당히 위험하다.
혼자서 하는 프로젝트는 상관이 없지만 많은 사람들이 같이하는 큰 프로젝트라면 다른 사람이 name를 선언하면 마지막에 선언된 name으로 덮어쓰게 지게 된다. 이를 방지하기 위해 2가지 키워드가 존재한다.
2. let, const
let // 하나의 값만 가능함
const // 절대로 바뀌지 않는 상수
// let 은 의도적으로 변경이 가능하다.
let grade = "F";
// .... .....
grade = "A+"
// const는 수정이 불가능하므로 PI, 최대값, 생일 같은걸 입력한다.
// const는 보통 모두 대문자로 사용 <- 다른 사용자에게 상수라는걸 알려주기 위해서javascript에서 변수를 선언할 때는 변하지 않는 값은 const, 변할 수 있는 값은 let으로 선언.
tip) 모든 변수를 const로 선언하고 나중에 변경될 수 있는 값만 let으로 변경해도 됨.
// 변수는 문자와 숫자, $와 _만 사용
// 첫글자는 숫자가 될수 없다.
// 예약어는 사용할 수 없다.
// 가급적 상수는 대문자로만
// 변수명은 읽기 쉽고 이해할 수 있게 선언
3. 자료형
1) 문자형
const name1 = "민수";
const name2 = "영수";
const name3 = "진수";
const message1 = "나는 남자입니다.";
// 변수 출력
const message2 = `제 이름은 ${name1}입니다.`;
// 숫자 키 1번 옆에 있는 키로 입력 다른키는 변수 출력이 안됨
console.log(message2)
2) 숫자형
const age = 30;
const PI = 3.14;
console.log(1 + 2); // +는 더하기
console.log(2 - 1); // -는 빼기
console.log(1 * 2); // *는 곱하기
console.log(6 / 2); // /는 나누기
console.log(6 % 3); // %는 나머지 6을 3으로 나눴을때 나머지 이 경우에는 0
const x = 1/0; // 1을 0으로 나누는 x 값은?
console.log(x) // 결과 값은 무한대
// 만약에 문자를 숫자로 나누게 되면 결과값은?
const name = "영수";
const y = name/2;
console.log(y) // 결과 값은 NaN이라고 뜨게 됨. NaN = not a number (숫자가 아님)3) Boolean
// Boolean
const a = true; // 참
const b = false; // 거짓
const name = "민수";
const age = 30;
console.log(name == "민수") // 민수 라는 값이 같으므로 true 값을 반환
console.log(age > 40) // age = 30. 40보다 작으므로 false 값을 반환4) null과 undefined
// null(존재하지 않는 값) 과 undefined(값이 할당되지 않았음)
let age;
console.log(age)
// 변수만 선언하고 출력하였으므로 값이 할당되지 않아서 undefined 출력
let user = null; // 이름이 존재하지 않음
console.log(user)
// 이외에도 객체형과 심볼형이 있음. <- 추가로 찾아볼 예정5) typeof 연산자
// typeof 연산자
const name = "민수";
console.log(typeof 3); // number
console.log(typeof name); // string
console.log(typeof true); // boolean
console.log(typeof "ㅋㅋㅋ"); // string
console.log(typeof null); // object (객체형)
// null은 객체가 아님. javascript 초기 버전에 오류이지만 호환성을 위해서 수정하지는 않는다고 함.
console.log(typeof undefined); // undefined
// 변수를 사용하는 개발자가 만들었으면 typeof 연산자를 거의 사용할 일이 없음.
// 다른 개발자가 만든 변수의 type을 알아야하거나 API 통신 등을 통해 받아온
// 데이터를 type에 따라 다른 방식으로 처리해야 할때 많이 사용함.4. 대화 상자
// alert 뭔가를 알려줌 (비밀번호가 틀렸습니다 등 강제적인 알림)
// prompt 뭔가를 입력 받음
// confirm 뭔가를 확인 받음const name = prompt("이름을 입력하세요."); // 이름 값을 입력받을 수 있는 창을 띄움
alert("환영합니다, " + name + "님!"); // 환영합니다, (입력받은값)님! 이라고 알려줌
const name = prompt("이름을 입력하세요."); // 이름 값을 입력받을 수 있는 창을 띄움
alert(`환영합니다, ${name}님!`); // < 이렇게 변수도 사용이 가능함
// 만약에 값을 입력하지 않으면 null 값으로 인식
const name = prompt("오늘 날짜를 입력하세요", "2021-09-"); // 두번째 값은 디폴트 값
// 뭔가를 안내하거나 힌트를 줄때 유용함const isAdult = confirm("당신은 성인 입니까?"); // confirm 예시
console.log(isAdult) // console.log로 띄우기
// confirm과 alert의 차이점은 alert은 확인만 있으나
// confirm은 확인과 취소가 있다.
// 확인을 누르면 true값, 취소를 누르면 false값을 넘겨준다.
// 이 결과값을 활용해서 이후에 다른 작업이 가능함.
// 결제하시겠습니까?, 정말 삭제하시겠습니까? 등으로 사용이 가능함.
// -- 정리 --
// alert : 메세지를 보여준다. 확인버튼을 누르면 닫힘
// prompt : 메세지를 보여주고 어떤 값을 입력받을 수 있는
// 필드를 제공해줌 취소를 하면 null값, 두번째 인수는 디폴트 값 제공
// confirm : 사용자에게 확인을 받기 위한 용도로 활용
// 단점
// 1. 스크립트 일시 정지 (창을 닫기 전에는 이후 동작이 제한을 받음)
// 2. 스타일링이 불가능함 (브라우저마다 모양이 달라짐)
// 장점
// 빠르고 간단하게 적용 가능함반응형