JavaScript를 포함한 여러 프로그래밍 언어의 경우 예외적인 부분도 있으나, 타입(데이터의 형태를 정의), 변수(값을 저장하는 공간), 연산자(논리적, 산술적, 비교 등의 연산 수행), 제어문(조건에 의해 수행)을 가지고 있다. 이후 프로그램의 양이 방대해지면서 관리를 용이하게 하기 위해 구조체(여러 개의 변수의 묶음), 함수(기능들의 묶음), 배열(같은 타입의 여러 변수의 묶음)이 생겨났다. 이후 객체 지향 프로그래밍이 대두되면서 대부분의 프로그래밍 언어는 타입, 변수, 연산자, 제어문, 구조체, 함수, 배열, 객체의 특징을 가지고 있다.
JavaScript의 경우 웹 브라우저에서 동적인 웹 페이지를 만들기 위한 스크립트 언어로 개발되었다가, ECMA script 6 이후부터 객체 지향 프로그래밍 기능 및 함수형 프로그래밍 기능이 추가 되었다.
자바스크립트 기본 작성 방식
- 이벤트 작성 방식
태그에 제공하는 인라인 이벤트에 자바스크립트 코드를 직접 넣어서 작성하는 방식이다. 간단하지만 복잡한 로직을 작성할 수 없고 가독성이 떨어지며, 관리에 어려움이 있어 잘 사용하지 않는다 - 내부 스크립트 작성 방식
<script>태그 안에 자바스크립트 내용을 작성하는 방식으로 한 문서 안에서 관리할 수 있다는 장점이 있지만 코드가 길어지게 되면 코드의 관리가 힘들어지고, 코드에 대한 재사용성 또한 떨어지므로 잘 사용하지 않는다. - 외부 스크립트 작성방식
외부 파일 확장자를 .js로 만들고 기존의 태그와 디자인 그리고 로직을 분리하여 작성하는 방식이다. 가독성 및 재사용성이 증가한다. <script src="파일주소"></script> 를 사용한다.
<HTML 문서>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 이벤트 작성 방식 -->
<button onclick='alert("안녕하세요")' id="btn1">버튼1</button>
<button id="btn2">버튼2</button>
<button id="btn3">버튼3</button>
<!-- 내부 스크립트 작성 방식 -->
<script >
document.getElementById("btn2").addEventListener("click", function(){
alert("반갑습니다");
});
</script>
<!-- 외부 스크립트 작성 방식 -->
<script src="exercise.js"></script>
</body>
</html>document.getElementById("btn3").addEventListener("click",function(){
alert("안녕히계세요");
});
데이터 타입
데이터 타입에는 기본형 타입과 참조형 타입으로 구분된다. 기본형 타입은 값을 그대로 메모리에 할당하여 변하지 않는 값을 가지는 타입을 얘기한다. 즉 한 번 만들어진 값은 메모리를 청소하지 않는 이상 메모리에 남아있는다. 참조형 타입 변경이 가능한 값으로, 실제 데이터가 저장된 주소를 참조한다.
| 기본형 | 참조형 |
| Number String Boolean Undefined Symbol |
Null Object (Array, Function, Date ..) |
기본형 데이터 타입
number
정수(양의 정수, 0, 음의 정수), 실수(양의 실수, 0, 음의 실수), 8진수, 16진수, infinite 및 NaN을 포함하고 있는 데이터 타입이다.
| 종류 | 설명 |
| 정수 | ....., -1, 0, 1, ...... |
| 실수 | ......, -1.23, 0.0, 1.234, ..... |
| 8진수 | 0 |
| 16진수 | 0x |
| infinite | 측정할 수 있는 한도치를 넘었을 때 (infinite / -infinite) isFinite()를 통해 검사 가능함, 결과값이 True일 경우 infinite / False일 경우 infinite ex) console.log(-1/0) //infinite |
| NaN (Not a Number) | 수학 연산을 수행할 수 없을 경우 isNaN()을 통해 검사 가능함, 결과값이 True일 경우 NaN / False일 경우 숫자 맞음 ex) console.log("a"/4) //NaN |
JavaScript에서 긴 수를 표현하기 위해서 지수표기법을 사용한다. 기존의 숫자에서 밑수 바로 다음 문자에 e를 쓴 후에 지수를 쓰면 된다. 지수표기법을 사용하게 되면 메모리를 덜 사용하게 된다. 하지만 지수표기법의 단점은 수의 길이가 일정 이상 넘어가면 정확한 수치를 도출하기 어렵다는 점이다. 예를 들어 999999999999999999999의 수를 1e+21로 표기한다.
- 값: 1234000000000000000000000 // 지수표기법: 1.234e24
- 값: 0.000000000000000002341 // 지수표기법: 2.341e-18
또한 JavaScript에서는 2의 보수를 사용해서 계산하기 때문에 소수점을 계산할 때 미세하게 남는 수가 생긴다. 따라서 소수점 계산을 할 때에는 정수로 변경하여 계산한 후에 나눠서 소수점으로 만드는 방법을 사용하는 것이 좋다.
- console.log(0.1+0.2) // 0.30000000000000004
- console.log((1+2)/10) // 0.3
String
- "문자" : 큰 따옴표("") 사용
- '문자' : 작은 따옴표('') 사용
- `문자` : BackTick(``)사용, backtick의 경우 키보드 숫자 1의 옆에 있다.
- 문자.length
- 문장\n 문장
Boolean
Undefined
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var v1 = "문자입니다.";
console.log('문자입니다');
console.log(`\'문자\'입니다`);
console.log(v1.length);
console.log('안녕하세요 \n 저는 아무개 입니다.');
</script>
</body>
</html>
참조형 데이터 타입
Null
기타 내용
데이터 타입 확인
- typeof ;
typeof를 사용하여 해당 내용이 어떤 데이터 타입인지 확인할 수 있다.
주석
- 한줄주석 : //
- 다중주석 : /* */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 이렇게 주석으로 작성이 가능하다.
console.log(typeof "안녕");
console.log(typeof 1);
console.log(typeof false);
</script>
</body>
</html>
'Frontend > JavaScript' 카테고리의 다른 글
| JavaScript의 기초 문법 : 함수 (0) | 2024.07.22 |
|---|---|
| JavaScript의 기초 문법 : 제어문 - 반복문(while / for) (0) | 2024.07.19 |
| JavaScript의 기초 문법 : 제어문 - 조건문 (if / switch-case) (0) | 2024.07.18 |
| JavaScript의 기초 문법 : 연산자 (0) | 2024.07.16 |
| JavaScript에서 사용자의 입력을 받아보자 (0) | 2024.07.15 |
| JavaScript의 템플릿 리터럴이란? (0) | 2024.07.15 |
| JavaScript의 기초 문법 : 변수 (0) | 2024.07.15 |
| JavaScript : 정규표현식이란? (0) | 2024.07.01 |