티스토리 뷰

코딩 공부/생활 코딩

생활 코딩 - 유효범위

찬찬잉 2021. 8. 18. 22:21

전역 변수와 지역 변수

 

결과는 global이다. 

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>생활코딩</title>
</head>

<body>
    <script>
        var vscope = 'global';

        function fscope() {
            alert(vscope);
        }
        fscope();
    </script>
</body>

</html>

함수의 정의를 바꿔보자. 로컬을 경고창에 출력하게 된다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>생활코딩</title>
</head>

<body>
    <script>
        var vscope = 'global';

        function fscope() {
            var vscope = 'local';
            alert('함수안 ' + vscope);
        }
        fscope();
        alert('함수밖 ' + vscope);
    </script>
</body>

</html>

함수 안 지역변수와 함수 밖 전역변수에 관한 설명이다.  영어론 local, global

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>생활코딩</title>
</head>

<body>
    <script>
        var vscope = 'global';

        function fscope() {
            vscope = 'local';
            alert('함수안' + vscope);
        }
        fscope();
        alert('함수밖' + vscope);
    </script>
</body>

</html>
<body>
    <script>
        var vscope = 'global';

        function fscope() {
            var vscope = 'local';
        }
        fscope ();
        alert(vscope);
    </script>
</body>
    <script>
        var vscope = 'global';

        function fscope() {
            vscope = 'local';
        }
        fscope ();
        alert(vscope);
    </script>

지역 = local

전역 = global

 

var가 없을 경우 전역변수를 출력

 

전역변수를 제대로 사용할 수 없다면 지역변수를 써야합니다.

전역 변수는 쓰면 안된다는 인식이 존재한다.

 

 

유효범위의 효용

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>생활코딩</title>
</head>

<body>
    <script>
        function a() {
            var i = 0;
        }
        for (var i = 0; i < 5; i++) {
            a();
            document.write(i);
        }
    </script>
</body>

</html>

답 : 01234

<script>
        function a() {
            i = 0;
        }
        for (var i = 0; i < 5; i++) {
            a();
            document.write(i);
        }
    </script>

var을 제거하면 브라우저는 무한로딩 후 다운된다.

같은 이름의 변수를 중복해서 사용했지만 각각의 취지가 다를때 문제가 발생할 수 있다.

 

이런 의미에서 유효범위를 만들게 되었다.

 

전역변수의 사용

어쩔 수 없이 전역변수를 사용해야할때

 

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>생활코딩</title>
</head>

<body>
    <script>
        var MYAPP = {}
        MYAPP.calculator = {
            'left': null,
            'right': null
        }
        MYAPP.coordinate = {
            'left': null,
            'right': null
        }

        MYAPP.calculator.left = 10;
        MYAPP.calculator.right = 20;

        function sum() {
            return MYAPP.calculator.left + MYAPP.calculator.right;
        }
        document.write(sum());
    </script>
</body>

</html>

myapp이란 전역변수 하나만 생성을하고 변수하나에 값을 넣게 된다. 

전역변수는 절대로 이름이 충돌하지 않도록하는것이 핵심이다.

 

전역 변수를 사용하지 않는 방법

 

<script>
        (function () {
            var MYAPP = {}
            MYAPP.calculator = {
                'left': null,
                'right': null
            }
            MYAPP.coordinate = {
                'left': null,
                'right': null
            }
            MYAPP.calculator.left = 10;
            MYAPP.calculator.right = 20;

            function sum() {
                return MYAPP.calculator.left + MYAPP.calculator.right;
            }
            document.write(sum());
        }())
    </script>

function이란 함수를 이용해서 감싸서 사용할 수 있다. 더이상 전역 변수가 아닌 함수의 지역변수가 된것이다.

 

<script>
        for (var i = 0; i < 1; i++) {
            var name = 'coding everybody';
        }
        alert(name);
</script>

자바에서 헷갈릴까봐 설명한 영상 패스

 

정적 유효범위

 

    <script>
        var i = 5;

        function a() {
            var i = 10;
            b();
        }

        function b() {
            document.write(i);
        }

        a();
    </script>

값은 5이다.

'코딩 공부 > 생활 코딩' 카테고리의 다른 글

생활 코딩 - 클로저  (0) 2021.08.18
생활 코딩 - 값으로서의 함수와 콜백  (0) 2021.08.18
생활 코딩 - 객체  (4) 2021.08.17
생활 코딩 - 배열  (1) 2021.08.17
생활 코딩 - 함수  (0) 2021.08.16

UP NEXT : 코딩 공부/생활 코딩

댓글
© 2022 chanchaning