JS 변수와 데이터타입 - 2

📌학습 내용

📖데이터타입

💡 (4) [원시타입] undefined

-변수를 선언만 해둬 값이 비어있는 상태

💡 (5) [원시타입] null

-변수 초기화로써 명시적으로 '빈 값'을 변수 안에 할당해줌
-console.log(typeof null); 출력 시 데이터 타입이 object로 보이는 태생적인 버그가 있으나 데이터타입은 null임

참고
console.log(typeof datatype);: 변수값이 어떤 데이터인지 알려줌

💡 null과 undefined

-연산자와 결합하여 쓸 때 null은 0으로 인식하지만 undefined는 숫자가 아닌 것으로 인식함

💡 (6) [참조타입] 함수 (function)

-함수(function)란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록

▪▪▪ 함수 선언과 호출(turn-on)

선언만 된 상태에서는 아무 기능도 하지 않음

호출을 해줌으로써 결과값을 출력해내며, 필요할 때마다 반복적으로 호출할 수 있음

▪▪▪ 매개변수(Parameter)와 인수(Argument)
함수로 필요한 작업을 수행하려면 매개변수와 인수가 필수

매개변수와 인수를 이용하여 임의의 두 숫자를 덧셈하는 함수를 선언하여 값 출력하기

매개변수에는 모든 데이터타입을 적용 가능함

숫자와 문자 데이터를 조합하여 값 출력하기

변수 선언과 초기화를 실행문으로 넣어 값 출력하기

주의
매개변수와 인수는 쌍을 이루어야 정확한 결과값을 출력할 수 있다.
아래는 height 인수가 주어지지 않아 undefined가 할당되어 숫자가 아니라는 의미의 NaN이 출력된 것이다.

▪▪▪ 반환문(return)
함수를 호출 했을 때, 함수를 호출한 해당 부분으로 값이 반환되어 나오는 것

다른 변수에 값을 전달할 때 사용

전달받는 값을 새로운 공식에 대입할 때 사용

참고
강사님 브런치: https://brunch.co.kr/@brunch92ny/9#comment
return은 함수의 끝을 선언할 때 쓴다고 하는데 강사님 브런치에 '논개' 설명과 같은 맥락인 것 같다.

💡 (7) [참조타입] 배열 (Array)

-유사한 성격의 데이터를 하나의 변수에 담음
-배열 안에는 모든 데이터타입이 들어갈 수 있음
-가능하면 한 배열 안에는 동일한 데이터타입, 동일한 성격의 데이터들을 넣을 것

▪ 인덱스(Index)
배열에서 데이터의 순서를 나타냄 (0부터 시작)

인덱스로 특정 데이터 수정도 가능함

▪ 배열 데이터 접근 방법

💡 (7) [참조타입] 객체 (Object)

-여러 property를 하나의 변수 안에 담아냄
-property = key: value
var 변수 = { key: value, key: value }

▪ value 접근 방법

▪ value 변경

▪ 새로운 property 추가

▪ 객체 속 함수: 메서드(method)
객체 속에 property로서의 함수는 메서드라고 부르며, key값으로 함수명이 주어지기 때문에 function 옆에 함수명을 작성하지 않아도 됨

메서드를 활용하여 객체를 다른 변수에 적용하기

📖원시 타입 vs 참조 타입

💡원시 타입

-원본과 복사본은 각각 별도의 메모리 공간에 저장되어 서로 영향을 줄 수 없다.

💡참조 타입

-원본과 복사본은 동일한 메모리 주소를 참고하기 때문에 해당 주소의 데이터 값이 변경되면 원본과 복사본 모두 영향을 준다.

참고
강사님 브런치: https://brunch.co.kr/@brunch92ny/10
얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy):
https://whales.tistory.com/m/54

📖실습

▪ JS에서 html에 접근하기
var 변수명 = document.getElementById();

📎html

	<div id="color_bg">
		
		<button id="btn" type="button">클릭</button>

	</div>

참고
document.getElementById에서 document는 html 문서에 접근해 영향을 미치는 객체이며 getElementById는 메서드
console.log의 경우도 마찬가지 형태

▪ 숫자 제어 객체인 math를 이용해 1~6 사이의 숫자를 랜덤하게 가져오기
Math.random(): 0~0.9999... 사이의 숫자를 랜덤하게 가져옴

6을 곱해줌으로써 랜덤 숫자의 영역을 0 ~ 5.9999로 확장함

Math.floor(Math.random() * 6) : 숫자를 내림 처리해 소수점 이하를 숨겨 0 ~ 5로 만들어줌

Math.floor(Math.random() * 6) + 1): 1을 더해 범위를 0 ~ 6으로 만들어줌

▪ 버튼을 클릭할 때마다 배경색이 바뀌게 만들기
JS 이벤트 동작시키기
html요소.addEventListener(인수1, 익명함수() { })

addEventListener: 인수1이 발생하면 인수2를 호출하는 이벤트 동작 개체
인수1은 이벤트를 발생시키는 동작을 문자데이터로, 인수2는 함수를 함수명 없이 적용해야 함 (콜백함수)

주의
CSS에서 여러 단어로 이어진 속성은 -로 구분되지만 JS에서는 camelCase가 사용됨
예) CSS background-color / JS backgroundColor

콜백함수
함수 내부에서 매개변수로 전달되어 특정 시점에 호출되는 함수
https://rypro.tistory.com/153

📌어려운 점

(1) !null이 왜 true인가
(2) html에 연동시켜 객체와 함수를 이용해서 기능을 구현하는 점이 아직 어렵다.

📌해결방법

(1) 검색을 해봤는데 정확하게 이 부분을 설명하는 부분은 못 찾아서.. 빈 값이 아님 = 값이 존재 = true로 일단 이해함
(2) 머리에 잘 정리해두고 연습하는 수밖에!

📌느낀 점

JS까지 html에 연동시켜 기능을 구현해내는 게 재미있으면서도 동시에 머리가 복잡해진다.😂