728x90
function helloFunc() {
console.log(1234);
}
helloFunc();
function returnFunc() {
return 123;
}
const result = returnFunc();
console.log(result);
- 함수를 사용할 때는 () 로 실행시킨다.
java 에서의 함수처럼 return 값을 줄 수 있는 것을 확인할 수 있다.
또한 java 에서는 함수를 생성할 때 return type 을 지정해주었어야 했는데 여기서는 그렇지 않은 것을 알 수 있다.
js 에서는 변수의 자료형을 지정하지 않는 것처럼 return 값이 있더라도 return 값을 지정해주지 않는다.
- 익명함수라는 것은 변수에 함수를 대입하는 것을 의미한다.
js 에서는 함수 자체도 데이터로 취급하기 때문에 변수에 저장할 수 있다.
사용할 때는 변수명으로 사용하면 된다.
function hello() {
console.log('Hello');
}
hello();
// 이름이 없는 함수이다.
const world = function () {
console.log('World');
}
world();
// HTML 문서 클릭시 handler 이벤트가 호출되는 코드이다.
function handler(){
console.log('Clicked');
}
document.body.addEventListener('click', handler);
// 함수를 재사용할 필요가 없다면 익명함수를 사용하는 것이 편리하다.
document.body.addEventListener('click', function () {
console.log('Clicked!');
})
- 이름이 없는 함수를 변수에 대입하는 과정을 보면 오른쪽 항에서 함수를 선언할 때 이름이 없다.
이 이름없는 함수를 변수에 대입을 하면 변수의 이름이 곧 함수의 이름이 됩니다.
함수를 호출할 때는 변수 이름과 함수 이름을 호출하는 방식이 같습니다.
그런데, 이러면 의문이 하나 듭니다.
사용하는 방법까지 같은데, 왜 익명함수를 사용할까요?
왜냐하면 함수를 재사용할 필요가 없을 때 익명함수를 사용하는 것이 편리한 경우가 있기 때문입니다.
function add1(a, b) {
return a + b;
}
const add2 = (a, b) => a + b;
console.log(add1(1, 2));
console.log(add2(1, 2));
- 화살표 함수는 function 키워드와 { } 중괄호, return 키워드도 없다.
흔히 람다식 함수라고 부른다.
// 일반함수 안에서 this 는 이 일반함수를 호출하는 객체를 가리킨다.
// 따라서 호출하는 위치에 따라서 this 는 달리진다.
const people = {
name: 'gildong',
say: function() {
console.log(this);
}
}
people.say();
const sayPeople = people.say;
sayPeople();
// 따라서 위의 saypeople() 함수는 호출하는 객체 없이 실행되었기 때문에
// 전역에서 호출된 것으로 js 는 인식한다.
// 이에 따라서 여기서 사용되는 this 는 전역 객체인 window 를 호출하게 된다.
- 일반함수에서 사용되는 this 는 이 일반함수를 호출하는 객체를 가리킨다는 것을 잊지말자.
const people = {
name: 'gildong',
age: 10,
say: () => { // 화살표 함수 안에서는 this 가 존재하지 않는다.
console.log(this);
}
}
people.say();
const sayPeople = people.say;
sayPeople();
// this 는 화살표 함수 안에 존재할 수 없기 때문에 존재할 수 있는 상위
// 스코프로 올라가게 되는데, 이번 경우에는 전역에서 this 가 사용되어
// 출력되는 것을 볼 수 있다.
- 화살표 함수에서 this 는 존재할 수 없기 때문에 상위 스코프로 올라가서 window 가 출력된 것을 볼 수 있다.
document.addEventListener('DOMContentLoaded', () => {
const btn1 = document.getElementById("btn1");
const btn2 = document.getElementById("btn2");
btn1.onclick = function () {
alert(this);
this.textContent = '버튼이름변경';
};
btn2.onclick = () => {
alert(this);
};
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../Javascript/this2.js"></script>
</head>
<body>
<button id="btn1">일반함수</button>
<button id="btn2">화살표함수</button>
</body>
</html>
- 일반함수에서 사용되는 this 는 일반 함수를 사용한 객체를 가리키기 때문에
this.textContent = '버튼이름변경'
이라는 코드가 정상적으로 동작하지만, 화살표 함수에서 사용된 this 는 상위 스코프를 향하기 때문에
같은 this.textContent = '버튼이름변경' 이라는 코드를 사용하더라도 우리가 원하는대로 동작하지 않는다.
let result = 0;
function minus(n, m) {
result = n-m;
return result;
}
console.log(minus(5,3));
const result2 = (n, m) => n-m;
console.log(result2(5,3));
function printStar (n, m) {
for (let i = 0; i < m; i++) {
let result = "";
for (let j = 0; j < n; j++) {
result = result + "*"
}
console.log(result);
}
}
console.log(printStar(6,2));
function listAdd () {
const arr = [1, 'aa', true, 5, 10];
let result = 0;
for (let i = 0; i < arr.length; i++) {
if (typeof arr[i] == 'number') {
result = result + arr[i];
}
}
console.log(result);
}
listAdd();
'[그린컴퓨터] 클라이언트 > Javascript' 카테고리의 다른 글
| 동기(Sync)와 비동기(Async) { 일반함수와 콜스택메모리, 비동기함수(setTimeout) 처리과정 } (0) | 2023.06.30 |
|---|---|
| DOM API { DOM API 기본, defer 속성, addEventListener, forEach, textContent } (0) | 2023.06.30 |
| 프로토타입과 상속 { prototype, __proto__ } (0) | 2023.06.30 |
| 연산자, 조건문 (0) | 2023.06.29 |
| Javascript 개요, 변수&상수, 데이터종류(자료형), JSON&XML 맛보기, 기본&객체자료형 (0) | 2023.06.29 |