[Java Script] 기본 개념 정리 1
: 변수/자료형/대화상자(alert, prompt, confirm)
프로젝트를 진행하면서, 프론트 파트까지 혼자 작업하다보니,
Js 에 대한 개념을 제대로 정리해야할 필요성을 절실히 느꼈다.
그때그때 코드를 참고하며 응용하는 식으로는 한계가 있었고,
결국에 프론트 파트의 코드를 제대로 작성하려면
기본기를 차근차근 다져야겠다고 생각했다.
해당 포스팅은 자바스크립트의 기본 개념 및 사용법을 개인적으로 공부하며 정리하기 위한 용도로,
이미 기본적인 자바스크립트 지식이 있는 개발자라면 스킵하시길 권한다!
🚩 학습 목표
- Java Script 기본 개념 정리 및 숙
- Java Script 기본 사용법 정리 및 숙지
✅ 변수 기본 개념
어떤 정보에 이름을 붙여 사용하고 싶을때 사용.
변수에는 let, const 라는 2가지 키워드가 존재함.
const 와 let
- const : 절대로 바뀌지 않는 상수(수정 X)
- let : 한번 선언 후, 수정 가능
변수 선언 규칙
- 변수는 문자, 숫자, $, _ 만 사용
- 첫글자는 숫자 불가능
- 예약어 사용 불가능
- 상수는 가급적 대문자로
- 변수명은 읽기 쉽고 이해할 수 있게 선언
⭐TIP⭐
자바스크립트에서 변수 선언 시,
모든 변수를 일단 const 로 선언 후, 변경의 여지가 있는 변수만 let 로 수정
✅ 자료형
1. 문자형 (String)
변수로 선언 및 console.log( ) 를 사용해 표현식으로 바로 연산도 가능
⭐ 사용 예시
- 작은 따옴표(' ') 사용 시에는 역슬래시(\)를 넣어주면 특수문자로 인식
- 백틱은 변수( ${변수명})를 표현해줄 때 사용 (큰따옴표를 사용하면 변수가 문자로 인식됨)
2. 숫자형 (Number)
문자형은 작은따옴표, 큰따옴표, 백틱 (' ', " ", ` `)3가지로 작성 가능
⭐ 사용 예시
console.log ( )를 통해 표현식으로 연산 가능
숫자 관련 작업을 할때, infitity/NaN 이 아닌지 항상 염두하면서 작업해야함.
- Infinity (무한)
- NaN(Not a number / 숫자 X)
3. 불리언 (Boolean)
참/거짓(true/false)로 구성.
사용예시는 생략.
4. null 과 undefined
null : 존재하지 않는 값.
undefiend : 값이 할당되지 않음. (변수 선언O, but 값 할당 X 시 출력됨)
⭐ 사용 예시
5. typeof 연산자
변수의 자료형을 알아낼 수 있음.
주로, 다른 개발자가 작성한 변수의 타입을 알아내야할 때 사용.
⭐ 사용 예시
null 은 객체가 아님 (자바스크립트 초기버전의 오류)
✅ 대화상자 (alert, prompt, confirm)
alert : 알려줌 (메세지창을 띄워, 사용자가 확인 버튼을 누르기 전까지 계속 떠있음 )
prompt : 입력받음 (사용자에게 어떤 값을 입력받을 때 사용). prompt로 입력받은 값은 무조건 문자형
confirm : 확인받음 (확인과 취소 버튼이 있음)
1. alert, prompt
⭐ 사용 예시
- prompt 에 값 입력 X 시, null
2. confirm
⭐ 사용 예시
- 확인 버튼 클릭 시, true
- 취소 버튼 클릭 시, false
3. 실제 활용 예시
alert('삭제 되었습니다.');
prompt('예약일을 입력하세요.', '2020-10-');
confirm("구독을 취소 하시겠습니까?);
✅ 형변환
형변환 종류
자동 형변환 : "9080"/ 2 = 4540(숫자), "6"/ "3" = 2(숫자)
명시적 형변환 : String( ), Number( ) 등 의 함수 사용
*원인을 찾기 힘든 에러를 발생시킬 수 있기때문에, 항상 의도를 가지고 원하는 타입으로 명시적 형변환 하는 것이 좋음!
형변환 함수
String() : 문자형으로 변환
Number() : 숫자형으로 변환. Numuber("문자") 는 NaN
Boolean() : 불린형으로 변환. 0, 빈문자열, null, undefined, NaN 은 false, 나머지는 모두 true로 변환
1. String( )
: 모든 자료형을 문자형으로 변환
⭐ 사용 예시
2. Number( )
- Numuber("문자") 는 NaN
- Number(true) 는 1, Number(false) 0
⭐ 사용 예시
3. Boolean( )
: 0, ""(빈문자열), null, undefined, NaN 은 false, 나머지는 true
⭐ 사용 예시
⭐ 주의사항 ⭐
- Number(null) // null
- Number(undefined) // NaN
- Number(0) // false
- Number('0') // true
- Number('') // false
- Number(' ') // true
자바스크립트, CSS, HTML 실시간 테스트 가능 사이트
Create a New Pen
Behavior Auto Save If active, Pens will autosave every 30 seconds after being saved once. Auto-Updating Preview If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update. Format on Save If enabled, your co
codepen.io
참고 자료 :