챌로그

설명

호이스팅(Hoisting)은 JavaScript에서 변수 및 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 것을 의미한다.

이것은 코드가 실행되기 전에 JavaScript 엔진에 의해 처리된다.

var 변수

변수 호이스팅

변수 선언은 해당 스코프의 최상단으로 끌어올려지지만, 초기화는 끌어올려지지 않는다.

즉, 변수 선언은 호이스팅되지만, 변수에 할당된 값은 호이스팅 되지 않는다.

console.log(i);      // undefined
i = 100;      
console.log(i);      // 100

var i;               // 가장 먼저 실행

=> 프로그래밍의 순서의 혼란을 가져오므로 var => let, const를 권장한다.

function을 이용한 선언적 함수

함수 호이스팅

함수 선언이 해당 스코프의 최상단으로 끌어올려지는 것을 의미한다.

함수 선언문은 전체 함수가 스코프 내부 에디에서도 호출될 수 있음을 보장한다.

declare();         // 2번째 선언적 함수입니다.

function declare() {
	console.log('1번째 선언적 함수입니다.');
}

function declare() {
	console.log('2번째 선언적 함수입니다.');
}

[참고]

익명 함수는 호이스팅이 일어나지 않는다.

anonym();  -> Uncaught TypeError: anonym is not a function

anonym = function() {
	console.log('1번째 익명함수입니다.');
}

anonym = function() {
	console.log('2번째 익명함수입니다.');
}

설명

전역 변수(global variables)와 지역 변수(local variables)는 변수의 범위에 따라 구분된다.

전역 변수(Gloabal Variables)

• 모든 부분에서 접근할 수 있는 변수이다.
• 실행 중에 계속해서 메모리에 상주하므로 메모리 소비에 영향을 줄 수 있다.
• 사용을 최소화해야 하며, 너무 많은 전역 변수는 코드를 이해하기 어렵게 만들고 디버깅을 어렵게 할 수 있다.

지역 변수(Local Variables)

• 특정 함수나 블록 내에서만 접근 가능한 변수이다.
• 해당 함수나 블록이 실행될 때 생성되고, 함수 또는 블록의 실행이 끝나면 메모리에서 해제된다.
• 외부에서 접근할 수 없기 때문에 코드의 안전성과 보안성을 높일 수 있다.

우선순위

함수 내부 : 전역 < 지역

var n = '홍길동';          // 전역변수
function test(){
	 var n = '임꺽정';     // 지역변수
     console.log(n);
}

test();                   // 임꺽정 - 지역변수

함수 내부에서 선언된 지역 변수의 우선순위가 더 높기 때문에 함수 내의 지역 변수 'n'의 값이 출력된다.

var n = '홍길동';           // 전역변수 

function test() {
	var n = '임꺽정';       // 지역변수
}

console.log(n);            // 홍길동 - 전역변수

함수 내부에서는 지역 변수가 우선되며, 함수 외부에서는 전역 변수가 사용된다. 따라서 'n'의 값은 '홍길동'이다.

var i = 10;

for(var i=0; i<5; i++) {
	console.log(i);
}

console.log('i=' + i);

0
1
2
3
4
i=5

반복문 내에서 선언된 변수는 해당 반복문이 속한 험수의 범위 내에서 변수로 취급되고, 반복문 외부에서도 접근할 수 있다.

이 때문에 반복문에서 선언된 변수가 전역 변수와 같은 동작을 보이게 되는데, 이를 반복문 범위 내에서의 변수 취급이라고 할 수 있다.

setTimeout()

지정된 시간이 지난 후에 한 번만 실행된다.

setTimeout(() => {
	console.log('3초 후에 한 번만 실행됩니다.');
}, 3000);

setInterval()

일정한 시간 간격으로 계속해서 반복하여 실행된다.

즉, 'setInterval' 함수에 전달된 콜백 함수는 지정된 시간 간격으로 실행된다.

let count = 0;
setInterval(() => {
	console.log(`1초마다 실행됩니다(${count}번째)`);
    count++;
}, 1000);

clearInterval()

'setInterval()' 함수로 설정된 타이머를 멈추는 데 사용된다.

[예]

const id = setInterval(() => {
	console.log('1초마다 실행됩니다.');
}, 1000);

// 5초 후에 clearInterval()를 호출하여 setInterval()을 멈춤
setTimeout(() => {
	clearInterval(id);
}, 5000);

설명

하나의 배열에 연속적으로 여러 배열 메소드를 적용하는 것을 말한다.

각 메서드는 이전 메서드의 결과를 기반으로 동작하며, 중간 변수를 사용하지 않고도 

한 줄로 배열에 대한 연산을 수행할 수 있다.

let numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

let out = '';
numbers.filter((value) => value % 2 == 0)
       .map((value) => value * value)
       .forEach((value) => {
       		output += value + ' ';
       });
console.log(output);

// 0 4 16 36 64

filter()

주어진 함수의 조건을 만족하는 요소들만으로 이루어진 새로운 배열을 반환

map()

배열의 각 요소에 대해 주어진 함수를 호출한 결과로 이루어진 새로운 배열을 반환

reduce()

배열의 각 요소에 대해 주어진 함수를 실행하고, 이전 실행의 결과를 사용하여 하나의 값으로 축적하는 메서드이다.

이 메서드는 배열을 순회하면서 각 요소를 하나씩 처리하며, 최종적으로 하나의 값으로 줄여준다.

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

const result = numbers 
    .filter(num => num % 2 === 0)        // 짝수만 필터링: [2, 4]
    .map(num => num * num)               // 각 숫자를 제곱: [4, 16]
    .reduce((acc, num) => acc + num, 0); // 제곱한 숫자들의 합 구하기: 20

// result = 20

설명

map() 메서드는 배열의 각 요소에 대해 주어진 콜백 함수를 호출하고, 각 콜백 함수의 반환값으로 새로운 배열을 생성한다.

주어진 배열의 원본 요소를 변경하지 않고, 새로운 배열을 반환한다.

let numbers = [273, 52, 101, 32, 47];

numbers = numbers.map(function(value, index, array) {
	return value * value;
});

console.log(numbers);               // [74529, 2704, 10201, 1024, 2209]
numbers.forEach(console.log);
// 74529
// 2704
// 10201
// 1024
// 2209

설명

forEach 메서드는 배열의 각 요소에 대해 주어진 함수를 실행하는 배열 메서드이다.

이 메서드는 배열의 각 요소에 대해 반복하면서 해당 요소를 인수로 전달하여 콜백 함수를 실행한다.

forEach 메서드는 콜백함수의 반환값은 무시하고, 배열을 변형하지 않는다.

주로 배열의 각 요소에 대해 작업을 수행하거나 각 요소를 살펴보는 데 사용된다.

array.forEach(function(value, index, array)

• function : 각 요소에 대해 실행할 함수
• value : 현재 처리 중인 배열의 요소 값 (선택)
• index : 현재 처리 중인 요소의 인덱스 (선택)
• array : forEach를 호출한 배열 자체 (선택)

[예]

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

[1]

numbers.forEach(function(item, index) {
	console.log(`${index} : ${item}`);
}

[2]

function forEach(array, callback) {
	for(let i=0; i<array.length; i++) 
    	callback(array[i], i, array);
    }
}

forEach(numbers, function(value, index, array) {
	console.log(`${index} : ${value}');

// 출력 결과
// 0 : 1
// 1 : 2
// 2 : 3
// 3 : 4
// 4 : 5

[1] 과 [2]의 출력결과는 위와 같이 동일하다.

설명

콜백 함수(callback)는 다른 함수에 인자로 전달되어 실행되는 함수이다.

다른 함수가 실행을 완료한 후에 호출되거나, 특정 조건이 충족되었을 때 호출된다.

주로 비동기적인 작업을 처리할 때 많이 사용된다.

// 콜백 함수를 인자로 받는 함수
function process(callback) {
	// 어떤 작업을 수행한 후에 콜백 함수 호출
    console.log('작업을 처리합니다.');
    callback();
}

// 콜백 함수 정의
function callbackFunction() {
	console.log('작업이 완료되었습니다.');
}

// process 함수 호출과 함께 콜백 함수 전달
process(callbackFunction);

process가 실행되면서 callbackFunction이 호출된다.

선언적 함수로 callback 함수 정의

function callThreeTimes(callback) {
	for(let i=0; i<3; i++
    	callback(i);
}

function print(i) {
	console.log(`${i}번째 함수 호출`);
}

// 호출
callThreeTimes(print);

익명 함수로 callback 호출 

function callThreeTimes(callback) {
	for(let i=0; i<3; i++)
    	callback(i);
}

callThreeTime(function(i) {
	console.log(`{i}번째 함수 호출 - 익명함수`);
});

앞의 글과 비슷해 보이지만 다른 기능을 한다.

설명

전개 연산자는 함수 호출 시 또는 배열이나 객체 리터럴 안에서 사용된다.

배열이나 객체 안의 요소들을 분리하여 개별적인 값으로 확장한다.

함수 호출 시 전개 연산자를 사용하면 배열이나 객체를 풀어서 함수의 인수로 전달할 수 있다.

가변 매개변수와 전개 연산자 차이점

가변 매개변수 : 함수 정의할 때 사용

전개 연산자 : 함수를 호출할 때나 배열이나 객체를 다룰 때 사용

=> 코드에서 모두 '...' 기호를 사용하지만 서로 다른 문맥에서 사용된다.

[예]

// 가변 매개변수 ...
function min(...x) {    
	let _min = x[0];
    
    for(const num of x) {
    	if(_min > num)
        	_min = num;
    }
    
    return _min;
}

const array = [17, 9, 2, 1, 8];
console.log(min(array));             // [17, 9, 2, 1, 8]
// 전개 연산자 ...
console.log(min(...array));          // 1
console.log(min(17, 9, 2, 1, 8));    // 1

첫번째 콘솔 로그는 배열 자체가 하나의 값으로 취급되어 배열 전체를 가리키는 'x'가 하나의 요소로 취급된다.

따라서 for 루프가 한 번만 실행되고, '_min'은 배열 전체가 되고, 최종적으로 배열 전체가 반환된다.

두번째 콘솔 로그는 전개 연산자를 사용하여 배열의 각 요소를 개별적인 인수로 전달하였다.

세번째 콘솔 로그는 배열을 사용하는 대신 각 숫자를 개별적인 인수로 전달하였다.