변수와 상수 / 자료형 / 모달 창 상호작용
🔴 이 글을 쓰기 위해 참고한 영상 / 사이트
🟠 변수
변수는 이름이 붙은 저장소, 딱 맞는말인것 같다.
말 그대로 데이터를 저장할 때 쓰이는 저장소이다. ( 이는 상수도 마찬가지이다. )
보통 프로그래밍 언어에서의 변수라 하면, 데이터 타입을 명시해주고 해당하는 값을 적어주는 것이 일반적이다.
다만, JS에서는 데이터 타입을 명시하지 않아도 되며 대신 let과 var를 쓰게 된다.
1
2
3
let variable = "I'm String";
let variable2 = 23;
var variable3 = true;
let과 var의 차이는 방식의 차이이며, 요즘은 let을 주로 쓴다더라.
둘 사이에 큰 차이는 없다.
다음으로, 변수 선언에는 규칙이 있다.
- 변수명은 문자 및 숫자가 들어가야하며, 기호는 $와 _만 가능하다.
- 변수명의 첫 글자로는 숫자가 올 수 없다.
- 이미 JS 내부의 예약어 (특히 내부함수)는 변수명으로 쓸 수 없다.
- 변수는 선언되어야지 사용이 가능하다.
특히, 이 마지막의 선언되어야지 사용이 가능하다는
엥? 변수를 선언해야지 사용을 하죠 라고 말할 수 있다.
맞다. 다만, JavaScript 에서는 let 없이도 단순 값 할당으로 변수를 생성하는 것이 가능하다.
1
2
3
4
5
6
hello = "HelloWorld";
alert(hello); // "HelloWorld"
"use strict";
hello = "HelloWorld";
alert(hello); // error: hello is not defined
엄격 모드를 적용했다면, let 없이는 변수를 할당할 수 없을거다.
—
🟠 상수
상수 (constant)는, 변하지 않는 값이다.
변수처럼 한번 할당한 값을 언제든 바꿀 수 있는 것과는 다르게,
상수는 한번 할당되면 값을 절대로 바꿀 수 없는 것을 말한다.
선언은 다음과 같다.
1
2
3
4
5
const test = "HelloWorld";
alert(test); // "HelloWorld"
test = 34;
alert(test); // TypeError: Assignment to constant variable
let 대신 const 으로 상수임을 명시해줄 수 있으며,
주로 사용처는 기억하기 힘든 값을 상수로 선언해 필요할 때 쓴다는 점이다.
1
2
3
const COLOR_WHITE = "#FFFFFF";
// 이런 식으로, 색코드를 외우기 보다는 이름으로 명시해두고 사용하는 편
🟠 상수의 대문자 표기
가끔가다 상수를 대문자로 표기하는 것은, 아무때나 표기하기보다는 나름의 규칙이 있다.
- 하드 코딩한 값의 별칭을 만들어야 할 때 실행 전에 이미 값을 가지고, 코드에서 그 값을 직접 가져다 쓰는 데에 쓰이는 상수. ( 색코드 처럼 )
변수와 상수 공통으로 이름을 간결하고 명확하게 짓는 것이 좋다. 알아볼 수 있는 이름, 누가 봐도 이 변수 혹은 상수가 무슨 역할을 하는지.
🟠 자료형
자바스크립트에는 8가지 기본 자료형이 있다.
자바스크립트는 let 혹은 var, const 처럼 변수 및 상수에 들어간 값에 따라 해당 변수의 타입을 결정했었다.
이렇게 변수에 들어간 데이터 값이 바뀌면, 변수 타입이 바뀌는 것이 자유로운 언어들을 동적 타입 언어라고 한다.
그 중에서, 이 데이터 타입들을 자료형이라 부르고 들어갈 수 있는 자료형을 소개한다.
🟠 숫자형 ( 정수 및 부동소수점 숫자 )
숫자형에는 일반적인 숫자 값 포함 Infinity, -Infinity, NaN 이란 특수 숫자 값이 존재한다.
Infinity : 어떤 숫자보다 더 큰 값, 무한대 값을 의미한다.
직접 키워드로 명시해서 직접 참조를 할 수 있다.
- NaN ( Not a Number )
- 숫자를 연산하는데에 있어 부정확, 정의되지 않은 수학 연산일 시 보게 됨.
아까처럼 JS는 딱히 엄격 모드를 적용하지 않는 한 변수 선언 없이 변수를 사용한다던지 해서 좀 이런 기준에 자유로운 언어인만큼, 연산 과정에서도 일반적으로는 말도 안되는 연산도 때로는 수행할 때가 있기 때문이다. - BigInt
- 내부 표현 방식으로 JS는
( 2의 53승 -1 ) ( 9007199254740991 ) 보다 큰 값
혹은 작은 정수는 ‘숫자형’을 사용해 나타낼 수 없다.
따라서, 특수한 상황에서 쓰이는 타입인데
보통 암호관련한 작업처럼 긴 숫자형이 필요할 때 주로 쓰이게 된다.
특징은 길이에 상관없이 정수표현이 가능하게 된다는 것.
정수의 리터럴 끝에 n이 붙은 것이 BigInt형이 된다.
1
const bigInt = 1234567890123456789012345678901234567890n;
🟠 문자형
문자형은 따옴표로 표기된다.
1
2
3
4
5
6
7
8
9
10
// 큰 따옴표
let string1 = "Hello World";
// 작은 따옴표
let string2 = 'Hello World';
let num = 23
// 역 따옴표
let string3 = `Hello ${num}`;
큰, 작은 따옴표는 딱히 기능상 차이는 없다.
역 따옴표는 안에 ${…} 원하는 변수 및 표현식을 넣어 포맷팅을 해줄 수 있다.
🟠 불린형
불린형(논리 타입)은 True / False 으로 단 두가지만 있는 자료형이다.
각각 긍정 및 부정 이고, 참과 거짓으로 이해하면 좋다.
🟠 ‘null’
어느 자료형에도 속하지 않는 값
‘존재하지 않는(nothing)값, 비어있는(empty), 알수없는(unknown)값’을 말한다.
다른 언어에서는 ‘존재하지 않는 개체에 대한 참조’ 및 ‘널 포인터’으로 JS와는 조금 다른 의미로 알려져 있는 값이다.
🟠 ‘undefined’
의미는 정의되지 않은 값
null 과 마찬가지로 자신만의 자료형을 가지며, 값이 할당되지 않은 상태를 나타낸다.
특히, 변수를 선언했으나 초기 값을 설정하지 않을 시 이 자료형이 들어간다.
🟠 객체와 심볼
객체형은 특수한 자료형,
객체형을 제외한 다른 자료형은 변수에 한 가지만 표현이 가능해 원시 (primitive) 자료형이라고 부른다.
반면, 객체는 데이터 컬렉션이나 복잡한 객체 (entity) 를 표현할 수 있다.
심볼은 객체의 고유한 식별자 ( unique identifier )를 나타낸다.
🟠 typeof 연산자
인수의 자료형을 반환한다.
자료형에 따라 연산방식을 다르게 하고싶거나,
빠르게 변수의 자료형을 알아내고 싶을 때 사용한다.
1
2
3
4
5
6
typeof undefined // "undefined"
typeof 0 // "number"
typeof 10n // "BigInt"
typeof true // "boolean" 등
typeof let // function
🟠 모달 창 상호작용
브라우저에는 사용자와 상호작용이 가능한 함수 3가지를 제공한다.
특정 메시지를 보여주는 alert
특정 입력 필드를 제공해 값을 출력시켜주는 prompt
특정 질문 메시지와 답을 할 수 있는 confirm
3가지가 있다.
이 3가지의 공통점으로 특정 창이 출력되는데,
평소 인터넷 사이트를 돌아다니면 한번 쯤은 봤을 알림 창이나 권한을 요구하는 창과 같은 종류이다.
이 특정 창은 특정 상호작용을 하지 않는 한,
특정 창 이외의 사이트 내의 컨텐츠와 상호작용이 불가능하다는 특징이 있다.
이걸 모달 창 (modal window) 라고 부른다.
🟠 alert
다시, alert는 특정 메시지와 함께 (확인) 이라는 상호작용이 가능하다. ( 읽기 전용 )
🟠 prompt
prompt는 두 개의 인자를 받는다. (title, default)
1
2
3
4
5
6
let name = prompt(title, [default]);
// default 매개변수는 대괄호로 감싸져있는데, 이는 필수가 아닌 선택값임을 의미한다.
let name = prompt("당신의 이름은?", "홍길동");
// 이름을 제출하지 않으면, 이름은 홍길동이 된다.
alert(`당신의 이름은 ${name}입니다.`);
사용자는 프롬포트의 대화상자에 원하는 값을 입력하고, 확인을 누를 수 있다. (취소가능)
원하는 값을 입력하면, alert에서 문자열을
취소를 눌렀다면 null 값을 반환하게 된다.
default 값은 꼭 넣지 않아도 되지만, 만약 IE환경이라면 default를 undefined 으로 명시하기 때문에 꼭 넣어주자.
🟠 confirm
컨펌은 매개변수로 받은 question(질문)과 확인 및 취소가 있는 모달 창을 보여준다.
사용자가 확인을 누르면 true, 그렇지 않다면 false를 반환한다.