국비수업/수업정리

자바스크립트 / 4

밀김 2023. 3. 24. 10:02
728x90

 

 

 

 

 

 

 

 

 

- for-in : 데이터 전체를 순회할때 쓰는 자스의 반복문 (배열 총 길이가 몰라도 쓸수있다) 그냥 배열 전체에 뭘 적용해줄때 쓰나?? 

- 배열의 키값은 인덱스이다

 

- 순회하며 인덱스(=키값 ar )을 모조리 꺼내준다

 

- for-of  : array(배열)에서만 사용가능하다. 배열값들을 반환

 

- 하지만 데이터의 일부분을 순회하려면 기존 자바의 for문을 이용하면 된다

 

 

https://yjshin.tistory.com/entry/JavaScript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-for-%EB%AC%B8-for-in-%EB%AC%B8-for-of-%EB%AC%B8

 

[JavaScript] 자바스크립트 for 문, for in 문, for of 문

for 문 for 문은 while 문과는 달리 자체적으로 초기식, 표현식, 증감식을 모두 포함하고 있는 반복문입니다. 따라서 while 문보다는 좀 더 간결하게 반복문을 표현할 수 있습니다. 문법 for (초기식;

yjshin.tistory.com

 

https://webclub.tistory.com/243

 

javascript for in 문

for in 문 for in 문은 객체의 프로퍼티명을 열거하는 반복문입니다. for in 문은 다음과 같은 구문을 사용합니다. // for in 문의 문법 for (변수 in 객체식) { // 문장 } in 의 왼쪽에는 대입할 곳으로 사용

webclub.tistory.com

 


 

<함수>

 

- 자스의 함수에 정의란 없다

 

- 함수에 인자나 구현부를 써준다

 

- 함수도 역시 객체 형태로 되어있다 (다른 변수에 담아쓸수도 있고,배열에 담을수도 있다..)

 

- 자스의 함수는 객체에 담겨서 코드를 갖고 다니는것과 비슷하다고 볼수 있다

 

var add = new Function("x,y","return x+y;")
//괄호안 첫번째는 매개변수, 두번째는 실제 함수의 구현부
//객체의 참조명 add가 곧 함수의 이름이 된다
//하지만 이방식으로는 쓰지 말기~~~~~~~~~~~~~~~~~~~~~~

 console.log(add(1,2));

 

 

- 그래서 하나의 함수 이름이 이곳저곳에서 다르게 불리울수 있다

 

 

var add = function(x,y){
	return x+y;
    }
    //이렇게로도 쓸수 있따 !!! 바람직한 방법 ~~

 

- 함수 작성법에서 function은 소문자로 시작한다

 

function add( x, y){
	return x+y;
    } //이렇게로도 쓸수잇지만 잘 안씀

 

 

- 자스 함수에서 매개변수는 매개변수가 아니다 

 

- 매개변수 값은 arguments라는 컬렉션으로 간다. 직접 받는것이 아닌..

 

 function add (){ //매개인자를 넣지 않아도
        return arguments[0]+arguments[1];
     }
 console.log(add(3,4)); //값은 7이 나온다

 

- 매개변수는 아규먼트츠의 별칭을 만들어주는 역할을 하는 것이다. 직접 매개변수가 값을 전달해주는것이 아님

 

        var sum = function(){
            var num = 0;
            for(var v of arguments){
            //var v = 변수?설정 of arguments들의 인자들을 v에 담아주겠다
                num += v;
            } //for of가 배열의 값들을 모두 반환해줌
            return num;
        }
        console.log(sum(1,3,2,4,67,4,3,3));
        
        //배열값들 모두 더하는 식
        var sum = function(){
            var num = 0;
            for(var i=0; i<arguments.length; i++){
                num += arguments[i];
            }
            return num;
        }
        console.log(sum(1,3,2,4,67,4,3,3));
        //자바식 for문으로 바꾸기

 

 

 


 

 

 

<자스의 지역변수와 전역변수>

 

 

- alert(a) : alert가 되기 전에 a가 undefined를 참조하게 된다 그러므로 var a = 1은 대입된 상태가 아니다 

 

https://sualchi.tistory.com/13721606

 

자바스크립트 변수 선언과 초기화

자바스크립트 변수 선언과 초기화 글. 수알치 오상문 1) 변수 초기화 타입 예제 변수 선언 시 'var'를 생략해도 동작하지만 의미는 다르다. 'var' 대신에 'let'(변수), 'const'(상수)를 지정할 수 있지만

sualchi.tistory.com

 

- 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.

var 로 선언한 변수의 경우 호이스팅 시 undefined 로 변수를 초기화합니다 

 

 

 

        var a =1;
        console.log(a);
        //이렇게 하면 오류가 나지 않고 값이 잘 나온다

 

 

 

- 선언 == 준비

 

- 지역변수로 선언된게 없으면 window객체의 속성을 쓴다 생략되어서 눈에는 보이지 않음

 

        window.a = 1;
        window.alert(window.a);
        //this와 window와 비슷하다고 생각하면 됨

 

- alert(메소드) : 플랫폼(브라우저)가 제공하는 기능이다. 언어에 포함된것이 아님

 

- 전역공간에서 변수를 선언하는것은 전역객체로 들어간다

 

- 변수를 선언하면 블럭이 실행되기 전에 준비된다 

 

        var f1 = function(){
            a = 1;
            console.log(window.a);
        }
        
        f1(); //1이 나온다

 

 

 

https://www.codingfactory.net/10401

 

JavaScript / 전역변수(Global Variable)와 지역변수(Local Variable)

전역변수와 지역변수 변수는 유효범위에 따라 전역변수(Global Variable)와 지역변수(Local Variable)로 구분할 수 있습니다. 전역변수는 함수 외부에서 선언된 변수로, 프로그램 전체에서 접근할 수 있

www.codingfactory.net

 

 

- 함수 내에서 코드를 작성할때는 외부의 영향을 받지 않게 해야한다

 

- 준비물로 준비해놓으냐, window를 사용하느냐

 

 

        var f1 = function(){
            a = 1;
            console.log(window.a); //전역 //출력하라는것은 window의 a였어서 언디파인디드가 나옴
            var a; //지역? 이여서 var a = 1이 됨
        } 
        f1(); //함수 호출

 

 

- 자스에서 지역을 나누는 괄호는 사실상 의미가 없다 (단,var를 사용할때)

 

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

        f1();
        
        //가까운 지역의 값이 나온다 만약 지역변수가 없다면 window객체의 값이 나온다
        //이런것을 아우터 outer라고 한다

 

 

- 래퍼클래스는 완전한 객체 형태의 특징을 갖진 않는다. 그래서 값을 전달할때 참조를 주지 못하고, 박스를 언박싱해서 값을 준다. 

 

- 함수는 호출되고 나면 자기가 호출했던 내용은 메모리에서 삭제된다

 

- 쓰임이 또 있으면(본인만 쓰는게 아니라 공유하고 있으면) 사라지지 않는다. 사라지게 하는 방법은 공유하고있던 애에 null을 대입해주거나 하면 더이상 공유할게 없어서 사라진다

 

- 아우터를 쓰지 않으면 무조건 호출되고 사라짐

 

 


 

 

 

 

 

 

 

 

 

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

> 객체

지식을 깊게해주는 또다른 글 :)

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

 

 

 

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

> arguments란 함수에 전달된 인수에 해당하는 array형태의 객체??

매개변수들이 직접 값을 전달해주는것이 아니라 arguments 컬렉션으로 전달이 된다. 매개변수는 arguments의 별칭같은 것이다. 

 

 

✏️ var 변수의 유효 범위

> 전역변수이다. 그래서 결과값을 예측하기가 어렵고 전역변수라 에러를 만들어 낼수 있다. 사용을 지양해야 한다

 

 

✏️ 전역 객체

>  object를 의미하고 전역범위에 항상 존재하는 객체를 의미한다

 

 

 

✏️ outer chain

> outer 함수는 변수가 선언되지 않았을때 계속 위로 타고타고 올라가서 선언된곳을 찾는것이고 

chain은 메서드를 반복적으로 호출하는 것이다.

 

 

 

✏️ 클로저란?

> 어떤 함수가 자신의 내부가 아닌 외부에서 선언된 변수에 접근하는 것을 뜻한다. 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

 

클로저 - JavaScript | MDN

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다.

developer.mozilla.org

 

 

 

 

✏️ 1, 2 설명해보기

 

/**
* 함수 closure는 객체를 리턴하는데,
* 그 객체에는 함수 getNum, increaseNum를 리턴하고있다.
*
* 즉, 함수 closure는 함수 getNum, increaseNum를 포장한 객체를 리턴하는 함수
*/
function closure() {
 var count = 0;


 return {
   getNum: function () {
     return count;
   },
   increaseNum: function () {
     count++;
   },
 };
}//end of closure


var obj = closure();


// 2
console.log(obj.getNum());  //출력:0
obj.increaseNum();
obj.increaseNum();
obj.increaseNum();
console.log(obj.getNum()); //출력:3


obj = null;


// 3
obj = closure(); 
obj.increaseNum(); //클로저로 다시금 호출됨
console.log(obj.getNum()); //출력:1

 


- 다른 함수에 인자로 전달된 함수 > 콜백함수
- 함수가 함수를 반환하면 > 고차함수
- 선언되지 않은 변수들은 전역변수이다
- 전역 = window
- 선언되기전(준비되기전) 사용되기 전 사용하는것 > 호이스팅
- var가 안붙으면 > 전역 / 붙으면 > 지역

 

 

1 출력

 

지명해줬으니까 10이 나온다

 

 

 

 

 

 

 

 

728x90