[D+37] 배열의 for문, 함수의 기본, 콜백함수

 

 

국비지원 D+37

-  배열의 for문, 함수의 기본, 콜백함수 -

 

---

 

배열의 for문

const arr = [11, 22, 33, 44, 55];

for(let i = 0; i < arr.length; i++)
{
	console.log(i, arr[i]);
}

// 0 11
// 1 22
// 2 33
// 3 44
// 4 55

자바스크립트의 for문에서 우리가 기본적으로 알고 있는 for문도 존재하지만 그밖에도 2가지가 더있다.

 

• for in 반복문

- 배열을 한바퀴 다 도는 반복문으로 배열의 index 값을 가져온다.

const arr = [11, 22, 33, 44, 55];

for(const index in arr)
{
	console.log(index);
}

// 0
// 1
// 2
// 3
// 4

 

• for of 반복문

- 배열을 한바퀴 다 도는 반복문으로 배열의 element 값을 가져온다.

const arr = [11, 22, 33, 44, 55];

for(const val in arr)
{
	console.log(val);
}

// 11
// 22
// 33
// 44
// 55

 

for in과 for of를 사용하면서 알아야하는 것은 기존에 우리는 for를 사용할때 let이라는 키워드를 사용했는데 for in과 for of같은 경우는 const라는 키워드를 사용해도 에러가 발생하지 않는데 이유는 변수의 값을 반복문을 돌릴때마다 수정하는 것이 아니라 새로운 메모리를 매번 새로 생성하기 때문에 오류가 발생되지 않는 것이다.

 

---

함수의 기본

• 함수의 종류

- 선언함수 : ES5방식, 함수의 이름이 있음.

- 익명함수 : ES6방식, 함수의 이름이 없음.

// 선언함수
// ES5 방식
function myfunc(a, b)
{
	let k = a + b;
	return k;
}

// 익명함수
// ES6 방식
const myfunc2 = function(a, b)
{
	let k = a + b;
	return k;
}

console.log(myfunc(10, 20));
console.log(myfunc2(4, 9));

자바스크립트에서의 함수는 크게 두가지가 있는데 익명함수와 선언함수이다.

 

선언함수는 기존 ES5에서 사용되던 것으로 함수앞에 바로 함수명을 넣어서 사용해주는 것으로 함수를 실행할 때에 "()"를 붙여 실행하도록 하며, 이때 함수명은 함수 자체를 의미하는 것이 아니라 참조값을 나타낸다.

 

익명함수는 함수에 함수명을 붙여주지 않을 뿐 변수에 따로 담아주는 형태로 마찬가지로 해당 변수는 함수가 아닌 익명함수의 참조값을 나타내며 선언함수와 익명함수와의 매커니즘은 일치한다는 것을 알 수 있다.

 

• 가변 파라미터

function func(...items)
{
	console.log(items);
}

func(1, 2, 3);		// items = [1, 2, 3];로 받는다.
func(1, 2, 3, 4, 5);	// items = [1, 2, 3, 4, 5];로 받는다.

- 가변 파라미터는 가변적인 파라미터의 개수를 처리하기 위한 기법으로 파라미터 안 변수안에 "..."을 붙여서 사용해 주면 된다.

- 만약 function func(...items){...}가 있을때 items는 몇개의 데이터가 와도 items라는 배열안에 담아버리며 func안의 함수도 배열형식으로 처리해버린다.

 

- 가변 파라미터와 일반 파라미터의 조합

function func(a, b, ...items)
{
	console.log(a);
    console.log(b);
    console.log(items);
}

func(1, 2);		// a = 1, b = 2, items = []
func(1, 2, 3);		// a = 1, b = 2, items = [3]
func(1, 2, 3, 4, 5);	// a = 1, b = 2, items = [3, 4, 5]

- 가변 파라미터는 일반 파라미터와도 함께 사용할 수 있으며, 사용할 때 반드시 가변파라미터가 뒤에 위치해 있어야 한다.

 

• 전개 연산자

const dummy = function (a, b, c) 
{
	console.log(a);
    console.log(b);
    console.log(c);
}

const ar = [1, 2, 3];

// 두 함수 호출방식은 같은 결과를 출력한다.
dummy(ar[0], ar[1], ar[2]);
dummy(...ar);

- 복수의 파라미터를 가진 함수에 배열을 전달하고자 할 때 사용하는 연산자이다.

- 호출시 "...배열명" 방식으로 호출한다.

 

---

콜백함수

자바스크립트에서 함수는 다른 함수의 인자로 사용될 수 있는데 이 과정에서 다른 함수에 의해 인자로 받은 함수의 결과가 리턴될 수도 있다.

즉, 함수를 바로 실행하는 것이 아니라 다른 함수를 통해 필요할 때 실행되는 함수를 콜백함수라고 한다.

 

=> 함수의 레퍼런스 값을 파라미터로 전달하여 호출되는 함수

 

• forEach

- 배열의 요소를 순회한다.

const numbers = [11, 22, 33, 44, 55];

numbers.forEach((value, index) => { console.log(index, value) });

// 0 11
// 1 22
// 2 33
// 3 44
// 4 55

 

• map

- 호출한 결과를 모아 새로운 배열을 반환한다.

const numbers = [10, 20, 30, 40, 50];

const newNumbers = numbers.map((value) => value + 5);

console.log(newNumbers);

// [15, 25, 35, 45, 55]

 

• filter

- 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

const numbers = [1, 2, 3, 4, 5];

const newNumbers = numbers.filter((value)=> { if(value < 4) { return true; } });

console.log(newNumbers);

// [1, 2, 3]