출처
- 생활코딩
https://opentutorials.org/course/3085/18882
https://opentutorials.org/course/3085/18851
- Nomad Academy
www.youtube.com/watch?v=wUHncG3VwPw&list=PL7jH19IHhOLM8YwJMTa3UkXZN-LldYnyK
1. Function (함수)
하나의 로직을 재실행 할 수 있도록 해주는 것.
내가 input버튼을 100000개 만들었는데
그 버튼의 속성을 한번에 바꾸려면 정말 시간이 오래 걸릴 것이다.
또한 엇비슷한 버튼이 매우 많이 있을 경우
어떤 점이 다른 버튼인건지? 같은 버튼인지 알기가 힘들다.
이때 함수를 수납상자와도 같이 써주면 된다.
함수는 데이터가 많아질 때 정리할 수 있는 도구가 되어준다.
1). 기본 용법
<script>
function 함수명(매개변수){
반복 사용 하고 싶은 JavaScript코드 붙여넣기
}
</script>이렇게 함수를 정의하고
원하는 자리에 함수를 사용하고자 할 땐 그 자리에
function 함수명(함수인자);를 쓰면 된다.
자바스크립트는 위에서 아래로 코드를 읽지만
함수는 꼭 위에서 정의해서 쓰지 않아도 된다.
아래에서 정의하고 위에서 써도 된다는 것.
- 매개 변수 (parameter)
데이터인 함수인자를 함수 내부로 전달하기 위해 사용하는 변수를 의미한다.
기본값은 undefined이다.
- 함수 인자 (arguments)
함수로 유입되는 입력값(value)을 의미한다.
2. 함수 예제
<body>
<h1>Function</h1>
<h2>Basic</h2>
<ul>
<script>
document.write('<li>1</li>');
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
document.write('<li>3</li>');
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
</script>
<h2>Parameter & Argument</h2>
<h2>Return</h2>
</body>예제1.1. 불연속적인 부분이 반복되는 코드
코드가 반복되는 부분은 반복문을 쓸 수 있겠지만
예제(1)과 같이 붙어 있지 않은 부분이 반복되면 반복문을 쓰기 힘들 수 있다.
그때 함수의 기본 문법을 따라 코드를 작성하면
좀 더 간결하게 같은 결과값을 얻을 수 있다.
- 함수명: two
- 매개변수: (undefinded)
- 함수내용:
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
<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>
<h2>Parameter & Argument</h2>
<h2>Return</h2>
</body>예제1.2. 불연속적인 부분이 반복되는 코드 (함수 추가)
<script>
var a = 10;
var b = 20;
function add(x, y){
var sum = x + y;
return sum;
}
var total = add(a, b);
document.write(total);
</script>예제2.1. 매개변수가 두 개인 함수
원하면 매개변수를 여러 개 지정할 수 있다.
add가 음식점이면
add(a, b)는 a,b라는 재료를 트럭으로 전달해주는 것이고
return sum은 음식점 배달원이 되어 다 만든 음식을 보내주는 것이다.
- 전역변수 : 함수 안, 밖 어디서든 쓸 수 있는 변수
여기서는 var a, var b가 전역변수에 속한다.
- 지역변수 : 그 변수를 지정한 함수 안에서만 쓸 수 있는 변수
여기서는 var sum이 지역변수에 속한다.
비유하자면 그 음식점에서만 쓰는 비법명을 의미ㅋㅋㅋㅋ
보통.. 주문할 때 음식명을 말하지 비법명을 말하지 않잖아..
'JavaScript' 카테고리의 다른 글
| [JavaScript] +연산자로 문자열과 변수 연결하기 (0) | 2020.06.03 |
|---|---|
| [JavaScript] 큰 따옴표를 쓸 것인가 작은 따옴표를 쓸 것인가? (0) | 2020.06.03 |
| [JavaScript] Array (배열) (0) | 2020.06.03 |
| [JavaScript] 데이터 타입 (1) - 기본타입 (0) | 2020.06.03 |
| [JavaScript] Variable (변수) (0) | 2020.06.03 |