0717 | 제어구조 / 메서드 / arguments / 전역과 지역변수 / hoisting

😵 ~23.11.10

0717 | 제어구조 / 메서드 / arguments / 전역과 지역변수 / hoisting

unikue 2023. 7. 18. 17:31

✅ 제어구조

#️⃣ 배열 읽어오기

✔ for(i in ar)은 배열이 갖고있는 개수만큼 인덱스(키)를 꺼내줌 ▶ 자바스크립트만 갖고있음

✔ for (v of ar)배열이 갖고있는 개수만큼 값을 꺼내줌 ▶ for each문

console.log("일반 for문---------------------")
var names = [, "철수", "영희", "맹구", "동찬"];
for (var i = 0; i < names.length; i++) // 반복에 관여하고 싶을때 length를 사용
    console.log(names[i]);

console.log("for in--------------------")
for (i in names)
    console.log(names[i]);

console.log("for of---------------------")
for (var name of names)
    console.log(name)

#️⃣ 객체 읽어오기

👉 iterator는 컬렉션에서 스트림을 읽을때 사용하는 함수인데 iterator가 배열은 지원하지만 객체는 지원하지 않아서 생기는 오류.

'exam'은 반복 가능한(iterable) 객체가 아니기 때문에 발생한 TypeError 오류입니다. 이 오류는 exam 변수가 배열 또는 이터러블 객체가 아닌데, 반복문을 사용하여 해당 객체를 반복하려고 시도한 경우 발생합니다.
해당 오류를 해결하기 위해서는 다음과 같은 점을 확인해야 합니다:

exam 변수의 데이터 타입: exam 변수가 반복 가능한(iterable) 객체여야 합니다. 배열, 문자열, Map, Set 등의 이터러블 객체를 사용해야 합니다. 만약 exam이 이러한 객체가 아니라면, 오류가 발생할 수 있습니다.
반복문 사용 시 객체의 정확한 접근: 반복문을 사용할 때 올바른 객체에 대해 반복을 수행하고 있는지 확인해야 합니다. 만약 exam이 반복 가능한 객체인데도 오류가 발생한다면, 올바른 접근 방법을 사용하는지 확인해야 합니다.

 var exam = { kor: 10, eng: 20, math: 30 }
for (k in exam) // 키값을 k에 담아서 인덱스로 활용하여 값을 뽑는다
    console.log(k + ":" + exam[k]); // 10 20 30

✅ 함수

✔ 함수도 객체로 만든다 ▶ 사용하면서 계속해서 만들어질수 있으므로 유의할것

✔ 자바스크립트는 함수를 넘겨주는게 자연스럽다

주황색 박스(변수)끼리 사용되던가 초록색 박스처럼 함수명으로 선언되어 사용해야하고 혼용될 시 이미 정의된 것으로 나온다

발생한 SyntaxError 오류는 이미 선언된 식별자(identifier)인 'add'를 다시 선언하여 중복된 선언이 되었기 때문에 발생한 오류입니다. JavaScript에서는 동일한 스코프(scope) 내에서 중복된 선언을 허용하지 않습니다.
해당 오류를 해결하기 위해서는 다음과 같은 점을 확인해야 합니다:

중복 선언 확인: 'add'라는 식별자가 이미 선언되었는지 확인해야 합니다. 현재 코드 스코프 내에서 'add'라는 변수, 함수, 혹은 다른 식별자와 충돌이 없는지 확인해야 합니다.
변수와 함수 이름 충돌: 'add'라는 식별자가 변수 이름과 함수 이름으로 동시에 사용되는지 확인해야 합니다. 변수와 함수는 동일한 이름을 공유할 수 없으므로, 필요에 따라 이름을 변경해야 합니다.

#️⃣ Function과 function의 차이

#️⃣ 가변적인 매개변수 - 인수가 초과되는경우

  var add = function (x, y) {
        return x + y;
    };
    console.log(add()); // undefind + undefind라서 NaN이 나온다
    console.log(add(2, 3, 4, 5)); //2+3으로 5출력
    console.log(add("car", 4, 5, 2)); // car4

    var multiple = function (x, y) {
        return x * y;
    }
    console.log(multiple("car", 4, 5, 2)); // 곱셈은 문자열과 연산 불가하여 NaN

: 함수 호출 시 초과된 인수를 무시하는 특성은 자바스크립트에서 허용되는 것이므로, 이 경우 초과된 인수는 무시되고 유효한 인수만 사용된다

: 자바스크립트는 매개변수가 의미가 없음....매개변수로 받는게 아니라 arguments라는 컬렉션으로 인자를 받는다.

#️⃣ arguments

var add = function () {
    console.log("arguments: " + arguments); // [object Arguments]
    var x = arguments[0]; //arguments 배열에 들어간 값이 하나씩 할당되어 연산되는 형태
    var y = arguments[1];

    var sum = 0;
    for (var arg of arguments) //arguments값을 모두 arg에 불러온다
        sum += arg;

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

👉 즉 arguments가 배열 형태로 받게 되므로 for문을 통해 출력하면 매개변수가 몇개든 알아서 출력된다

var add = function () {
    var total = 0;
    for (var i in arguments) // for -in 은 키값이 뽑히므로 인덱스로 사용해서 value에 접근
        total += arguments[i];
    return total;
};

add(10, 20, 30, 40);
console.log(total); // 100

// ----------------------------------------------

var add = function (x, y, z) {
    return x + z; //5 선택적으로 값을 뽑아낼 수 있음 (의미는 없겠지만...)
}

console.log(add(2, 4, 3)); // undefined는 NaN이 되는데 null을 넣으면 덧셈이 됨

✅ 함수의 전역변수

#️⃣ var 변수선언과 위치

: 전역변수의 특징❣ 위든 아래든 전역변수는 window에 있는 객체임. window를 생략했을 뿐

: 일단은 hoist라는 단어를 쓰지말고 변수==준비물로 생각할 것

#️⃣ 변수를 선언하지 않고 사용하면?

🔥 전역 공간에서는 변수 선언 (var를 사용) 해도 되고 안해도 된다.

❓ 둘은 같은건가요? 👉 아니오

❓ 둘의 차이는? 👉 선언의 의미에 차이가 있다 : 변수를 미리 준비시킨다

👉 전역공간에서의 선언은 곧 window(전역)객체의 속성이된다. 선언이 아니고 값을 대입만 하는 경우도 마찬가지. (선언을 하면 변수가 미리 준비된다는 점만 다를 뿐)

🔥 자바스크립트에서 유일하게 지역화 할 수 있는 도구 = 함수안에 들어가는 변수. 단 메서드 안에서 var선언을 꼭 해줘야 한다

#️⃣ var 선언 위치 정리

🔥 전역위치에서 변수가 나온 상태 ▶ var을 쓰든 쓰지않든 window전역변수로 선언된다.
a = 3;
var a = 3;
모두 전역변수!

🔥 메서드 안에서 변수가 나올 때 ▶ 지역변수 처리됨 그러나 var 선언이 없다면 전역변수 처리 됨
function a() { a =3;} //전역변수
function a() { var a = 3;} // 지역변수

✨ 여기서 메서드라 함은 console.log(window.a) 에서 window.a도 지역변수처리된다는 뜻.

🔥 함수 안에서 선언(var)되지 않은 변수는 무조건 window임

✅ 변수선언과 위치 - 호이스팅 개념

#️⃣ var 변수선언

console.log("a: ", a); // undefined a는 있는데 초기화되지 않은 a가 있다고 인식하는 것
console.log(a); // undefiend
var a = 1; //var a 는 준비물. 이 준비물에 위에서 먼저 인식되어서 공간이 마련된다 (hoist)
console.log(a); //1

//---------------------------
// 변수를 선언하지 않고 사용한다면?
console.log(a);
a=1; // 반대경우에도 선언하지않았으므로 준비물이 생성되진 않지만(hoisting이 안됨) 윈도우전역변수에 1이 대입되어 콘솔에서 먼저 출력이되긴한다.

console.log(num); // 호이스팅한 var 선언으로 인해 undefined 출력
var num; // 선언
num = 6; // 초기화
console.log(num); //6

a = 2;
var a;
console.log("hoisting: " + a); //2

console.log("hoisting: " + a); //undefined
var a = 2; // var a 만 호이스팅으로 올라가므로 2가 출력안됨

a = 2;
console.log("hoisting: " + a); //2
var a;

✅ 변수선언과 위치 - 지역변수와 전역변수의 선언 순서 구분하기

// 전역변수의 특징
for (var k in window) //for안에 담았음에도 지역변수가 아닌 전역변수로 올라가서 window에서 확인가능
    console.log(k);

window.a = 2; // 전역변수는 윈도우 객체에 정의되고 a속성도 동적으로 생성됨
console.log(a); // 2

var a = 2; // 선언할 때 window객체로 올라감
console.log(a); // 2

//전역변수가 있던 곳에 지역변수가 갑자기 선언된다면?

var f1 = function () {
    b = 1; // 선언하지 않고 쓰면 함수 안이든 밖이든 전역변수의 속성(window.b=1;)으로 들어간다
    console.log("window.a: " + window.b);// let으로 변수를 선언하면 undefined지만 var이나 선언안했을땐 1
    // var b가 없으면 전역변수 처리되고 끝남.
    
    var b; // var b가 아래에 있을경우, 콘솔문 이전에 처음부터 var b가 호이스팅되어서 지역변수처리됨

    console.log("b: ", b); // 1
    console.log(window.b); // undefined
}

f1();

✏️ 자바스크립트에서 함수는 ??? 이다! 그래서 new Function()이 된다.

지식을 깊게해주는 또다른 글 :) * 그냥 참고용 *

https://developer.mozilla.org/ko/docs/Glossary/First-class_Function

✏️ for in 배열에서 키값 읽어오기 ({객체}도 가능)

✏️ for of 배열에서 value값 읽어오기 ({객체} 불가)

✏️ 함수 표현식

✏️ 함수 선언식

✏️ JS 함수의 특수 프로퍼티 arguments

✏️ var 변수의 유효 범위

✏️ 전역 객체

저작자표시 비영리 변경금지 (새창열림)