[JS] 변수, 데이터 타입

동적(화면에서 변화, 인터렉션) 기능 제작을 위해 사용되는 프로그래밍 언어. 

ex) 이미지 슬라이드 효과, 팝업 효과와 같은 화면에서의 변화나 사용자간의 인터렉션

응용 범위 : IoT/하이브리드 앱(web+moblie)/서버 개발 (클라이언트와 서버 양쪽 사용 가능.)

사용하는 방법: < script >태그 안의 src로 js파일 이름을 입력하여 연동시켜야 함!

확인하는 방법: 개발자 도구-console (f12/우클릭 크롬 개발자 검사)

---

자바 스크립트의 변수

 

변수 선언

구조: [ var 변수명 ; ]

var: 변수를 선언 하겠다.

메모리라는 공간에 영역을 할당 받는 과정=변수 선언... 넣기...

변수 초기화

구조: [ 변수명 = 데이터 ]

 

변수 선언과 초기화 동시에 하기: 

구조: [ var 변수명 = 데이터; ]

 

변수 안의 데이터 확인/출력

console.log(변수명);

콘솔에서 변수의 데이터를 확인하기

개발자 도구에 나와있는 그 콘솔이라는 도구에만 출력됨, 웹사이트에서는 NO출력(=사용자가 볼 수 없음)

document.write(변수명);

웹 화면에서 변수의 데이터를 출력하기

기본 설정으로는 Inline형식으로 출력되는 듯 하다.

웹화면/웹사이트에 데이터를 출력, 사용자가 볼 수 있다. 

 

출력 장소가 콘솔과 데이터 두 곳인가? 

 

 

변수 주의사항

• 숫자로 시작 불가. (st1/s1t 가능)
• 변수명은 최대한 자세히. (나중에 기억할 수 있게)
• 의미 불명확 단어 조합은 NO

---

데이터 타입 (8개)

String / Number /Function / Array / Object / Boolean / undefined / null

문자열 숫자 함수 배열 객체 불린 정의되지 않음 널

 

String :

" " / ' ' 안에 작성된 데이터

혼용 불가 (' " / " ' 이런거 X, 어퍼스트로피 조심, [ / ] 사용?)

---

Num

별도의 기호 없이 숫자 입력

---

Function

생성과 호출

생성 : function 키워드를 사용하여 생성 

호출: 함수 안에 있는 코드를 실행하겠다. 이름();

1) 변수 형태로 선언!

var 이름 = function(매개 변수){

return ... ;

}

 

2) function에 이름을 붙여줌!

function 이름 (매개 변수){

return ... ;

}

 

	var 먼저	function 먼저
구조	var [함수명] = function(매개 변수){ }	function [함수명](매개 변수){ }
function의 ( ) 위치	function 바로 뒤	함수명 바로 뒤
함수 이름 위치	var 바로 뒤	function 바로 뒤
공통점	함수 내용물은 { }로 표기 안쪽 내용물 끝에는 ; 함수 호출 형태는 [함수명]();

* 뺴먹지 말자 [ ; ] 

1) 함수의 중괄호 안의 내용물 마지막 끝은 항상 ; 로 마무리

2) 함수 호출하고 나서도 ; 마무리

함수의 구성요소(비유)

구성요소

 

함수(커피머신): 

매개변수(투입구): 인자로부터 전달받은 값이 들어가는 통로, (상황 따라)생략 가능

인자(원두): 함수에게 전달하는 데이터

(인자에 넣은 값이 매개변수라는 통로를 따라 들어가 함수 안으로 들어간다. 함수 내 계산에 쓰이는 변수인 듯)

return(커피) 함수 안에 넘겨받은 데이터를 사용하여 연산후 결과물(데이터)를 저장하고 호출한 쪽으로 반환할 때 사용

 

연습

area라는 함수 이름 / 매개변수로는 width height / 리턴 값은 result에 넣어라 /area 함수를 콘솔에 출력하라.

 

---

Array 배열

비슷한 성격을 갖고 있는 데이터를 하나의 변수 안에서 관리파이썬의 리스트와 비슷한 듯..?

인덱스: 좌표값(index), 0부터 시작.

데이터 변경 방법: 인덱스를 사용, 접근 후 새로운 데이터 대임. //변수명[인덱스]=[바꿀 데이터]

---

객체 오브젝트

= [프로퍼티, 메서드, 데이터]

* 여러 종류의 데이터를 오브젝트라는 객체로 묶을 수 있다.

* <프로퍼티: 데이터> 뒤에 [ , ] 빼먹지 말 것

 

프로퍼티	메서드	데이터
이름표 객체가 가진 데이터 이름을 가진 데이터	객체가 가진 함수들 이름을 가진 함수들	내용물 (문자/숫자/배열...모두 OK)

 

1) 출력 방법

객체명.프로퍼티명
객체명['프로퍼티명']

 

2) 데이터 변경 방법

객체명.프로퍼티명 = 변경할 데이터

객체명['프로퍼티명'] = 변경할 데이터

 

vs 배열

배열: 인덱스와 값

객체: 프로퍼티와 데이터+메서드

 

실수 모음(넣고 빼고 헷갈리지 말기..)

var 객체명과 중괄호 사이의 [ = ]안 씀

<프로퍼티: 데이터> 쓰고 , 안 씀 (; 아님 여긴)

매서드 안쪽의 함수 중괄호 안에 ; 안 씀

객체 중괄호 안쪽에 ; 씀 (안 씀)

출력시 객체명 쓰고 [ ] 안에 '  ' 안 씀 -- 잊지 말자 [ ] 안쪽에 ' '

 

 

 

---

undifined vs null

undifined	null
변수 안에 데이터를 입력하지 않은 상태 (데이터가 없는 것)	개발자가 임의로 변수 안에 빈 데이터를 삽입한 상태 (빈 데이터를 명시적으로 지정한 것)
변수 선언 O 변수 초기화 X	변수 선언 O 변수 초기화 O (빈 데이터로)
var example)unde;	var example_empty = null;

---

Boolean

참(true) 혹은 거짓(false) 데이터가 들어가 있는 상태

조건문 많이 사용 예정