// 함수, Function
- 1급 객체, First class object
- 함수를 객체처럼 취급한다. > 함수를 값처럼 취급할 수 있다.
- 단독으로 사용될 수도 있고, new가 앞에 붙어 객체를 만드는 생성자로 쓰일 수도 있다.
1. 함수를 변수에 담을 수 있다.(저장)
2. 함수를 매개변수에 전달할 수 있다.
3. 함수를 반환값으로 사용할 수 있다.
- 함수를 만드는 방법
1. 함수 선언문
function m1(num) {
return 10;
}
2. 함수 표현식(리터럴)
- 익명 함수(Anonymous Function)
- 함수의 목적 : 함수를 변수에 넣기 위해서
> 함수를 독립적으로 사용할 의도가 전혀 없다.
- 이벤트에 함수를 사용하면 함수 오용 가능성이 없어 완전성, 가독성이 높아진다.
const n3 = function m3() {
console.log('m3');
}
3.화살표 함수, Arrow Function
- 자바의 람다 > 익명 객체의 추상 메서드를 표기하는 문법
- 자바스크립트의 화살표 함수 > 익명 함수를 표기하는 문법
- 화살표 함수 내의 this는 무조건 window를 참조한다.★★★
> 화살표 함수를 이벤트에 사용할 때는 주의해야 한다.
const n4 = () => {console.log('m3');};
~ 실행문 1줄이면 {} 생략 가능
const f4 = () => console.log('f4');
~ 매개변수가 하나면 () 생략 가능
const f6 = num => console.log(num);
~ 반환값이 유일하면 {}와 return문 생략 가능
const f9 = () => 200;
- 스트림
- 콜백 메서드, 콜백 함수 > Callback > 시스템(환경)에 의해서 호출되는 메서드
a. forEach() : 매개변수를 받아 요소 소모
b. map() : 앞의 요소를 가공해서 다른 요소로 반환
c. filter() : 조건에 부합되는 요소만 반환
---------↓ES6↓----------
d. find() : 요소 검색
let n3 = function m3() {
console.log('m3');
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>function</title>
</head>
<body>
<h1>Function</h1>
<h2>Basic</h2>
<ul>
<script>
function two() {
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
}
document.write('<li>1</li>');
two();
document.write('<li>3</li>')
two();
</script>
</ul>
<h2>Parameter & Argument</h2>
<script>
function sum(n1, n2) {
document.write(n1 + n2 + '<br>');
}
sum(3,4);
sum(1,5);
</script>
<h2>Return</h2>
<script>
function sum2(n1, n2) {
return n1+n2;
}
document.write(sum2(2,3) + '<br>')
document.write('<div style="color:red">' + sum2(2,3) + '</div>')
document.write('<div style="font-size:3rem;">' + sum2(2,3) + '</div>')
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WEB1</title>
<script>
function linksSetColor(color) {
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length) {
alist[i].style.color = color;
i++;
}
}
function bodySetColor(color) {
document.querySelector('body').style.color = color;
}
function bodySetBackgroundColor(color) {
document.querySelector('body').style.backgroundColor = color;
}
function nightDayHandler(self){
if(self.value === 'night') {
bodySetBackgroundColor('black');
bodySetColor('white');
self.value = 'day'
linksSetColor('powderblue');
} else {
bodySetBackgroundColor('white');
bodySetColor('black');
self.value = 'night'
linksSetColor('blue');
}
}
</script>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
<o1>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</o1>
<h2>JavaScript</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. A met error illum, assumenda odit accusamus voluptate reiciendis quisquam, distinctio a pariatur similique? Reiciendis earum assumenda veniam facere, ex debitis cumque consequatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam hic, quo voluptatum laborum consequatur eius quas! Earum saepe asperiores impedit voluptatum eaque incidunt cupiditate quos vitae itaque. Tempore, numquam facilis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, ratione doloribus error, officia facere impedit sed atque quidem, accusamus deserunt quis recusandae reiciendis id illo repudiandae dicta est. Reiciendis, fuga?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo assumenda corrupti ratione beatae libero, nostrum omnis odit cumque explicabo repellendus. Quas placeat aperiam facilis sunt cumque, in quisquam ratione et.
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<button type="button" name="btn1">버튼</button>
<button type="button" name="btn2">버튼</button>
<script>
let n1;
function f1() {
console.log('f1');
}
console.log(typeof n1); //undefined
console.log(typeof f1); //function
n1 = 10;
console.log(typeof n1); //number
n1 = 'AAA'; //원래는 이렇게 넣을 수 없음. 계속 같은 자료형으로 넣기
console.log(typeof n1);
n1 = f1; //함수명이 가지고 있는 주소값을 복사
console.log(typeof n1); //function
// n1(); //이상하게 보일 수 있지만 f1 함수가 호출됨.
// btn1.onclick = m1;
function m2() {
console.log('m2');
}
let n2 = m2;
n2();
// 함수의 목적 : 함수를 변수에 넣기 위해서
// > 함수를 독립적으로 사용할 의도가 전혀 없다.
let n3 = function m3() {
console.log('m3');
}
n3();
//함수 리터럴 = 익명 함수
let n4 = function() {};
n4();
//익명함수 호출2 > 즉시 호출
(function() {
console.log('익명함수2');
})(); // 뒤에 붙는 (): 매개변수 리스트
document.all.btn1.onmousedown = m5;
//버튼의 클릭을 위해서 만들어진 전용 함수 > 가독성 저하
function m5() {
alert(event.buttons);
// console.log(event = null);
}
//독립적으로 호출
// m5();
//익명함수를 이벤트 함수로 사용!! > 함수 오용 x > 완전성, 가독성
document.all.btn2.onmousedown= function(){
alert(event.buttons);
};
function a6() {
console.log('a6');
}
function a7(temp) { //temp = a6
console.log('a7');
}
a7(a6); //매개변수로 함수를 전달
// setTimeout(m8, 1000);
// function m8() {
// alert('beep');
// }
// setTimeout(function() {
// alert('beep!');
// }, 1000);
function a9() {
console.log('a9');
};
function a10() {
return a9; //함수 자체를 반환값으로 사용
}
let result = a10();
result(); //a9();
a10()();
//사용자 정의 객체
let hong = {
name: '홍길동',
age: 20,
address: '서울시 강남구',
hello: function() {
//객체 메서드
console.log('안녕하세요. 저는' + this.name + '입니다.');
}
};
console.log(hong.name);
hong.hello();
</script>
</body>
</html>- 스트림
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<input type="button" id="btn1" value="확인">
<script>
//find
const mlist = ['홍길동', '아무개', '하하하', '호호호', '후후후'];
//요구사항] '하'씨가 있습니까?
for (let i = 0; i < mlist.length; i++) {
if (mlist[i].startsWith('하')) {
console.log(mlist[i]);
break;
}
}
console.log(mlist.find(name => name.startsWith('하')));
</script>
</body>
</html>
//bind
- this를 내부적으로 고정시킬 때 사용한다.
- 호출한 함수를 변경하는 것이 아니라, 인자로 받은 조건을 만족하는 새로운 함수를 리턴한다.
var hanee = {name:'hanee', first:10, second:20}
var han = {name:'han', first:10, second:10}
function sum(prefix) {
return prefix + (this.first + this.second);
}
var haneeSum = sum.bind(hanee, '-> ');
console.log('haneeSum()', haneeSum());
'클라이언트 > JavaScript' 카테고리의 다른 글
| [자바스크립트(JavaScript)] 파일 쪼개기 (0) | 2023.03.22 |
|---|---|
| [자바스크립트(JavaScript)] 객체 (0) | 2023.03.19 |
| [자바스크립트(JavaScript)] 제어문(조건문, 반복문) (0) | 2023.03.19 |
| [자바스크립트(JavaScript)] 배열(Array) (0) | 2023.03.18 |
| [자바스크립트(JavaScript)] Date (0) | 2023.03.18 |
