function 함수
<script>
// function : 함수 - 자바의 메서드와 같은 개념
// hoisting : 함수의 선언은 코드상 어디에 작성해도, 모든 스크립트 코드의 '최상위'에 선언된 것으로 처리 됨.
// 매개변수의 자료형이 없다> 명시적 자료형이 없다.
function plus(num1,num2) { // 보통은 함수를 상단에다 만드는 것이 일반적
return num1+num2;
}
let result = plus(10,5); // 15 리턴해서 변수 result 에 저장
console.log(result);
</script>
> First Class Function : 일등급 함수라는 뜻
* 함수의 이름에 의미가 부여된다.
cpu는 ram에 기억된 내용만 처리할 수 있음
- 4개의 영역에서 관리된다.
- 우리가 작성한 소스 코드를 이진수로 바꾸는 작업 > 컴파일
- cpu에 의해 실행이 되어야 함(저장이 되어 있어야 함)
- 컴파일된 소스 코드는 text 영역으로 들어가서 저장됨
- Stack 영역 : 변수를 만들면 변수 이름을 통해 직접 접근 가능하다
- Heap 영역 : 데이터는 변수를 만들고 직접 변수 이름으로 접근하는 것이 아니라, 주소를 통해 접근
- text영역: 함수의 이름으로 접근, 해당 함수의 기계어 코드로 접근하는 것을 의미함
함수가 호출되면 해당 기계어 코드가 실행되어 해당 함수의 기능이 수행됨
* 함수가 가지고 있는 소스코드가 저장된 메모리 공간의 주소
(정리) * 자바에서는 존재하지 않음
자바스크립트의 function은 first class function(일등급함수)이라고도 하는데
함수의 이름을 하나의 주소값으로서 다룰 수 있다.
<script>
// function : 함수 - 자바의 메서드와 같은 개념
// hoisting : 함수의 선언은 코드상 어디에 작성해도, 모든 스크립트 코드의 '최상위'에 선언된 것으로 처리 됨.
// 매개변수의 자료형이 없다> 명시적 자료형이 없다.
function plus(num1, num2) { // 보통은 함수를 상단에다 만드는 것이 일반적
return num1 + num2;
}
// 함수의 이름은 해당 함수 객체의 참조를 가리키는 변수처럼 동작함
let abc = plus;
// 함수를 변수에 할당 가능,
// 변수 abc는 plus 함수 객체를 가리키는 것이 된다.
// 결국, 두 변수 모두 같은 함수 객체를 참조하게 된다.
// 실제로 변수 abc에 할당된 것은 함수의 주소 이며,
// 이 주소를 통해 해당 함수를 호출할 수 있음
let result = abc(20, 30);
// 따라서 abc(20,30)은 plus(20,30)과 동일한 결과를 반환함
console.log(result);
// <자바스크립트의 일급 객체>
// 함수를 변수에 할당하거나, 다른 함수의 매개변수로 전달하거나
// 함수에서 반환할 수 있음 => 함수를 자유롭게 다룰 수 있음
</script>
익명함수 생성하여 변수에 담기
// 익명함수 : 이름이 없는 함수, 변수에 할당되거나,
// 다른 함수의 매개변수로 전달될 때 주로 사용됨
let result2 = (function(num1,num2){
return num1*num2;
})(3,10);
// 함수를 소괄호로 감싸고 바로 메소드 콜하여 인자값을 넘겨주는 형태
// 이 함수는 딱 한번만 쓰여지고 버려지는 일회용 함수
// 이 함수는 주소값을 모른다.
// IIFE(Instantly Invoked Function Expression)
console.log(result2); // 30 출력
함수를 인자로 전달할 수 있고 함수가 다른 함수를 반환할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=script, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function plus(num1, num2) {
return num1 + num2;
}
function minus(num1, num2) {
return num1 - num2;
}
function temp(func, num1, num2) {
return func(num1, num2);
}
let result = temp(
function (num1, num2) {
return num1 * num2
}, 10, 5);
console.log(result); // 50
// 이 코드가 무슨 의미를 가지고 있는 지 생각해야함
// 함수의 주소를 인자값으로 넘기고 있는 상황
function test() {
return function (num1, num2) {
return num1 / num2;
}; //리턴값에 함수를 넣어준 상태
}
let result2 = test()(10, 2) //5
let result2 = test()(); //NaN
let result2 = test();
//ƒ (num1, num2) {
return num1 / num2;
}
let result2 = test;
//ƒ test() {
return function (num1, num2) {
return num1 / num2;
};
} // console로 출력했을 때
// > test의 주솟값이 출력되는 것
console.log(result2);
</script>
</body>
</html>
JavaScript 에서 Event란?
- 브라우저 위에서 취하는 모든 행동
(좌클릭, 마우스 움직임, 키보드 타이핑, 마우스 휠 움직임, 브라우저 크기 조정 등등..)
Event Source : 이벤트 발생의 근원 Element
Event Listener : 근원 Element가 감지할 수 있는 이벤트 종류
Event Handler : 이벤트 발생 시 처리 동작을 가지는 함수
pop 버튼 인스턴스의 주소를 담아보세요
자바스크립트에서 변수에 할당되는 것은 해당 값의 메모리 주소가 됨
따라서 document.getElementById('pop');은 문서에서 id가 pop인,
요소의 메모리 주소를 반환하고 , 이 메모리 주소를 변수 btn에 할당
> 즉, btn 변수엔 pop 버튼 요소의 메모리 주소가 저장되어 있음
> 이를 통해 해당 요소에 접근하고 조작할 수 있음
> > 변수에 인스턴스의 주소를 담는다는 뜻
<script>
// Event
let btn = document.getElementById('pop'); //pop 버튼 인스턴스의 주소를 담아보세요.
btn.onclick = function () {
alert("Pop!");
};
// 버튼-> Event Source
// onclick-> Event Listener
// function(){} -> Event handler
</script>
함수 pop을 위에서 만들었다면 바뀔 소스
<button id="pop">Pop!</button>
<script>
// Event
function pop() {
alert('pop!');
}
let btn = document.getElementById('pop'); //pop 버튼 인스턴스의 주소를 담아보세요.
btn.onclick = pop; // 함수의 주소를 넣어줘야한다.
// btn.onclick=pop(); > 오류 : 함수를 콜한것 , 실행하자마자 팝업창에 띄어지게됨
</script>
parseInt, Number
<script>
console.log(parseInt("10") + Number("10"));
// parseInt: 정수로 변환
// Number : 숫자로 변환
</script>'2024_풀스택학원 > Back-end' 카테고리의 다른 글
| [JSP] MVC2 (0) | 2024.05.24 |
|---|---|
| [JSP] WAS, Tomcat 설치 , Servlet (0) | 2024.05.22 |
| [Java] JDBC_03_Login (0) | 2024.05.02 |
| [Java] JDBC_02_Contact (0) | 2024.05.02 |
| [Java] JDBC_mini_board (1) | 2024.05.02 |
