3일차(1) Javascript 기초 : dataType (object, array)
[javascript 데이터 타입]
1) number
2) string
3) boolean
4) object
프로그래밍이란 특정 시점에 데이터, 정보를 다루는 일.
언어를 배울 때는 그 언어에서 다루는 데이터 타입을 알아야한다. 데이터 타입을 알고 어떻게 만드는지와 활용법 알기
2022.10.06 - [국비교육] - 2일차(7)/javascript 기초 : data type
(지난 게시물 예제3 참조)
[데이터타입별 작성방법]
(let이라는 예약어로 변수 만들기)
1) 그냥 작성함. let a=10;
- type:숫자 value:10
2) 그냥 적으면 '바나나'라는 이름으로 만들어진 변수를 찾는 명령문이 된다. 따옴표로 감싼 "바나나"로 작성
- let b='바나나'; "" '' `` 다 사용가능.
- type:문자 value:바나나
3) 참/거짓을 따짐.
- let c = false; → type:불리언 value:false
- let c = 10>5;
- let c = 10==5;
4) {} 를 사용 : object 타입(여러개의 데이터를 하나의 묶음으로 관리하고 싶을 때)
- let d={};
→ { key:value , key2:value2 , key3:value3, ... } 형태로 작성
- 사전(dictionary)과 같은 형태로 관리 : 특정 단어key를 찾으면 거기에 해당되는 뜻value이 있음!
숫자나 순서를 부여할 수도 있다.(순서가 중요할 경우)
- console 창에서 typeof 로 데이터의 데이터타입 확인 가능
mem1.num > 1
mem1.name > '바나나'
mem1.isMan > true
데이터를 . 을 사용해서 지칭하는 것은 두가지 목적이 있다. : 1)불러오거나, 2)수정하거나
1) 값을 불러온다:
let num1=mem1.num; → mem1.num을 불러와서 num1이라는 변수로 지정
alert(mem1.num); → mem1.num을 불러와서 알림창을 띄움
console.log(mem1.num); → mem1.num을 불러와서 console에 나타나게 함
2) 값을 수정한다.(새 값을 넣어주는 것)
mem1.num=999; → mem1.num의 값을 999로 수정
- 대입연산자의 좌측에서 참조하면 값을 수정할 수 있다.
(좌측에서 참조하면 동작이 반대가 된다고 생각하면 됨!)
- object 안에는 순서 개념이 없다.
key 값으로 무언가를 찾는 것이 중요할 뿐, 순서가 중요한 게 아니다.
→ 순서가 중요하다면 object에 넣으면 안 된다!
→ 데이터를 관리할 때 key 값이 중요한지, 데이터의 순서가 중요한지 판단하여 코드를 작성해야 한다.
ex) 대단지아파트에 호실을 번호가 아닌 이름으로 부여한다면? 혼란스러울 것이다.
순서가 있어야만 찾아가기 편한 데이터가 있다!
★ array type : [ ] , 순서가 중요한 데이터에서 사용
- object{ } 는 key와 value가 다 필요한데
array[ ] 는 그냥 순서대로 배열만 해서 넣으면 된다.
- let foods=["삼겹살", "치킨", "김치찌개", "냉면", "햄버거"];
- array 데이터에는 자동적으로 인덱스가 부여되며, 인덱스는 0번부터 시작한다!
ex) foods[1] → '치킨'
□□. 점이 있다면 object type
□□[ ] 대괄호가 있다면 array type
□□( ) 소괄호가 있다면 function type
- foods는 object type이면서 array type이다. object type의 부분집합으로 array가 있는 것!
array는 object의 일종이다.(즉 모든 array는 object이기도 하지만, 모든 object가 array인것은 아님)
→ array type에도 . 점을 사용할 수 있다.
foods.length(아이템의 개수) > 5
foods.push > f 함수타입이 들어있다
foods.splice > f 함수타입이 들어있다
→ let foods={length:5, push:f, splice:f}
(사전에 length, push, splice라는 방을 만든적이 없지만, js에서 기본적으로 제공해 주는 것. 'built-in 함수')
- .push(item) : 배열의 마지막에 추가
- .pop(item) : 배열의 마지막 것을 삭제
- .splice(item) : n번째 인덱스에서 n개를 삭제
- .unshift(item) : 아이템을 배열의 맨앞에 추가
<예제4> : object type과 array 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_dataType4</title>
</head>
<body>
<h1>javascript 데이터 type</h1>
<script>
//상품 순서가 하나의 정보라고 가정
//순서가 중요치 않은 데이터
let obj={num:1, name:"삼겹살", price:"10,000원"}
let obj2={name:"삼겹살", num:1, price:"10,000원"}
/*
내가 좋아하는 음식 순서 <순서가 중요>
삼겹살, 치킨, 김치찌개, 냉면, 햄버거
*/
let foods=["삼겹살", "치킨", "김치찌개", "냉면", "햄버거"];
//배열의 특정 인덱스에 저장된 item을 변수에 담기
let a=foods[0];
let b=foods[1];
//배열의 특정 인덱스에 저장된 item을 수정하기
foods[0]="라면";
foods[1]="짬뽕";
//배열의 크기 참조해서 변수에 담기
let size=foods.length;
//배열에 item 추가하기
foods.push("피자");
//배열의 특정 인덱스에 저장된 item 삭제하기
foods.splice(2,1); //2번째 인덱스로부터 1개 삭제
//배열의 마지막 인덱스에 있는 아이템을 삭제하면서 가지고오기
let result=foods.pop();
</script>
</body>
</html>
**함수를 사용(call)하는 방법: food.push ( )
document.querySelector( )
alert( )
console.log( )
이전에 사용했던 것도 모두 함수이다.
함수란 어떤 동작을 모아놓고 특정 시점에 사용할 수 있게 해주는 것!
'국비교육(22-23)' 카테고리의 다른 글
| 3일차(3)/javascript 기초 : function(1) (0) | 2022.10.07 |
|---|---|
| 3일차(2)/javascript 기초 : dataType (0) | 2022.10.07 |
| 2일차(7)/javascript 기초 : dataType (1) | 2022.10.06 |
| 2일차(6)/Javascript 기초 (0) | 2022.10.06 |
| 2일차(5)/HTML 기초 : <a> (0) | 2022.10.06 |