📝 JavaScript
🖥️ 1. 함수
1-1. 함수의 정의 (선언) 방법
function 함수이름(){
.. 실행할 구문 ..
}
- 함수를 정의하기 위해서는
function이라는 예약어 뒤에 함수의 이름과 괄호()를 사용하여 선언하고, 그 뒤에 대괄호{..} 블록을 생성하여 실행할 구문을 기술한다.
EX1)
<body>
<script>
// 함수 선언
function sayHello(){
document.write("<h1>안녕하세요</h1>")
}
sayHello();
sayHello();
</script>
</body>EX2)
<body>
<script>
function f(x){
var y = x + 1;
document.write("<h1>" + y + "</h1>");
}
f(2);
f(10);
f("안녕");
</script>
</body>1-2. 함수의 호출
함수이름();
EX)
<body>
<script>
function f(x, y){
var z = x + y;
document.write("<h1>" + z + "</h1>");
}
f(2,1);
f(3,5);
</script>
</body>1-3. return문
<body>
<script>
function f(x, y){
var z = x + y;
if( z < 10 ){
/* 자바스크립트에서 함수는 처리 도중 return문을 만나게 되면 그 즉시 실행을 중단
이러한 특성을 이용하여 충족되지 않을 경우 등에 대한 처리 중단을 목적으로 return문을
사용할 수 있으며, 리턴값 없이 처리를 중단하고자 할 경우 return 키워드만 사용 */
return;
}
return z;
}
document.write(f(1,2));
document.write("<br>");
document.write(f(10,20));
</script>
</body>🖥️ 2. 화살표 함수
함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이 있다.
바로
화살표 함수
2-1. 매개변수 지정방법
- 매개변수가 없을 경우 :
() => {...}
- 매개변수가 한 개인 경우 (소괄호 생략 가능) :
x => {...}
- 매개변수가 여러 개인 경우 (소괄호 생략 불가능) :
(x,y) => {...}
EX)
<body>
<script>
// 매개변수가 없는 경우
var user = () => document.write('user');
user();
document.write('<br/>');
// 매개변수가 하나인 경우
var user2 = x => document.write(x);
user2('javascript');
var sayHi = () => alert('안녕하세요');
sayHi();
document.write('<br/>');
// 간단하게 한 줄로 표현할 때 '{}' 생략 가능하고 값이 반환된다.
var user3 = (a,b) => a + b;
document.write(user3(1,2));
</script>
</body>매개 변수가 여러 개일 경우 EX)
<body>
<script>
var user4 = (a,b) => {
var c = 3;
return a + b + c;
}
document.write(user4(10,11));
</script>
</body>EX3)
<body>
<script>
// 입력을 안 하면 기본값으로 '18'이 설정된다.
var age = prompt('나이를 알려주세요', 18);
var welcome = (age < 18) ?
() => alert('안녕') :
() => alert('안녕하세요');
welcome();
</script>
</body>2-2. 함수 몸체 지정 방법
x => { return x * x; }
x => x * x
함수 몸체가 한 줄의 구문이라면 중괄호 생략 가능, 암묵적으로 return된다.
() => { var x = 10; return x*x; }
🖥️ 3. 익명함수
<body>
<script>
// 익명함수, 일회성 호출
(function(){
var i = 0;
while( i < 9 ){
document.write(i + "<br>");
i += 1;
}
})();
</script>
</body>