JavaScript Function & Variable

Let's Just Go·2022년 6월 15일

JavaScript

목록 보기

2/10

JavaScript

Function

Define Function

Define Function

function 함수이름(매개변수 이름) { };
{ }안에 내부 로직을 진행
자바와 다른 점은 return 타입과 매개변수 타입을 지정하지 않는다는 것
변수에 함수를 만들어 담아서 함수 정의 가능
변수에 화살표를 사용하여 함수 정의 가능
선언한 함수를 다른 변수에 할당하여 변수를 호출하여 사용 가능

Code

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

<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>Document</title>
</head>

<body>
    <script>
        // 함수 정의 
        function calcTotal(x) {
            console.log('함수 호출!');

            var total = 0;

            for (var n = 1; n <= x; n++) {
                total += n;
            }
            return total;
        }

        function add(n1, n2) {
            return n1 + n2;
        }

        // 함수 리터럴 
        var add2 = function (n1, n2) {
            return n1 + n2;
        }
        console.log(add2(10, 20));

        // 화살표 함수 
        var add3 = (n1, n2) => {
            return n1 + n2;
        }
        console.log(add3(20, 30));

        // 함수 호출 
        console.log(calcTotal(20));

        var result = calcTotal(10000);
        console.log(result);

        console.log(add(calcTotal(10), calcTotal(5)));
        
        // 함수를 변수에 할당할 수 있음 
        var ct = calcTotal;
        var result = ct(10);
        
    </script>
</body>

</html>

Parameter

Parameters

JS는 함수에서 지정한 매개변수 이상의 값을 입력해도 함수에서 사용할 수 있음
함수의 매개 변수에 default 값을 지정할 수 있음

Code

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

<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>Document</title>
</head>

<body>
    <script>
        // begin ~ end 까지의 총합을 구해주는 함수 
        function clacRangeTotal(begin, end) {
            var total = 0;

            console.log(arguments);
            console.log('길이 : ' + arguments.length);
            // 함수에 전달되는 매개 값들은 arguments 객체에서 전부 확인 가능
            // 매개변수를 초과하는 값도 JS는 함수안에서 활용할 수 있음
            // 즉, JS에서 매개변수는 큰 의미가 없음 

            for (var i = begin; i <= end; i++) {
                total += i;
            }
            return total;
        }
        var totalnum = clacRangeTotal(1, 10);
        console.log('실행 결과 값 : ' + totalnum);

        var totalnum = clacRangeTotal(1, 10, 52, 30, 534);
        console.log('실행 결과 값 : ' + totalnum);
        // JS의 함수는 매개변수의 개수를 다르게 주더라도 작동은 하지만 굳이 이렇게 사용하지 않아도 됨

        function selectRandomFood() {
            var rn = Math.random();
            return rn > 0.5 ? '짜장면' : '짬뽕';
        }

        console.log('랜덤 음식 : ' + selectRandomFood());

        function multiply(n1, n2) {

            if (typeof n1 !== 'number' || typeof n2 !== 'number') {
                console.log('숫자로 전달하세요.');
                return;
                // 매개변수로 숫자만 오도록 
            }
            return n1 * n2;
        }
        var res = multiply(3, '메롱');
        console.log(res);

        // 매개변수의 default 값 지정 
        function sayHello(language = '한국어') {
            if (language === '한국어') {
                console.log('안녕하세요!');
            } else if (language === '영어') {
                console.log('hello');
            } else if (language === '일본어') {
                console.log('곤니찌와');
            }
        }
        sayHello();
        // 매개값을 적지 않아도 default값을 지정했기 때문에 동작
    </script>
</body>

</html>

Return

Return

return이 없는 함수는 자바와 마찬가지로 void
return을 적고 뒤에 아무 값도 적어주지 않으면 함수를 강제 종료 할 수 있음
하나의 함수는 하나만 return 가능

Code

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

<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>Document</title>
</head>

<body>
    <script>
        // void함수는 단독 호출해서 사용하며 다른 함수의 인자로 전달이 불가
        function greetings(nickname) {
            var bad_nick = ['멍충이', '바보', '쓰레기']
            if (bad_nick.includes(nickname)) {
                console.log('나쁜말은 하지 마세요!!!!!')
                return; // 함수 강제 종료 
            }
            console.log(nickname + '님 안녕하세요!');
        }

        greetings('뚜잇뚜잇');
        greetings('쓰레기');

        function operateAll(n1, n2) {
            var li = [n1 + n2, n1 - n2, n1 * n2, n1 / n2];
            return li;
        }

        var results = operateAll(10, 2);
        console.log(results);
        console.log(results[2]);
    </script>
</body>

</html>

Multi Parameter

Multi Parameter

변수 앞에 … 붙이면 가변 변수라는 뜻
가변 변수는 여러 개의 값을 받을 수 있는 변수를 의미

Code

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

<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>Document</title>
</head>

<body>
    <script>
        // 매개값 2개 
        function add(n1, n2) {
            return n1 + n2;
        }

        // n개의 정수의 합을 구하는 함수 
        function addAll(name, ...numbers) {
            console.log(name + '님 안녕하세요');
            console.log(numbers);
            var total = 0;
            for (var num of numbers) {
                total += num;
            }
            return total;
        }

        var result = addAll('하잉', 10, 20, 30, 40, 50, 60, 70, 80, 90, 100);
        // numbers는 ...을 붙였으므로 가변인수라는 뜻
        // numbers라는 변수가 배열로 만들어줌 
        console.log(result);
    </script>

</body>

</html>

CallBack

Callback

함수의 매개값으로 함수가 전달되는 방식
특정 event에서 호출되며 다른 함수의 매개값이 되는 함수
비동기 방식에서 많이 사용
- 동기 : 다른 작업을 하지 못하고 순차적으로 진행하는 것
- 비동기 : 다른 작업을 하고 있다가 특정 상황이 충족되었을 때만 진행하는 것
이벤트 처리에서 많이 사용

Code

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

<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>Document</title>
</head>

<body>
    <script>
        // callback 
        function showNumbers(n, func) {
            for (var i = 1; i <= n; i++) {
                func(i);
                // 매개값으로 받은 함수를 불러와서 연산 진행
            }
        }

        function a(i) {
            if (i % 2 === 0) {
                console.log(i);
            }
        }
        showNumbers(10, a);
        // showNumbers의 매개값으로 함수가 전달됨 
        // 매개값이 10이 들어왔고 짝수가 나올 때 값을 출력하는 함수가 있으니 
        // 10이하의 짝수가 출력됨

        function plusMinus(a, b, callback) {
            callback(a + b, a - b)
        }

        function b(res1, res2) {
            console.log(res1);
            console.log(res2);
        }

        plusMinus(10, 20, b);
        // 함수의 매개값으로 다른 함수를 사용 
    </script>
    
</body>

</html>

Variable

Scope

Scope

해당 변수, 함수 등에서 선언된 곳에서만 유효한 범위를 Scope라고 함
지역 변수 (local variable)
- 특정 범위 안에서 선언된 변수로 특정 범위가 끝나면 메모리에서 사라짐
- ex) 함수에서 정의된 변수는 함수가 종료되면 메모리에서 사라지기 때문에 함수 밖에서 참조될 수 없음
전역 변수 (global variable)
- 특정 블록 안에서 선언된 변수가 아닌 변수
- 전역 변수는 어디에서도 참조할 수 있음
- 전역 변수는 특정 함수나 범위가 종료되어도 메모리에서 사라지지 않음

Code

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

<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>Document</title>
</head>

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

        function outer(x) {
            var y = 'outer local y';
            console.log('x : ' + x);
            console.log('y : ' + y);
            // x는 전역변수이므로 함수 안에서도 참조 가능 

            function inner() {
                var x = 'inner local x';
                var z = 'inner local z';
                console.log(x);
                console.log(y);
                console.log(z);
                // x는 inner local x가 출력 
            }
            inner();
            // outer()안에서는 inner()는 반드시 호출
        }

        outer('outer local x');
        // outer() 안에 outer local x를 지역 변수 x에 넣어줌

        console.log(x);
        // 여기서 global x가 출력 
        // 왜냐면 outer와 inner안에서 선언된 x변수는 지역변수이므로 함수가 종료되면 
        // 메모리에서 사라지기 때문에 남아있는 전역변수가 출력
    </script>
</body>

</html>

Var

Var 변수 문제점

중복 선언 허용
블록 레벨 범위 지원하지 않음
- 함수 레벨 범위 이외에는 모든 변수를 전역 변수로 판단
변수 호이스팅
- var 키워드로 변수를 선언하면 호이스팅으로 인해 변수가 자동으로 끌어올려진 것처럼 동작
- 헷갈릴 수 있겠다
let과 const를 사용하는게 좋을 듯…?

Code

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

<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>Document</title>
</head>

<body>
    <script>
        // var의 문제점
        // 1. 중복 선언 허용 
        // 동일 이름 변수가 선언된 지 모르고 변수를 중복 선언하면 
        // 의도치 않게 변수의 값이 변경되는 부작용 발생 
        var x = 1;
        var x = 100;

        console.log(x);
        // 100 출력 

        // 2. 블록 레벨 스코프 지원하지 않음 
        // var 키워드는 함수만 블록으로 지원하기 때문에 함수 안에서 생성된 변수만 지역변수라고 취급 
        // 함수 외의 블록들에서는 모두 전역변수로 일괄 적용 
        var i = 1;
        for (var i = 0; i < 10; i++) {}

        console.log('i값은 : ' + i);
        // 10 출력 
        // 반복문에서 동일한 변수인 i로 되어 있기 때문에 i는 10으로 출력 

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

        var flag = true;
        if (flag) {
            var temp = '메롱';
        }

        console.log(temp);
        // java나 c++은 temp는 출력 x (tempt는 지역변수라서) 하지만 js는 temp 출력 O
        // js는 함수안에 있는 변수만 지역변수라고 취급

        // 3. 변수 호이스팅 
        // var키워드로 변수를 선언하면 호이스팅에 의해 변수 선언문이 자동으로 맨 위로 
        // 끌어올려진 것처럼 동작 흐름 해석에 방해되고 가독성과 유지보수성을 떨어트림

        y = 100;
        console.log('y: ' + y);
        var y;
        // 이게 되네...
    </script>
</body>

</html>

Let

var 변수의 문제 모두를 let 변수를 사용하게 되면 모두 해결 가능
let 변수는 값을 변경할 수 있음
중복 선언 불가능
블록 레벨 Scope 인정해줌
변수 호이스팅 발생 안함
변경 가능성이 있는 변수를 let으로 설정

Code

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

<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>Document</title>
</head>

<body>
    <script>
        // let
        // 1. 변수 중복 선언 불가능 
        let x = 100;
        // let x = 200;

        // 2. 블록 레벨 스코프 인정 
        if (true) {
            let y = 100;
            console.log('if 내부 : ' + y);
        }

        // console.log('if 외부 : ' + y);
        // let 변수 지역변수 인식 

        // 3. 변수 호이스팅 발생 x 
        // z = 10;
        // console.log(z);
        // let z;

				let  y = '변해?';
        console.log(y);
        y = '변하네...';
	      console.log(y);
    </script>
</body>

</html>

Const

var 변수의 문제 모두를 const 변수를 사용하게 되면 모두 해결 가능
const 변수는 값을 한번 넣으면 값의 변경이 불가능함
const 변수에 객체를 저장하면 객체의 주소 값만 바뀌지 않으면 객체의 내용은 바뀌어도 상관 X
변경 가능성이 없는 변수를 const로 지정

Code

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

<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>Document</title>
</head>

<body>
    <script>
        const x = '헬로';
        console.log(x);

        // x = '안메롱';
        // 값의 변경이 불가능 

        // const와 객체(객체, 배열, 함수 )
        const person = {
            name: 'Moon',
            age: 27
        };
        person.name = 'Park';
        console.log(person.name);
        // const 변수에는 객체가 들어갈 수 없기 때문에 주소값이 저장 
        // const 변수에 주소값이 저장되어 있기 때문에 주소만 변경되지 않으면 됨 
        // const 변수를 사용해도 객체의 내용은 바꿀 수 있고 주소는 바꿀 수 없음

        // 객체 자체를 변경 (주소값 변경 )
        // 안되는 코드 
        // person = {
        //     name : 'lee',
        //     age : 30
        // }
        // 이렇게 작성하면 const변수인 person의 주소값이 바뀌기 때문에 안됨
    </script>
</body>

</html>

Let's Just Go

안녕하세요! 공부한 내용을 기록하는 공간입니다.

이전 포스트

JavaScript Basic

다음 포스트

JavaScript Function & Variable

JavaScript

JavaScript

Function

Define Function

Parameter

Return

Multi Parameter

CallBack

Variable

Scope

Var

Let

Const

JavaScript Basic

JavaScript DOM

0개의 댓글