해당 그림은 "어떤 과정을 통해 화면에 출력하는가"를 설명
live server : 존재하는 해당 파일의 내용만 응답

• css
  디자인 결정

• javascript
  동작 또는 동작 준비
  특정 시점에 실행할 javascript를 function 안에 모아두고 call
  이 때 사용하는 데이터는 변수 혹은 상수 안에 들어있다

연산을 한 그 위치는 연산의 결과 값으로 대체가 된다

1. console 창에 "hi"가 출력된다
2. undefined가 return된다
3. result2 변수가 만들어 지면서 undefined가 대입된다

Data Type

Number type

• 변수
  다른 값으로 변경 가능, 대체 가능

let 변수명 = value;

• 상수
  다른 값으로 변경 불가, 대체 불가

const 변수명 = value;

String type

' ', " ", ` ` 로 문자열 표현 가능

let myName = '박명수';
let yuorName  = "유재석";
let ourName = `정준하`;

Boolean Type

결과 : True와 False
해당 변수에 true와 false 로 값 대입, 비교연산의 결과로도 나타낼 수 있다
관례상 boolean 타입의 변수명은 대화식으로 정한다

let num1 = 10;
let myName = "박명수";

let isRun = true;				    -> true
let isWair = false;					-> false
let isEqual = myName == '박명수';	-> true
let isDifferent = num1 != 20;		-> true
let isGreater = num1 > 20;			-> false
let canEat = true;					-> true

object type

plain object type

순서가 중요하지 않은 여러 개의 데이터를 하나의 묶음으로 관리 가능
비어 있는 plain object를 만든 후 나중에 값을 대입하는 것이 가능

let 변수명 = {key1:value, key2:value, key3:value...};

let 변수명 = {};
변수명.key1 = value;
변수명.key2 = value;
변수명.key3 = value;

array type

순서가 중요한 데이터를 하나의 묶음으로 관리 가능
빈 배열을 만든 후 다음 값을 함수를 이용해 넣어주는 것이 가능

let 변수명 = [data1, data2, data3...];
let 변수명 = new Array();

let 변수명 = [];
변수명.push(data1);
변수명.push(data2);
변수명.push(data3);

변수명.length : 해당 변수의 길이
변수명.push() : 해당 변수에 데이터 삽입
-> 배열도 일종의 특별한 object

브라우저 내장 객체

math

수학에 관련된 object

document

문서 object

h1를 제어할 수 있는 object의 참조값을 반환
document.querySelector("h1");

해당 h1 요소의 텍스트를 "변경"으로 수정
document.querySelector("h1").innerText = "변경";

function type

특정 시점에 일괄 실행할 javascript를 모아 둘 수 있는 함수
javascript는 함수도 데이터이기 때문에 변수나 상수에 담을 수 있다
함수 참조, 호출 가능 (함수 또한 데이터)

1.기본
function 함수명(){};

2.이름이 없는 함수 
let 변수명 = function(){};

3.화살표 함수
let 변수명 = () => {};

브라우저 내장함수

alert( )

알림창, 호출 후 undefined를 return

confirm( )

호출 후 true, false를 return

prompt( )

클라이언트가 입력한 문자열을 가져온다. 입력 후 해당 값이 함수의 반환값으로 돌려준다.

undefined type

정의되지 않은 data type

function, object, array type 활용

변수에 대입할 때 값이 복사된 것이 아니라 참조를 저장
해당 키는 자동으로 할당되며 해당 데이터는 모두 heap 영역에 저장

return

어떤 값에 함수를 호출하는 이유
1. 단순히 호출해 어떤 동작을 야기하기 위해
2. 함수를 호출한 그 위치로 결과값을 가져오기 위해
만일 따로 return 값을 지정하지 않았다면 undefined를 return

함수의 return 값 예시

const myUtil = {
	version:"1.0",
	produce:function(){
		console.log("안녕하세요!");
		console.log("반갑습니다");
	},
	getGreeting:function(){
		const greet = "hello";
		return greet;
	},
	getMember:function(){
		return {num:1, name:"유재석", addr:"메뚜기 월드"};
	}
};

<총정리>
let a = myUtil                  -> object type
let b = myUtil.getMember;       -> function type
let c = myUtil.getMember()      -> object type
let d = myUtil.getMember().num  -> number type
let e = myUtil.getMember().name -> string type