[뉴렉처 6기] JavaScript│제어 구조 for-in, for-of│함수의 매개변수│전역변수와 지역변수│var│closure함수(230717)

 

💙 들어가며

---

1. 남은 제어구조 for-in, for-of에 대해서 배우고 제어구조를 마무리하자.

 

2. 그리고 본격적으로 함수에 들어갈건데,

자바스크립트에서는 모든 것이 다 객체이기 때문에 함수마저도 객체!라는 점에 유의하며

자바스크립트 함수의 특징과 지역변수에 대해서 알아보자.

 

 

 

✏️ 학습내용 정리

---

#인덱스를 세지 않아도 반복문을 돌릴 수 있다!

대부분의 제어구조는 친숙한 편이지만 for-in과 for-of가 조금 특이해보인다.

 

 

그 안의 내용을 조금 자세히 들여다보면

특히, for-in은 자바스크립트에만 있는 특이한 녀석의 느낌이다.

for-of는 자바의 for-each와 비슷한 녀석으로 이해할 수 있겠다.

 

💡 for-in: 배열의 갯수만큼 돈다. 값이 아니라 인덱스가 있는지 확인하고 꺼낸다.
💡 for-of: 자바의 for-each문과 비슷하다. 배열의 갯수만큼 돌면서 value을 꺼낸다.

출처: 뉴렉처(https://www.youtube.com/@newlec1)

 

 

다음과 같은 배열이 있을 때

사용하는 방법만 다를 뿐 모두 똑같은 결과를 얻을 수 있다.

💡 기본 for문
인덱스가 몇까지 있는지 찾아야한다.
인덱스를 names.length로 치환!

var names = ["철수", "영희", "맹구", "동천"];
for (var i = 0; i < names.length; i++)
    console.log(names[i]);
=========================================

💡 for-in문
인덱스가 몇까지 있는지 찾아볼 필요 없다.
배열을 돌면서 인덱스(key)를 찾는다.

for (var i in names)
    console.log(names[i]);
=========================================

💡 for-of문
인덱스를 아예 신경쓰지 않는다.
배열을 돌면서 바로 값을 찾는다.

for (var name of names)
    console.log(name);

⭕ 출력결과:

 

셋 다 동일한 결과가 출력된다.

 

 

 

그런데 이 세개가 완전 동일한 녀석은 아니다.

만약 배열 중간중간에 빠진 부분이 있다면 다른 결과를 출력한다.

 

아래의 예시를 통해서 확인해보자.

(참고로 여기서는 i를 선언할 때 var가 빠졌는데, 자세한 내용을 밑에서 다루니 일단 넘어가자!)

🚨 배열 중간중간에 빠진 부분이 있다면?


var names = [, "철수", "영희", "맹구", , "동천"];


💡 기본for문
for (i = 0; i < names.length; i++)
    console.log(names[i]);
=========================================

💡 for-in문
for (i in names)
    console.log(names[i]);
=========================================

💡 for-of문
for (name of names)
    console.log(name);

⭕ 출력결과:

 

for-in은 truthy값만 나오기 때문에

falsy까지 포함해서 출력하고 싶다면 for문이나 for-of를 사용해야 한다.

 

for-in은 배열의 빠진 부분에 대해서는 인덱스가 없는 것으로 인식하고 출력하지 않는다.

 

 

 

배열이 아니라 객체라면 어떻게 달라질까?

객체로 한다면 배열처럼 index를 찾기가 더 어려워진다.

(애초에 객체를 반복시킨다는 개념도 좀 특이한 것..)

💡 객체에서 for, for-in과 for-of는 될까?

var exam = { kor: 10, eng: 20, math: 30 };


for (i = 0; i < exam.length; i++)
	console.log(exam[i]);


for (var att in exam)
    console.log(att + ":" + exam[att]);


for (var value of exam)
    console.log(value);

⭕ 출력결과:

 

1. 첫 번째 일반 for문은 인덱스의 갯수를 length로 찾을 수 없기 때문에 사용이 불가하다.

오류는 나지 않으나 아무런 출력결과가 나오지 않음!

 

2. for-in만 정상적으로 작동한다.

 

3. for-of는 not iterable하다고 하며 실행되지 않는다.

(iterable의 개념은 나중에 6.0에서 설명할 예정)

 

 

 

제어구조들은 객체보다는 배열에 최적화되어 있음을 알 수 있다.

역시 배열과 떼어놓을 수 없는 반복문!

 

 

#함수도 객체

이번엔 자바스크립트에서의 함수로 넘어가보자.

자바스크립트 함수의 가장 큰 특징은 함수가 객체라는 점이다..!

 

자바스크립트에서는 사용되는 모든 것이 다 객체이다.

숫자와 같은 기본 자료형도 다 객체고 함수도 객체다.

그래서 함수를 값처럼 넘겨주는 것이 굉장히 자연스럽다.

 

우리가 자바에서 함수를 정의해서 사용했을 때를 생각해보자.

함수를 정의 해놓았다고 해서 그것을 하나의 객체로 계속 가지고 있던 것은 아니었다.

정의만 해놓고, 필요할 때만 호출해서 사용하고 제거했다.

 

그런데 자바스크립트에서는 함수가 객체이기 때문에

만들 때도 new 연산자를 사용하여 동적으로 값을 만드는데,

만약 함수선언이 반복문에 들어가면 계속해서 값을 만드는 것이 되고 이는 굉장한 낭비가 된다.

필요할 때만 호출해서 사용하고 데이터를 제거하는 자바와 다르다.

 

자바스크립트에서의 함수는 어떤 값으로 존재하기 때문에

너무 많이 남발하면 안되겠다는 경각심이 든다.

 

자바스크립트에서는 모든 것이 객체라는 것을 잊지말자.

그러면 함수 객체를 정의해보자.

💡 x와 y를 더해서 출력하는 함수를 정의해보자.

var add = new Function("x, y", "return x+y;");
console.log(add(3, 4));

⭕ 출력결과:

 

함수를 add라는 객체로 만들었고, 그 객체를 통해 반환값으로 7이 출력되었다.

 

 

다음과 같이 정의하는 방법을 조금씩 달리할 수도 있는데,

중요한 점은 어떻게 하든 모두 객체라는 점이다.

 

 

💡 마지막에 선언하고 표현한 함수식 또한 객체가 아니어 보이지만 객체이다.

function add(x, y){
return x+y;
}

출처: 뉴렉처(https://www.youtube.com/@newlec1)

 

 

 

그런데 지금까지 데이터는 변수명이 똑같아도 문제가 없었는데,

자바스크립트는 함수를 특별하게 취급한다.

하나의 지역화된 구역에서 함수명은 다른 변수등과 중복이 되면 오류가 난다.

💡 지역 안에서 함수이름과 변수이름이 중복되면 오류가 난다.

몇 번을 강조하지만 기억할 점은 함수도 객체이다!
그래서 함수가 아니라 변수와도 중복이 될 수 있다.
변수명과 함수이름은 중복되지 않게 해야한다.

{
변수이름 add 문제 없음
var add = new Function("x, y", "return x+y;");
console.log(add(3, 4));


변수이름 add 문제 없음
var add = function (x, y) { return x + y; };
console.log(add(3, 4));


함수이름 add 변수와 중복이라면서 에러나옴
function add(x, y) { return x + y; };
console.log(add(3, 4));
}

⭕ 출력결과:

 

 

function만 주석처리하면 또 문제가 생기지 않는다.

(혹은 반대로 function을 제외하고 나머지 1, 2번을 주석처리해도 문제가 생기지 않는다.)

 

지역 안에서 함수명과 변수명 사이에 중복이 생길 수 있다는 점을 주의하자.

(같은 객체인데도 함수는 특별하게 취급하는 자바스크립트!)

{
var add = new Function("x, y", "return x+y;");
console.log(add(3, 4));


var add = function (x, y) { return x + y; };
console.log(add(3, 4));


// function add(x, y) { return x + y; };
// console.log(add(3, 4));
}

 

 

#함수의 표현식과 선언식

이렇게 선언하는 것의 차이를

함수의 표현식과 선언식이라는 이름으로 구분해서 부르기도 한다.

 

 

표현식은 변수에 함수를 할당하는 방식이기 때문에

변수의 유효범위에 영향을 받을 수 있고,

변수가 선언된 이후에만 함수에 접근할 수 있다.

 

선언식은 변수에 할당하지 않고 직접 함수를 정의하는데,

이러한 방식으로 정의된 함수는 선언 이전에도 호출할 수 있다고 한다.

출처: 챗지피티(https://chat.openai.com/)

 

 

#함수 매개변수의 특징(JS 함수의 특수 프로퍼티 arguments)

그런데 여태까지 다뤘던 함수들은

함수에서 정의한 매개변수의 개수만큼만 함수를 호출할 때 적을 수 있었는데,

자바스크립트는 매개변수 2개를 정의했더라도 0개나 5개를 써도 함수에 오류가 나지 않는다.

💡 다음을 출력하면?

var add = function (x, y) {
    return x + y;
};

console.log(add());
console.log(add(2, 3, 4, 5));
console.log(add(3, 'a'));

⭕ 출력결과:

 

그 어떤 것도 오류가 발생하지 않는다.

 

자바스크립트에서 매개변수는 의미가 없다.

그래서 표현식에 2개를 설정했다고 하더라도

매개변수로 5개를 넣어도 전혀 상관없다. 오류가 나지 않는다.

 

※ 참고로 undefined와 undefined를 더하면 NaN!

 

 

왜 오류가 나지 않을까?

자바스크립트에서 함수의 모든 매개변수는 arguments가 받는다.

순서대로 arguments에 하나씩 쌓인다. (가변이다.)

그래서 사실상 함수를 정의할 때 인자가 필요가 없다. 어짜피 arguments에 쌓이니까.

💡 다음을 실행하면?


var add = function () {
    console.log("arguments:" + arguments.length);
    var x = arguments[0];
    console.log(x);
    var y = arguments[1];
    console.log(y);

    var sum = 0;
    for (var arg of arguments)
        sum += arg;

    return sum;
}
console.log(add(2, 3, 4, 5));

⭕ 출력결과:

 

함수를 정의할 때 매개변수를 적어주지 않았는데도,

함수가 정상적으로 작동되었다.

 

 

자바스크립트의 함수에서는 정의할 때 매개변수의 의미가 없다.
함수를 호출할 때 매개변수를 입력하는대로 자동으로 arguments에서 다 받는다. (가변)

  

arguments는 가변이라서 편하지만 명시적이지 않으니 주의해야겠다.

 

 

#산술연산에서 null과 undefined

그런데 여기서 잠깐!

산술연산에서 null과 undefined가 다르게 취급된다는 것을 아는지?

💡 산술연산에서의 null과 undefined


null은 0으로 치환되어 계산이 된다!
undefined는 계산할 수 없다며 NaN이 출력된다.

그리고 undefined는 자료형도 undefined이지만
null은 자료형이 object이다.

💡 다음을 출력하면?

console.log(null + 3);
console.log(undefined + 3);

console.log(typeof null);
console.log(typeof undefined);

 

 

#자바스크립트의 전역 변수

따로 메소드안에 들어가지 않았다면 script안에 정의된 것들은 전역변수이다.

 

전역변수는 스크립트 전체에서 접근 가능한 변수로,

어떤 함수나 블록 내에서 선언되지 않은 변수를 의미한다.

 

전역변수는 전역 스코프(global scpoe)에서 정의되며,

스크립트 어디서든 참조할 수 있다.

때문에, 너무 많이 사용하면 코드의 유지보수가 어려워질 수 잇다.

 

변수 충돌이나 예기치 않은 동작을 일으킬 수 있으므로 전역변수를 사용할 때는 늘 신중해야 한다.

💡 전역으로 영향을 끼치는 변수

<script>
	var a = 1;
</script>

 

 

#var 변수 선언과 위치

앞에 많은 예시들을 다루었는데, 잘 보면 눈치챘을 수도 있겠지만

언제는 변수를 선언할 때 var를 앞에 써주고 언제는 써주지 않는 등이 혼용되어 있었음에도 불구하고

사용하는데 전혀 문제가 없었다. 왜그랬을까?

💡 두 가지의 차이는 무엇일까?

var a = 1;
b = 2;

 

 

var를 붙여서 선언하는 변수들은 미리 준비하는 준비물이다.

미리 준비되는 것들이기 때문에 아래와 같이 해도 오류가 나지 않는다.

💡 다음을 출력하면?

alert(a);
var a = 1;

⭕ 출력결과:

 

준비물이 있기 때문에 에러가 나지 않는다.

 

하지만 순서가 중요하다.

a가 밑에 있기 때문에 undefined가 나왔다.

출처: 뉴렉처(https://www.youtube.com/@newlec1)

 

 

 

자바스크립트의 전역공간에서는 변수를 선언하지 않아도

(객체를 정의할 때 앞에 var를 적지 않아도)

알아서 인식이 된다.

 

그런데 아래 2개는 차이가 있다.

💡 다음을 출력하면?

a = 1;
alert(a);

alert(a);
a = 1;

⭕ 출력결과:

 

 

1) 첫번째는 1이 출력되지만

2) 두번째는 오류가 난다.

 

var를 붙이지 않으면 미리 준비시킬 수 없다.

코드 어디에 준비시킬 필요가 있는 경우에는 반드시 var를 붙인다.

 

출처: 뉴렉처(https://www.youtube.com/@newlec1)

 

 

코드 맨 위에있든 아래에 있든

전역공간에 있는 모든 변수는 사실 window에 들어가있는 녀석들이다.

(앞에 window가 생략되어 있는 것임)

 

window란 전역속성을 가지고 있다고 생각할 수 있다.

때문에 전역공간에 쓴 변수는 선어하지 않았어도 다 window의 속성으로 들어간다.

 

또한, 선언을(var) 한 변수도 마찬가지로 전역속성을 가지므로

자동으로 window의 속성으로 들어가서 오류가 나지 않는다.

 

하지만 변수 선언을(var) 하지 않거나 값을 할당하지 않으면 window속성으로 들어가지 않아서

무슨 키워드인지 자바스크립트에서 인식하지 못해서 오류가 난다.

💡 다음을 출력하면?

1번)
console.log(a);
a = 2;


2번)
console.log(a);
var a = 2;


3번)
console.log(window.a);
a = 2;

⭕ 출력결과:

 

1번은 오류가 난다. 

함수인지? 변수인지? a가 어떠한 키워드로 사용될지 모른다.

 

2번과 3번은 동일하게 undefined라고 나온다.

다만 window.a는 값이 들어가지는 않았지만

공간은 마련되어 있기 때문에 undefined가 나온 것이다.

 

 

 

하지만 메소드 안에서 window가 붙은 a는 지역변수이다.

때문에 console.log(window.a)를 실행하면 오류는 나지 않지만 메소드를 나오면 소멸된다.

 

 

하지만 var를 붙이면 전역변수가 되기 때문에 메소드 바깥을 나가도 사라지지 않는다.

window.a와 var k는 다르다.

💡 h를 출력했을 때 window에 a와 k와 h는 보일까?

window.alert("aa");
console.log(window.a);

for (var k in window)
    console.log(k);

for (h in window)
    console.log(h);

⭕ 출력결과:

 

a와 h는 메소드의 지역이 끝남과 동시에 사라진다.

하지만 K는 그대로 남아있음을 볼 수 있다.

 

 

단 window.a를 지역에서 선언한 뒤에 a에 값을 대입하면 선언한 것이 된다.

💡 h를 출력했을 때 window에 a와 k와 h는 보일까?


window.alert("aa");
console.log(window.a);
a = 2;

for (var k in window)
    console.log(k);

for (h in window)
    console.log(h);

 

 

#지역변수의 특징

자바스크립트에서는 지역화가 거의 의미가 없었지만,

유일하게 지역화가 되는 것이 함수 안에서 선언하는 경우이다.

💡 함수 안에서 지역변수는 hoisting으로 인해서 최 우선순위가 된다.

함수의 지역 안에서 객체를 선언(var)하지 않고 쓰면 무조건 전역객체(window)의 속성으로 들어간다.
반대로 선언(var)을 하게 되면 지역변수가 되고, 이 지역변수는 함수의 지역 안에서 가장 최 우선순위가 된다.

 

 

만약 함수 안에서 선언(var)을 안하고 변수를 쓰면

자동으로 전역 객체의 속성을 띄면서 window안에 들어간 속성을 쓰는 것으로 인식이 된다.

 

그런데 밑에서 var라고 변수를 선언한 동일 이름의 변수가 하나라도 있으면

지역변수가 생기고 그 것이 최 우선순위가 된다.

 

 

다음의 예제를 풀어보자.

💡 다음을 출력하면 어떤 팝업이 뜰까? 


var f1 = function () {
    a = 1;
    console.log(window.a);

    var a;
    a++;
    alert(a);
    alert(window.a);
}
f1();

⭕ 출력결과:

 

첫번째 alert은 2가 나오고 두번째 alert은 undefined가 나온다.

var a;때문에 a는 지역변수로 선언이 되었고

순차적으로 var a에 1이 대입되고

여기에 ++이 되어서

a는 2가 나온다.

 

하지만 window.a의 속성은 쓴 것이 아무것도 없으니 undefined가 나온다.

출처: 뉴렉처(https://www.youtube.com/@newlec1)

 

 

🚨 만약 var a를 선언하지 않았다면,

 

a는 전역의 속성을 사용하게 되어서 window.a로 인식이 되었을 것이고

a에 순차적으로 1이 대입되고

a가 ++이 되면서 

첫번째 a도 2가 되고 두번째 window.a도 2가 나온다.

 

 

#아우터 함수(outer)

자바스크립트에서는 함수 안에서 함수를 호출할 수 있다.

이때 outer라는 개념이 등장하는데, outer란 함수 외부의 범위를 뜻하는 것이다.

 

내부에 선언, 정의된 함수를 기준으로 바깥 함수의 내용이 1차적인 outer가 되겠다.

(바깥함수를 벗어난 범위가 2차적인 outer가 되는 식)

 

이때 내부에 선언된 함수는 outer범위까지도 기억하고 실행되는 것을 알 수 있는데,

아래의 예시에서 한 번 확인해보자.

💡 다음을 출력하면?


function f1() {
    var a = 1;
    console.log(a); // 1
    function f2() {
        a = 10;
        a++;
        console.log(a); // 2
    }
    f2();
    console.log(window.a); // 3
}
f1();

⭕ 출력결과:

 

1, 2)

함수 안에서 var로 선언한 변수는 지역변수가 된다.

함수의 블록 안에 지역변수가 있을 시에는 지역변수가 최 우선순위가 된다.

때문에 f1()과 f2()에서 사용된 변수 a는 var a이기 때문에

각각 1과 11이 출력되고

 

3)

window.a라는 동명이함수는 사용되지 않았기 때문에

undefined가 출력된다.

 

 

#클로저 함수(closure)

그런데 함수 안에 함수가 선언되고

outer함수에서 선언한 변수가 내부에서 사용되는 형태일 때,

외부 함수가 닫힌 상태에서 내부 함수를 부른다면 어떻게 될까?

(외부 함수에서 내부 함수가 정의되는 형식인데.. 내부 함수만 부른다면?)

💡 f2()와 f3()만 따로 부르면 어떻게 될까?


//=====함수의 선언부=====
var f1 = function () {
    var a = 1;
    a++;
    console.log("f1:" + a);
    window.fClosure = f2;
    window.fClosure2 = f3;

    function f2() {
        a++
        console.log("f2:" + a);
    }

    function f3() {
        a--;
        console.log("f3:" + a);
    }
}


//=====함수의 출력부====
f1();
fClosure();
fClosure2();

⭕ 출력결과:

 

오류가 나지 않고 f2와 f3이 호출될 수 있음을 알 수 있다.

 

 

놀랍게도 fClosure()와 fClosure2()를 부를 수 있음을 알 수 있는데,

이때 내부 함수를 부르면 외부 함수는 계속해서 동작하는 모양새를 보이게 된다.

 

이때 f2(), f3()함수가 불리지 않을 때에야 비로소 f1()이 닫힐 수 있는데,

그런 의미에서 f2()와 f3()함수를 f1을 닫게하는 함수 클로저함수라고 한다.

 

💡 클로저: outer의 환경을 기억하고 있어서 outer의 데이터를 사용할 수 있는 함수

함수 안에서 호출된 inner함수가 outer의 데이터를 계속해서 기억하고 참조할 수 있다는 것이 핵심이다.
outer 함수가 스스로 문을 닫을 수 있는 유일한 방법은 inner가 닫히는 것
즉, 아무도 inner를 호출하지 않는 경우에만 닫힐 수 있다.

 

 

아래와 같이 함수를 return시키는 경우에는

또 다른 객체에 담아서 실행하고 출력시킬 수 있다.

⭕ 실행결과:

 

1이 alert창에서 팝업된다.

 

 

그러면 아까의 예시를 조금 수정해서 다시 한 번 복습해보자.

분명 f1은 1만 선언했지만 밑에서 fClosure와 fCloure2를 통해서 값이 계속해서 변하고 있다.

 

그리고 f1이 다시 선언되면 값이 또 다시 초기화 된 상태로 시작되어 참조된다.

💡 closure이 불렸기 때문에 닫히지 않는 f1

//=====함수의 선언부=====
var fClosure = null;
var fClosure2 = null;
var f1 = function () {
    var a = 1;
    a++;
    console.log("f1:" + a);
    function f2() {
        a++
        console.log("f2:" + a);
    }
    window.fClosure = f2;

    function f3() {
        a--;
        console.log("f3:" + a);
    }
    window.fClosure2 = f3;
}


//=====함수의 출력부=====
f1();
f1();
fClosure();
fClosure();
fClosure();
fClosure2();

console.log("=========")
f1();
fClosure();
fClosure2();

⭕ 실행결과:

 

f1()이 닫히지 못하고 f2()와 f3()에서 계속해서 값들이 활용되고 있다.

 

그러나 f2()와 f3()는 f1()의 상태를 기억하고 참조하고 있으므로

만약 f1()이 다시 불리게 되면 값은 다시 초기화된 f1()의 값을 참조하게 된다.

 

 

 

💙 마치며

---

1.

자바스크립트에서는 함수도 객체이다.

 

 

2.

객체식 표현인 함수 표현식과 함수식 표현인 함수 선언식을 잘 익혀서

어느 방법으로든 사용할 수 있게 해야겠다.

 

 

3.

변수의 유효범위가 애매하다.

온갖 종류의 전역변수와 사용변수 사용에 유의해야겠다.

특히 클로저함수!!