자바스크립트(JS) 기초 개념 (3) - 함수와 스코프

 

 

 

 

🧀  함수

 

🥨  함수 선언하기

 

function 함수명(매개변수) {
	명령들
}

function example(a, b) {
	console.log(`${a}, ${b}`);
}

 

 

🥨  함수 호출하기

 

example(10, 20);	// "10, 20" 출력

 

 

- 매개변수, 인수, return은 다른 언어와 동일하게 사용한다.

 

 

🥨  기본 매개변수

 

- 에크마스크립트 2015부터 새롭게 생긴 기능

- 함수를 선언할 떄 매개변수의 기본값을 지정할 수 있음

- 값을 전달받지 못한 매개변수 값이 undefined가 되어 결과가 NaN 이 되는 것을 방지

 

function sum(a, b = 1, c = 2) {
	return a + b + c;
}

console.log(sum(3, 4, 5));	// 12
console.log(sum(3, 4));		// 9
console.log(sum(3));		// 6

 

 

 

🧀  스코프

 

🥨  스코프(scope), 란?

 

- 선언한 변수의 적용 범위

- 어느 위치에서 변수에 접근할 수 있는지를 가리킴

 

 

🥨  지역 스코프

 

- 변수를 특정 영역에서만 사용할 수 있을 때 '지역 스코프를 가지고 있다'고 함

- 지역 스코프를 가지고 있는 변수를 '지역 변수'라고 함

- var 예약어(ES6이전) 를 사용해서 변수를 함수내에서 선언할 경우 지역 스코프를 가짐

 

 

🥨  전역 스코프

 

- 프로그램 시작 부분에서 변수를 선언하면 프로그램 전체에서 사용할 수 있음

- 전역 스코프를 가지고 있는 변수를 '전역 변수'라고 함

- var 예약어를 사용하지 않으면 어디서 선언하든 전역 변수로 인식함

- let, const 예약어로 사용한 변수는 '스크립트 스코프'를 가진다고 함

 

 

🥨  블록 스코프

 

- 중괄호 {} 에 둘러싸인 영역 내에서 유효한 변수를 '블록 스코프를 가진다'고 함

- let, const 를 사용해 만든 변수는 블록 스코프를 가짐 (블록 변수)

 

 

 

🔥  자바스크립트 변수 주의사항

 

var 변수보다 let, const 변수를 사용한다

전역 변수는 최소한으로 사용한다

객체 선언은 const를 사용한다

 

 

 

🧀  함수 표현식

 

 

🥨  익명 함수

 

- 함수에 이름이 없는 함수

 

변수에 할당해서 사용하는 익명 함수

 

let multiply = function(a, b) {
	return a * b;
}

 

- 함수를 마치 하나의 값처럼 사용할 수 있음

- 함수를 변수에 할당할 수도 있고, 함수를 다른 함수의 매개변수로 넘길 수도 있음

 

 

🥨  즉시 실행 함수

 

- 한번만 실행하는 함수일 경우 함수를 정의하면서 동시에 실행할 수도 있음

- 함수를 식 형태로 선언하므로 마지막에 세미콜론 (;) 붙여야함

 

(function(매개변수) {
	...
} (인수);

(function(a, b) {
	console.log(a*b);
} (5, 10);		// 콘솔 창에 '50'출력

 

 

🥨  화살표 함수

 

- 에크마스크립트 2015 부터 => 를 이용한 화살표 표기법을 사용함

- 함수를 더 간단하게 선언할 수 있어서 많이 사용

 

(매개변수) => {함수 내용}

 

 

매개변수가 없을 때

const hi = () => {
	return 'hi';
}

- 괄호() 안에 비워둠

 

 

함수가 한줄일 때

const hi = () => return 'hi';

- 중괄호 생략 가능

 

 

함수식에 return문만 있을 때

const hi = () => 'hi';

- return 도 생략가능

 

 

매개변수가 1개일 때

const hi = user => console.log(`${user}님, 안녕하세요`);

- 매개변수의 괄호() 생략 가능

 

 

매개변수가 2개 이상일 때

const hi = (user, id) => console.log(`${id}, ${user} 님 안녕하세요`);

 

 

🥨  콜백 함수(callback function)

 

- 콜백 함수는 다른 함수의 인수로 사용하는 함수이다.

- addEventListner() 함수에서 함수를 인수로 넣는데 이렇게 다른 함수의 인수가 되는 함수를 콜백 함수라고 함

- 다른 언어와 다르게 자바스크립트에서는 함수이름에 괄호를 제외하고 이름만 작성해서 함수를 호출하는 대신 변수처럼 넣을 수 있음

 

const button = documnet.querySelector("button");

function display() {
	alert("클릭!");
}

button.addEventListner("click", display);

 

 

 

▶  자바스크립트에서는 함수가 1급 시민

 

- 1급 시민(first-class citizen) 조건

1. 변수에 할당할 수 있어야 한다.

2. 다른 함수의 인자로 사용할 수 있어야 한다.

3. 다른 함수에서 반환값으로 반환할 수 있어야 한다.

 

자바스크립트는 '함수'가 1급 시민이다.

 

 

 

🧀  전개 구문

 

전개구문(spread syntax)은 배열처럼 값이 다양한 자료를 한꺼번에 인수로 넘겨주거나 배열과 배열을 합할 때처럼 배열을 하나의 덩어리로 처리해야할 때 유용하다.

 

🥨  전개 구문 작성 방법

 

colors = ["black", "white", "red", "blue", "green"];
console.log(...colors);
/*
black white red blue green
*/

 

- 다른 정보는 필요없고 값만 꺼내 사용하려고 할 때 전개 구문 유용

 

 

🥨  나머지 매개변수

 

- 함수를 선언할 때 나중에 몇 개의 인수를 받게 될지 알 수 없는 경우 사용 (나머지 매개변수)

 

const add(...numbers) {
    let sum = 0;
    for (let number of numbers) {
    	sum += number;
    }
    return sum;
}

 

- 일부분은 변수로 받고 그 외에는 나머지 매개변수로 받을 수도 있음

 

const add(first, ...numbers) {
    let sum = first;
    for (let number of numbers) {
    	sum += number;
    }
    return sum;
}

 

 

 

🧀  타이머 함수

 

- 자바스크립트에서 특정 시간이 되었을 때 함수를 실행하거나 특정 시간 동안 함수를 반복하는 등 시간을 재는 함수가 있음 (타이머 함수)

- 실행할 함수와 시간을 인수로 지정

 

 

🥨  일정 시간마다 반복 - setInterval()

 

setInterval(콜백 함수, 시간)

 

- 시간은 밀리초 단위 사용 (1000밀리초 = 1초)

- 콜백 함수를 미리 선언했다가 인수로 전달해도 되고 함수 표현식으로 선언하면서 동시에 실행 가능

 

 

🥨  반복 실행 멈추기 - clearInterval()

 

clearInterval(타이머)

 

- setInterval() 함수를 실행하면 웹 브라우저를 종료하기 전까지 실행됨

- setInterval() 의 반복을 멈추는 함수

- setInterval() 에 타이머 이름을 지정해줄 수 있어서 clearInterval() 괄호안에 이름을 넣어서 지정

 

const timer = setInterval(() => {
  console.log("hi?");
}, 3000);

clearInterval(timer);	// 타이머 종료

 

- 보통 특정 횟수 또는 시간만큼 반복 후 종료하도록 설정함

 

 

🥨  특정 시간 이후에 실행하기 - setTimeout()

 

- 지정한 시간이 지난 후에 콜백 함수 실행

 

setTimeout(콜백 함수, 시간)