230518 day32 개념 정리

자바스크립트 : 객체 기반의 스크립트 언어 

html - 웹의 내용을 작성 
css - 웹을 디자인 
자바스크립트 - 웹의 동작을 구현 

대부분의 웹 브라우저에 자바스크립트 인터프리터가 내장되있음 

자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어 
객체 지향형 프로그래밍, 함수형 프로그래밍 모두 표현 가능

자바스크립트로 html의 내용, 속성, 스타일 변경 가능 


자바스크립트 데이터 타입
자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있음
자료의 타입은 있지만 변수에 저장되는 값의 타입은 
언제든지 바꿀 수 있는 언어 -> 동적타입 언어이다
(자바스크립트, 파이썬 -  동적언어 /  자바  - 정적언어)

var, let, const
scope(스코프) : 변수 사용 범위
var : 예전에 쓰던 변수 선언
함수 스코프 
let : 최근에 쓰는 변수 선언 
블록 스코프 

전역 변수 
let a1 = 10;
var a2 = 10;

if(true) {
	var a = 10; 	// 전역 변수
}

지역 변수
function myFun() {
	var b = 10;	// 지역 변수
}

b = 20; -> 바깥에서 사용 불가능
a = 30; -> 사용 가능 -----------> 문제를 야기함 ---> var가 아니라 let을 사용


console.log(vae1);
vat var1 = 10;
let let1;
--------> 호이스팅으로 자동으로 변수의 선언부만 위로 끌어올림 ---> 입력된 값은 
같이 따라가지 못하고 undifined로 정의되버림 ---> var가 아니라 let을 사용
(var는 가능하지만 let은 같은 이름을 여러번 선언 불가능함)


숫자형 형변환 

alert(Number("123"))
-> 123
alert(Number("a123"))
-> NaN

alert(ParseInt("123"))
-> 123
alert(ParseInt("123a"))
-> 123
alert(ParseInt("a123"))
-> NaN

문자형 형변환 
- 암시적 변환
더하기 연산자는 숫자보다 문자열이 우선시되서 
숫자형이 문자형을 만나면 문자형으로 변환됨 
ex> "3" + "5" = 35

불린형 형변환 
숫자 0, 빈 문자열('', "", ``백틱), null, undefined, NaN 과 같이 직관적으로 비어있다고 
느껴지는 값들은 false로 변환, 그 외의 값은 다 true로 변환  
(문자 "0"이나 " " 공백이있는문자열은 true로 변환 )


함수 
하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록 
이러한 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행 가능 
프로그램을 짤 때 반복적으로 하는 일을 함수로 만듬 
- 서브프로그램 
- 프로그램 안에서 각각의 작은 기능을 수행 
- input과 output 중요함 
- function은 object(객체) -> 함수도 객체 역할이 가능함 
- 매개변수 : 함수 내에서 사용하기 위해 필요한 데이터 (투입구), 필요에 
따라서 있을 때도 없을 때도 있다

-------- function은 함수를 만들어주는 키워드
-------- 변수는 값을 넣는 것, 함수는 블럭에 실행문을 만드는 것
함수선언문, 함수표현식 차이점이 함수명 유무랑 호이스팅?


<매개변수 X>
function 출력() {
	출력
} 

<매개변수 O>
ex> function 빵 만들기( a,b [매개변수, 투입구, 인풋] ) {
	a와 b를 이용해서 빵 만들기
	return 초코빵 [아웃풋]
}

------- 매개변수가 들어가는 곳이 투입구, 투입구랑 인풋은 같은 맥락 

메소드와 함수의 차이점 
메소드는 앞에 객체(인스턴스메소드) or 클래스(정적메소드) 이름이 붙음 
ex> person.sound()

함수는 앞에 붙는 것 없이 실행 가능 
ex> function()


함수 선언문
// 호이스팅 되기 때문에 함수 정의 전에 호출을 먼저 사용해도 작동 가능 

function add(a+b) { // 함수 이름(매개변수) 
	return a+b;
}
add(10, 20)


함수 표현식 
// 호이스팅 되지 않아서 호출은 제일 아래에서 해줘야함 

let add2 = function(a,b) { // let 변수 = 함수(매개변수) 
-> 함수 이름이 없어서 변수에 함수를 저장하고 변수로 호출함 (익명함수)
	return a+b;
}
add2(10,20)


기본 매개변수 값 지정 
함수를 만들 때  매개변수에 디폴트 값 지정이 가능함 

나머지 매개변수 
매개변수 값이 정해지지 않았다면 배열 형태로 파라메터 전달이 가능
(배열이라서 for문 돌릴 수 있음)  
ex> function printAll(...args) { for~ { console~ } } ---> ... 이 매개변수임


리턴값
리턴이 없는 것은 return undefined가 생략된 것 


연습문제 
min(2, 5) == 2
min(3, -1) == -1
min(1, 1) == 1

<코드>
function min(a,b) {
        return a<b ? a : b;
       }
let result2 = min(10,6);
console.log(result2);


비교 연산자 
== 동등 연산자 : 값이 같다
ex> 10 == "10" : true
=== 일치 연산자 : 값과 타입이 같다 
ex> 10 == "10" : false

논리 연산자 
or || 연산자를 여러개 체이닝하면 
첫 번째 truthy가 나온 결과의 
불린형 변환 전 원래 값을 반환함 
모든 피연산자가 false로 나오는 경우 
마지막 피연산자의 원래 값을 반환함 

and && 연산자를 여러개 체이닝하면 
첫 번째 falsy가 나온 결과의 불린형 
변환 전 원래 값을 반환함 
모든 피연산자가 true로 나오는 경우
마지막 피연산자의 원래 값을 반환함