1. 학습내용
오늘은 함수와 이벤트에 대해 배웠다.
함수는 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차이다. 함수를 사용하려면 함수를 호출하고자 하는 범위 내에서 함수를 정의해야만 한다.
함수를 사용하면 좋은점
- 각 명령의 시작과 끝을 명확하게 구별할 수 있다.
- 함수에 별도의 이름을 붙이면 같은 기능이 필요할 때마다 해당 함수를 실행할 수 있다.
함수 선언(함수 정의)
- 함수가 어떤 명령을 처리해야 할지 미리 알려주는 것
- function 예약어를 사용하고, {} 안에 실행할 명령을 작성
함수 호출(함수 실행)
- 함수 이름을 사용해 함수 실행.
함수의 기본형은 아래와 같다.
function 함수이름(){
변수 및 함수식
}
함수이름은 어떤 함수를 계산할 건지 관련된 이름을 지정한다.
function addNumber(){
var num1 = 10;
var num2 = 20;
var sum = num1 + num2;
alert("result : " + sum);
}
addNumber();함수를 호출하려면 함수명();을 한번 더 써주면 된다.
물론 함수식을 정해주기 전에 함수명을 적어 호출해주어도 되지만, 다른언어에서는 저런 방식이 통하지 않을 수도 있기 대문에 위에서 부터 아래대로 적어주는 게 좋다.
function addNumber(){
var num1 = 10;
var num2 = 20;
var sum = num1 + num2;
}
addNumber();
alert("result : " + sum);함수안에서 선언한 변수이기 때문에 밖에 alert를 부르면 함수 밖에 변수선언 된게 없기 때문에 'sum이 정의되지 않았다'라는 알림이 뜬다.
var x = 100;
var y; //로 착각함.
function test(){
document.write("x is" + x + ",y is " + y);
var y = 200;
}
test();변수를 보통 먼저 선언하고 해당되는 계산되는 식을 쓰는데, 여기서는 뒤로 선언했다.
그러면 에러가 나야 하는데, 에러는 발생하지 않고, 'undifined'라고 나온다.
이런걸 호이스팅이라 한다. 끌어와서 가져오는 것을 말하는것인데,
변수선언이 앞에 'var y'라고 선언한것 처럼 컴퓨터가 인식하기 때문에 저렇게 나온다.
y라는 변수에 값이 선언한게 없기 때문에 기본값인 'undifined'나오는 것.
이러한 오류가 나타나지 않으면 에러를 고칠 수 없으므로, let과 const가 나왔다. 이걸 써줄 경우 변수를 선언하지 않고, 적었을 시 에러가 발생한다.
함수 안에서 선언한 것을 '지역변수', 함수 밖에서도 적용되고, 선언한 것을 '전역변수'라고 한다.
'전역변수'는 프로그램 끝날때 까지 메모리를 잡아먹고, '지역변수'는 함수가 끝나면 메모리를 차지하지 않으므로 '전역변수'는 최소한으로 사용하는 게 좋다.
const는 변수처럼 쓰이는데, 상수라고도 하며, 한번 선언하면 안의 값을 변경할 수 없는 선언을 말한다.
함수는 다양한 기능을 가지게 만드는게 중요하다. 한가지 기능밖에 못하면 굳이 새로운 함수를 만들 필요가 없다. (유용성이 있어야 함.)
이때 매개변수와 인수라는 개념이 등장한다.
함수명 옆에 ()안에 들어가는 값을 '매개변수'(parameter), 함수를 실행하기 위해 필요하다고 지정하는 값(연산하고자 하는 값). 즉 매개변수로 넘겨주는 값을 '인수'(argument)라고 한다.
익명함수.
- 이름이 없는 함수.
함수 자체가 식이기 때문에 함수를 변수에 할당하거나 다른 함수의 매개변수로 사용할 수도 있음.
let sum = function(){};2. 어려웠던 점 및 해결방안
아래 개념이 햇갈려서 수업시간에 받아서 따로 적는다.
만약 함수 밖에 호출을 받으면 에러가 난다. '전역'변수는 되도록 안하는게 좋으므로 밖에서 함수 결과 값을 보고 싶으면, return을 적으면 된다. 만약 'return result'라고 적으면 이 리턴값을 받는 result 변수를 밖에 적어 받으면 호출이 된다.
function clacuSum(n){
let sum = 0;
for (let i = 1; i < n+1; i++){
sum +=i;
}
return sum;
}
var result = clacuSum(10);
document.write(result); //위의 return값 없으면 그냥 'document.write(sum);적으면 에러가 난다.3. 학습 소감
이해되지 않았던 호이스팅 개념에 대해 확실히 이해할 수 있었던 시간이였다.
또한 거의 수업 말미에 중첩 for문에 대한 설명도 있었는데, 설명으로 듣고 이해는 했지만, 역시 문제가 새로 주어 진다면 즉각 답을 낼수는 없었다. 역시나 자주 이것도 반복해 연습만이 답인듯 했다.
