[TIL] Do it 자바스크립트_함수와 이벤트

함수란?

처리해야 할 과제에 따라 기능별로 여러 명령을 묶어 놓은 것

특정 기능을 수행하는 소스 코드를 따로 묶어 놓은 덩어리

 

이벤트란?

웹 문서에서 버튼을 누르거나 이미지 위에 마우스 포인터를 올려 놓는 등의 사건

 

---

 

정리

• 함수 선언
  function 예약어를 사용하여 중괄호 {} 안에 함수에서 실행할 여러 명령을 묶음

function addNumber() {
	var sum = 10+20;
    console.log(sum);
}

 

• 함수 실행 (함수 호출)
  선언 후에 함수를 실행하는 소스가 따로 필요하다
  -> addNumber()
  결과는 30
  
  
• 스코프 : 변수가 적용되는 범위, 어디까지 유효한가
  한 함수 안에서만 사용할 수 있는 변수 -> 지역/로컬 변수
  스크립트 소스 전체에서 사용할 수 있는 변수 -> 전역/글로벌 변수
  
  
• (ES6 버전) let, const 예약어
  var 보완 목적
  
  헷갈리지만 지금까지 이해한 내용을 정리하면 다음과 같다. (코딩애플, yuddomack 블로그 참고)

예약어	재선언	재할당	범위
var	O	O	function( ) { } 내에서만
let	X	O	funciton( ) 포함 모든 { }내에서만
const	X	X	funciton( ) 포함 모든 { }내에서만

 

- 재선언

var 이름;
var 이름; // 재선언 가능

let 나이;
let 나이; // 에러

const 성별 = "여자";
const 성별 = "남자"; // 에러

let, const 는 같은 이름의 변수를 두 번 이상 재선언할 수 없음

같은 이름 중복하여 실수 방지

 

- 재할당

var 이름 = "Kim";
이름 = "Park"; // 가능

let 나이 = 20;
나이 = 30; // 가능

const 성별 = "남자";
성별 = "여자"; // 에러

할당된 내용을 바꿔 재할당 -> var, let 가능하나 const 불가능

const는 상수, 일정한 값 -> 바뀌면 큰일 날 값을 저장하고 싶을 때 사용

 

- 범위

function 내에서 선언된 var 변수는 function 안에서만 존재

function 함수() {
	var 이름 = 'Kim';
    console.log(이름); // 가능
}

console.log(이름); // 에러

그런데  if문에서는?

if(true) {
	var 인사 = "안녕";
}
console.log(인사); // 가능

for문?

for(var i=0; i<5; i++) {
	var temp = i;
}
console.log(temp); // 가능, 결과 4

var 변수가 function 블록에서는 지역변수, function이 아닌 다른 블록에서는 전역변수가 된다?

 

"var는 함수 영역(레벨)의 스코프를 가지지만 let와 const는 블록 영역의 스코프를 가진다."

함수영역의 스코프라는 말이 아직 이해가 잘 가지 않는다.
함수 영역이란 것이 function ( ) { } 을 의미하는 것인지?

일단 var 변수는 function 내에서는 지역변수로 사용되고 다른 블록에서는 전역변수로 사용되는 것으로 이해하고 더 공부해보자.

 

• 호이스팅 (hoisting)
  var 변수를 사용할 때, 변수의 선언과 할당을 분리해 선언 부분을 스코프의 가장 위쪽으로 끌어올림
  
  

var x = 100;

test();

function test() {
    console.log("x is "+x+", y is "+y);
    var y = 200;
}
// 결과는 x is 100, y is undefined

자바스크립트 해석기는 함수 소스를 훑어보면서 var 변수 선언된 것을 따로 기억해둠.

변수를 실행하기 전이지만 선언한 것 같은 효과.

오류 발견되지 않고 예상치 못한 결과가 나올 수 있음.

 

• let과 constant 를 사용한 변수의 특징
  - 블록 안에서만 쓸 수 있음
  - 재할당은 가능하나 재선언은 할 수 없음
  - 호이스팅이 없는 변수
  
  
• 변수 사용 가이드
  - 전역변수는 최소한으로 사용
  - var 변수는 함수의 시작 부분에서 선언
  - for문에서 카운터 변수를 사용할 때는 블록 변수를 사용하는 것이 좋음
  - ES6를 사용한다면 var보다 let을 사용
  
  
• 매개변수 (parameter)
  함수를 실행하기 위해 필요하닥 지정하는 값
  -> function addNumber(a, b) { } 에서 a, b가 매개변수
  
  
• 인수 (argument)
  매개변수에 실제로 할당할 값
  -> addNumber(2, 3); 에서 2, 3이 인수
  
  
• 함수의 return문
  결과값을 다른 계산에 적용하거나 다른 곳에 표시해야 할 경우
  함수를 실행한 수 그 결과값을 함수 밖으로 넘기는 것을 '함수값을 반환한다(return)'라고 함
  
  

2022.07.18 - [JavaScript] - [JavaScript] 왜 return을 사용해야 하지?

[JavaScript] 왜 return을 사용해야 하지?

 

 

• 익명 함수
  이름 없는 함수
  실행하려면 할당된 변수를 함수 이름처럼 사용
  
  

var add = function(a,b) {
	return a+b;
}

var sum = add(10,20);

 

• 즉시 실행 함수
  함수를 정의함과 동시에 실행하는 함수
  함수 선언 소스 전체를 괄호로 묶는다고 생각
  즉시 실행 함수는 식이기 때문에 소스 끝에 세미콜론 붙여줘야 함

var result = (function() {
	return 10+20;
}());
console.log(result);
// 결과는 30

매개 변수가 필요하면 인수도 넣어서 실행

var result = (function(a,b) {
	return a+b;
} (10,20));
console.log(result);
// 결과는 30

 

• 화살표 함수
  ES6 부터는 => 이용하여 익명함수 선언을 간단하게 작성 가능
  
  매개변수가 없을 때:
  const hi = function() {return "안녕하세요?";} 
  const hi = () => "안녕하세요?";
  
  매개변수가 1개일 때:
  let hi = user => document.write(user+"님, 안녕하세요?");
  
  매개변수가 2개 이상일 때:
  let sum = (a,b) => a+b;
  
  
• 이벤트 처리기
  이벤트 이름 앞에 on을 붙여서 사용
  ex) onclick
  
  

---

 

새롭게 알게 된 것들

• alert() 함수는 내장함수이다
  
  
• 자바스크립트에서는 함수 선언 부분을 가장 먼저 해석한다.
  따라서 선언한 위치에 상관없이 어디든 함수를 실행할 수 있다.
  보통 스크립트 소스의 앞부분이나 뒷부분에 함수 선언 소스를 모아 둔다.
  
  
• function () 중괄호 안에서 변수 이름 앞에 var, let, const 예약어를 붙이지 않으면 전역변수가 된다 
  
  
• ES6에서는 매개변수에 기본 값을 지정할 수도 있다
  
  

function multiple(a, b = 5, c = 10) { // b=5, c=10으로 기본 값 지정
	return a*b+c;
}
multiple(5, 10, 20) // a=5, b=10, c=20 결과는 70
multiple(10, 20) // a=10, b=20, c=10(기본값) 결과는 210
multiple(30) // a=30, b=5(기본값), c=10(기본값) 결과는 160