1. 변수 variable
👩🏻🚀 변수란 프로그램을 실행하는 동안 값이 여러 번 달라질 수 있는 데이터를 가리킴
👩🏻🚀 상수 constant 는 값을 한 번 지정하면 바뀌지 않는 데이터
1) 변수 선언 규칙
① 변수 이름은 일반적으로 라틴 문자(0-9, a-z, A-Z)와 밑줄 문자(_)를 사용
- 띄어쓰기 허용 x, 숫자, 밑줄(_)은 첫번째 문자 x
② 영어 대소문자를 구별하며 예약어는 변수 이름으로 쓸 수 x
- var, function, let, for와 같은 단어
③ lower camel case 표기를 사용
④ 변수 이름은 의미있게 작성 ( 이름만 보고도 대충 어떤 값인지 추측할 수 있어야 함 )
<script>
var name = 10; // var : 변수 선언을 의미
var str = 'javascript';
var temp = true;
// num, str, temp : 변수를 구분하는 이름(변수명)
// 10, 'javascript', true : 변수에 저장 되는 데이터(값)
document.write(num + '<br>' + str + '<br>' + temp + '<br><br>');
// 여러 개의 변수를 선언할 경우 다음과 같은 방법으로 선언할 수 있다.
var num, str, temp;
num = 20;
str = 'ECMAscript'
temp = false;
document.write(`${num}<br> ${str}<br> ${temp}<br><br>`);
var num = 30, str = 'jquery', temp = true;
document.write(num + '<br>' + str + '<br>' + temp + '<br><br>');
// 변수는 새로운 데이터가 저장되면 기존 데이터는 사라진다.
var num = 0;
num = 10;
document.write(`${num} <br>`); // 10
num2 = 1
document.write(nm2);
</script>
2. 자료형
👩🏻🚀 자료 data란 프로그래밍에서 프로그램이 처리할 수 있는 모든 것
👩🏻🚀 자료형 data type이란 컴퓨터가 처리할 수 있는 자료의 형태
👩🏻🚀 자바스크립트 자료형
- 기본 자료형 : 숫자, 문자열, 논리형
- 복합 자료형 : 배열, 객체
- 특수 자료형 : undefined, null
| 종류 | 설명 | 예시 | |
| 기본 자료형 | 숫자형 | 따옴표 없이 숫자로만 표기 | var birthYear = 1995; |
| 문자열 | 따옴표("" or '')로 묶어서 표기 숫자를 따옴표로 묶으면 문자로 인식 |
var greeting = 'Hello'; var birthYear = '1995'; |
|
| 논리형 | 참과 거짓이라는 2가지 값만 있는 유형 true, false 소문자로 표시 |
var isEmpty = true; | |
| 복합 자료형 | 배열 | 하나의 변수안에 여러 개의 값을 저장 | var seasons = ['봄', '여름', '가을', '겨울'] |
| 객체 | 함수와 속성을 함께 포함 | var date = new Date(); | |
| 특수 자료형 | undefined | 자료형이 지정되지 않은 경우 ex. 변수 선언만 하고 값을 할당하지 않은 변수 |
|
| null | 값이 유효하지 않은 경우 | ||
1) 기본 자료형 : 문자열 string
✏️ 문자와 문자열을 구분하는 언어도 있으나 자바 스크립트는 문자열로 통일
✏️ 문자열 자료형을 만드는 방법 : 작은 따옴표나 큰 따옴표로 감쌈
<script>
console.log("안녕하세요");
console.log('안녕하세요');
//console.log("안녕하세요'); // 따옴표 시작과 끝은 같아야 함
// 혼용하는 것도 가능
console.log('this is "string"');
console.log("this is 'string'");
// 이스케이프 문자 사용 : 따옴표를 문자 그대로 사용하고 싶을 때
console.log('this is \'string\'');
console.log("this is \"string\"");
/* 이스케이프 문자 사용 예
\n : 줄바꿈
\t : 탭문자
\\ : 역슬래시(\) 자체
*/
console.log("this is 'string' \nthis is 'string' ") // 줄 바꿈
console.log("this is 'string' \tthis is 'string' ") // 탭 문자
</script>
💡 문자열 연산
문자열에 적용할 수 있는 처리
1. 문자열 연결 연산 : 문자열 + 문자열
2. 문자 선택 연산 : 문자열[인덱스] -> 문자 하나
3. 문자열 길이 : 문자열.length -> 문자 갯수
<script>
console.log('안녕하세요.' + '자바 스크립트 입니다.'); // 안녕하세요.자바 스크립트 입니다.
let greet = '안녕하세요.';
console.log(greet + '자바 스크립트 입니다.'); // 안녕하세요.자바 스크립트 입니다.
// 문자 선택 연산. 인덱스는 0부터 시작하는 정수로 이루어짐
console.log('안녕하세요.'[0]); // 안
console.log('안녕하세요.'[1]); // 녕
console.log(greet[0]); // 안
console.log(greet[1]); // 녕
// 문자열의 길이
console.log("안녕하세요.".length); // 6
console.log(greet.length); // 6
let name = prompt('이름을 입력');
alert('이름은 '+name.length+'자 입니다.')
let name2 = prompt('한글로 이름을 입력');
alert('당신의 성은 '+ name2[0] +'입니다.');
</script>
💡 템플릿 문자열
문자열 결합 연산자를 사용하지 않고, 문자열 안에 바로 표현식을 사용할 수 있음
쌍따옴표나 홑따옴표 대신 백틱(`)을 사용
<script>
// 일반적인 방법 : 믄자열 결합 연산자 사용
console.log('표현식은 273 + 52의 값은 ' + (273 + 52) + '입니다.');
// 템플릿 문자열 사용
console.log(`표현식은 273 + 52의 값은 ${273 + 52}입니다.`); // 백틱(`)을 사용
let name = prompt('한글로 이름을 입력');
alert(`당신의 성은 ${name[0]} 입니다.`);
</script>
2) 기본 자료형 : 숫자형 number
✏️ 자바 스크립트는 정수와 실수의 구분이 없음
✏️ 따옴표 없이 사용, 숫자에 따옴표를 붙이면 문자열 자료형이 됨
✏️ 실수를 2진수로 변환해서 계산하는데, 이 때 자릿수가 많은 소수로 변환되어 계산되기 때문에 정확하지 x
<script>
console.log(100);
console.log(123.456);
// 숫자 관련 연산을 사용
console.log(200 + 100); // 300
console.log(200 - 100); // 100
console.log(200 * 100); // 20000
console.log(200 / 100); // 2
// 프로그래밍에서는 나머지 연산이 자주 사용됨
console.log(200 % 100); // 0
console.log(200 % 99); // 2
// 실수 사용시에 정확한 계산은 힘들다
console.log(0.2 + 0.1); // 0.30000000000000004
console.log(200 + 100); // 300
console.log('200' + '100'); // 200100
</script>
3) 기본 자료형: 논리형 boolean
✏️ 참(True)과 거짓(False) 두 가지 값만 가지는 자료형
💡 비교 연산자
=== : 양쪽이 같다.
!== : 양쪽이 다르다.
> : 왼쪽이 더 크다.
< : 오른쪽이 더 크다.
>= : 왼쪽이 더 크거나 같다.
<= : 오른쪽이 더 크거나 같다.
<script>
console.log(1 === 2); // false 양쪽이 같다.
console.log(1 !== 2); // true 양쪽이 다르다.
console.log(1 > 2); // false 왼쪽이 크다.
console.log(1 < 2); // true 오른쪽이 크다.
console.log(1 >= 2); // false 왼쪽이 크거나 같다.
console.log(1 <= 2); // true 오른쪽이 크거나 같다.
// 문자열에도 비교 연산자 사용 가능. 내림차순 값이 크다.
console.log('강아지' > '냐옹이'); // false
// 논리 부정 연산자 (!)
// 값을 반대로 바꿈
console.log(!true); // false
console.log(!false); // true
</script>
4) undefined와 null 자료형
✏️ undefined : 상수와 변수로 선언하지 않거나 변수를 선언하면서 값을 지정하지 않은 경우
✏️ 상수는 선언할 때 반드시 값을 지정해야 하므로 값이 없는 상수는 존재하지 않음
✏️ null : ' 데이터 값이 유효하지 않은 상태 '
<script>
'use strict'; // 엄격 모드
console.log(typeof(a)); // undefined
let b;
console.log(typeof(b)); // undefined
c = 100;
console.log(typeof(c)); // number(엄격모드 지정 안할 시)
</script>
3. 자료형 검사 typeof
👩🏻🚀 자료형 확인할 때 'typeof' 사용
<script>
let num = 10;
console.log(num);
num ='하이';
// typeof 연산자 사용 : typeof(자료)
console.log(typeof('안녕하세요')); // string
console.log(typeof(100)); // number
console.log(typeof(true)); // boolean
// 괄호가 없어도 됨 : typeof가 연산자라서 가능
console.log(typeof '안녕하세요'); // string
console.log(typeof 100); // number
console.log(typeof true); // boolean
console.log(typeof "안녕하세요" === "string"); // true. "안녕하세요"의 자료형이 string
console.log(typeof ("안녕하세요") === "string"); // true. "안녕하세요"의 자료형이 string
console.log(typeof ("안녕하세요" === "string")); // boolean. "안녕하세요" === "string"의 결과값은 false
// 자바 스크립트에서는 변수에 함수를 할당하는 것이 가능.
// 즉, 함수도 하나의 자료형임.
let fun = function() {
console.log('hello');
}
fun(); // hello
console.log(typeof fun); // function
</script>
4. 자료형 변환
숫자 자료형으로 변환할 때는 Number() 함수를 사용
<script>
// prompt로 입력 받으면 기본형이 문자열
const rawInput = prompt("inch 단위의 숫자를 입력해주세요."); // 숫자를 입력.
console.log(typeof rawInput); // String
// 입력받은 데이터를 숫자형으로 변경하고 cm 단위로 변경.
const inch = Number(rawInput);
console.log(typeof inch); // Number
const cm = inch * 2.54;
// 출력
alert(inch + 'inch는 ' + cm + 'cm 입니다.');
alert(`${inch}inchsms ${cm}cm 입니다.`);
</script>
문자 자료형으로 변환할 때 String() 함수 사용
<script>
var number = 100;
console.log(typeof(number)); // number
number = String(number);
console.log(typeof(number)); // string
console.log(number); // 100
</script>
불 자료형으로 변환할 때 Boolean() 함수 사용
<script>
// 숫자를 불린으로 형변환. 0은 false 나머지는 true
var number = 200;
console.log(typeof(number)); // number
console.log(number); // 200
number = Boolean(number);
console.log(typeof(number)); // boolean
console.log(number); // true
let num = 0;
console.log(typeof(num)); // number
console.log(num); // 0
num = Boolean(num);
console.log(typeof(num)); // boolean
console.log(num); // false. 0은 false로 변환.
// 문자열을 불린으로 형변환. 빈 문자열은 false, 나머지는 true.
let string2 = 'hello';
console.log(typeof(string2)); // string
string2 = Boolean(string2);
console.log(typeof(string2)); // boolean
console.log(string2); // true
let string3 = '';
console.log(typeof(string3)); // string
string3 = Boolean(string3);
console.log(typeof(string3)); // boolean
console.log(string3); // false
</script>
[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]
'Programming Language > JavaScript' 카테고리의 다른 글
| [JavaScript] 반복문 | for문, while문, break문, continue문 (0) | 2024.03.28 |
|---|---|
| [JavaScript] if 조건문 (if-else & else-if), switch 문 (1) | 2024.03.28 |
| [JavaScript] var 변수, let과 const (1) | 2024.03.27 |
| [JavaScript] 산술연산자, 복합대입연산자, 비교연산자, 논리연산자, 삼항연산자 (1) | 2024.03.27 |
| [JavaScript] 자바스크립트 태그, 용어와 기본 입출력 방법 (0) | 2024.03.26 |
