자바스크립트 데이터 타입을 공부해보자. 어렵지 않음!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step01_dataType.html</title>
</head>
<body>
<h1>javascript 데이터 type</h1>
<script>
// 숫자 (number) type 데이터
let num1 = 10;
let num2 = 10.1;
// 문자 (string) type 데이터
let str1 = 'abcd1234';
let str2 = "김구라";
</script>
</body>
</html>데이터를 선언할 때는 let을 사용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step01_dataType2.html</title>
</head>
<body>
<h1>javascript 데이터 type</h1>
<script>
//참과 거짓을 나타낼때 사용하는 boolean type
// boolean type 데이터가 들어가는 변수의 이름을 대화식으로 지으면
// 가독성이 좋다. ( isXXX, canXXX )
let isRun=true;
let isWait=false;
let canEat=true;
//왼쪽이 오른쪽 보다 큰지 비교
let result=10>1;
//왼쪽이 오른쪽 보다 작거나 같은지 비교
let result2=10<=1;
//양쪽의 값이 같은지 비교
let result3=10==10;
//양쪽의 값이 다른지 비교
let result4=10!=10;
//양쪽의 값이 같은지 비교
let result5="kim"=="lee";
//양쪽의 값이 다른지 비교
let result6="kim"!="lee";
</script>
</body>
</html>변수에는 숫자, 문자 말고도 boolean type도 넣을 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step01_dataType3.html</title>
</head>
<body>
<h1>javascript 데이터 type</h1>
<script>
//회원 한명의 정보라고 가정하자
//각각의 변수에 대입하면 3개의 변수가 필요 하지만...
let num=1;
let name="김구라";
let isMan=true;
//다른 data type 을 활용하면 1개의 변수명으로 회원 한명의 정보를
//관리 할수 있다.
let mem1={num:1, name:"김구라", isMan:true};
let mem2={num:1, name:"김구라", isMan:true};
let mem3={num:num, name:name, isMan:isMan};
// a 는 object type
let a=mem1; // mem1 에 있는 object type 값을 a 에 복사
// b 는 number type
let b=mem1.num;
// c 는 string type
let c=mem1.name;
// d 는 boolean type
let d=mem1.isMan;
// object 에 저장된 값을 수정해 보기
mem2.num=999;
mem2.name="이정호";
//빈 object 를 만들고
let mem4={};
//나중에 방을 추가 할수 있을까요?
mem4.num=2;
mem4.name="해골";
//나중에 방을 삭제 할수 있을까요?
delete mem4.name; // delete 예약어를 이용해서 삭제할수 있다.
</script>
</body>
</html>변수를 계속해서 생성할 수 없으니 묶어서 생성해야한다. 자바스크립트에서는 object라고 한다.
object를 만들 때는 { key1 : value1 , key2 : value2,....} 형식으로 만든다.
object에 참조하기 위해서는 .을 사용한다.
이미 선언한 오브젝트에 추가, 수정, 삭제를 할 수 있다.
//빈 object 를 만들고
let mem4={};
//나중에 방을 추가 할수 있을까요?
mem4.num=2;
mem4.name="해골";
//나중에 방을 삭제 할수 있을까요?
delete mem4.name; // delete 예약어를 이용해서 삭제할수 있다.
주의해야할점 !!!!
let mem1={num:1, name:"김구라", isMan:true};
mem5 = mem1;
mem1.isMan = false;
mem5.num = 3mem1
{num: 3, name: '김구라', isMan: false}
mem5
{num: 3, name: '김구라', isMan: false}mem5 = mem1 이렇게 선언하게 되면 값 copy가 아닌 참조가 되어진다.
그렇게 때문에 mem1, mem5 중에 하나를 바꾸면 둘다 바꿔지게 된다.
C언어의 포인터 참조를 생각하면된다!
만약 참조가 아닌 값 복사를 하고 싶으면 object가 아닌 값을 대입하면 된다.
let mem1={num:1, name:"김구라", isMan:true};
let mem5={num:11, name:"김구라111"};
mem5.isMan = mem1.isMan;
mem1.isMan = false;
mem5.num = 3mem1
{num: 1, name: '김구라', isMan: false}
mem5
{num: 3, name: '김구라111', isMan: true}
+ 추가
let mem1={num:1, name:"김구라", isMan:true};
let mem2={num:1, name:"김구라", isMan:true};>> mem1 == mem2
>> falsemem1과 mem2는 object의 안의 내용은 같지만 참조하는 참조값이 다르기 때문에 mem1과 mem2는 같지않다.
'WEB' 카테고리의 다른 글
| [JavaScript] dataType 합치기 / array + object (0) | 2021.10.08 |
|---|---|
| [JavaScript] dataType / arrayType / splice() / push() / length (0) | 2021.10.08 |
| [JavaScript] 함수 (0) | 2021.10.07 |
| [HTML] a / anchor / 하이퍼링크 / 책갈피 / 전화, 메일 화면 이동 (0) | 2021.10.07 |
| [HTML] form 폼 / 폼 요소 작성하기 / form, label, input (0) | 2021.10.07 |
