[LG CNS AM Inspire CAMP 1기] JavaScript (4) - 연산자, 형변환, 함수, 배열, 객체

1. INTRO

4일차 오후 학습 내용입니다. 연산자, 형변환, 함수, 배열, 객체에 대한 내용을 정리하였습니다.

2. 연산자

연산자는 (+, -, %, /)가 있습니다. 예시를 통해 알아보겠습니다.

아래 예제를 실행해보며 새롭게 안 내용은,
"나머지 연산의 부호는 왼쪽 피연산자의 부호를 따른다",
"일치 연산자(===)는 동등 연산자(==)의 변수값 비교 조건 && 변수타입 비교 이다",
"Object.is() 정적 메서드는 두 값이 같은 값인지 결정한다",
"typeof NaN 은 number 이다" 의 내용입니다.

<script>
        // 나눗셈, 나머지 연산자
        console.log(`7 / 5 = ${ 7 / 5 }`);      // 7 / 5 = 1.4
        console.log(`7 % 5 = ${ 7 % 5 }`);      // 7 % 5 = 2    <= 나머지


        // 나머지 연산의 부호는 왼쪽 피연산자의 부호를 따름
        console.log(`7 % 5 = ${ 7 % 5 }`);      // 7 % 5 = 2
        console.log(`7 % -5 = ${ 7 % -5 }`);    // 7 % -5 = 2
        console.log(`-7 % 5 = ${ -7 % 5 }`);    // -7 % 5 = -2
        console.log(`-7 % -5 = ${ -7 % -5 }`);  // -7 % -5 = -2


        // 문자열 결합
        console.log("Hello, " + 'JavaScript' + `!!!!`);


        // 문자열의 일부를 선택 => 문자열[인덱스]
        //               0         1      
        //               012345678901234567
        const message = "Hello, JavaScript!";
        console.log(message[0]);    // H   <= 첫번째 글자
        console.log(message[17]);   // !
        console.log(message[message.length - 1]);    // !   <= 마지막 글자
        console.log(message[18]);   // undefined


        // postfix 방식, prefix 방식
        let x = 100;
        console.log(x);     // 100  
        if (x++ > 100) {
            console.log("100 초과");
        } else {
            console.log("100 이하");     // 100 이하          
        }
        console.log(x);     // 101


        let y = 100;
        console.log(y);     // 100
        if (++y > 100) {
            console.log("100 초과");     // 100 초과
        } else {
            console.log("100 이하");
        }
        console.log(y);     // 101
    </script>


    <script>
        // 동등 연산자(equality operator), 일치 연산자(strict equality operator)
        let n = 100;
        let s = "100";


        console.log(n, s);                     // 100 "100"
        console.log(typeof n, typeof s);       // number string


        if (n == s) {
            console.log("동등 연산자: 같다");   // 같다 <= 두 변수의 값을 비교
        } else {
            console.log("동등 연산자: 다르다");
        }


        if (n === s) {                         // if (typeof n == typeof s && n == s)
            console.log("일치 연산자: 같다");
        } else {
            console.log("일치 연산자: 다르다"); // 다르다 <= 두 변수의 타입과 값을 함께 비교
        }  


        // Object.is() 메소드
        console.log(-0 === +0);                  // true
        console.log(Object.is(-0, +0));          // false


        console.log(typeof NaN);                 // number
        console.log(Number.NaN === NaN);         // false
        console.log(Object.is(Number.NaN, NaN)); // true
       
        // 삼항 연산자 => (조건식) ? 참일 때 : 거짓일 때
        let x = 100;


        // if - else 구문으로 조건식을 구현
        if (x > 100) {
            console.log("100 초과");
        } else {
            console.log("100 이하");
        }


        // 동일한 로직을 삼하아 연산자로 표현
        console.log(x > 100 ? "100 초과" : "100 이하");
    </script>

3. 형변환

- 강제 형변환

강제 형변환하는 문법은 String(), Number(), Boolean()이 있습니다.
자동 자료형변환은 아래와 같은 예시가 있습니다.
알아두어야 할 부분은, + 는 문자열 결합 연산자, + 외엔 숫자 변환이라는 점 입니다.
추가로, !!는 boolean 함수로 사용하는 것과 같습니다.

    <script>
        // 숫자와 문자열에 + 연산자를 사용하면 숫자를 문자열로 자동 변환
        // + 연산자는 문자열 결합 연산자로 사용
        console.log(10 + 20);       // 30
        console.log("10" + 20);     // 1020
        console.log(10 + "20");     // 1020
        console.log("10" + "20");   // 1020


        // 숫자와 문자열에 + 가 아닌 다른 연산자를 사용하면 문자열을 숫자로 자동 변환
        console.log(20 - 10);       // 10  
        console.log("20" - 10);     // 10
        console.log(20 - "10");     // 10
        console.log("20" - "10");   // 10


        console.log("20" * 10);     // 200
        console.log("20" / 10);     // 2
        console.log("20" % 10);     // 0


        // 부정 연산자를 두 번 사용하면 Boolean() 함수를 사용하는 것과 동일
        console.log(Boolean(0), !!0);  
        console.log(Boolean(1), !!1);  
    </script>

4. 함수

함수 표현식을 사용하면 함수를 변수처럼 사용할 수 있습니다. 표현식으로는 익명 함수 표현식과 기명 함수 표현식이 있습니다. 함수 선언문으로 정의한 함수는 자바스크립트 내부에서 함수 이름과 함수 변수 이름이 동일한 함수 표현식으로 자동 변경합니다. 그리고 기명 함수 표현식은 함수 내부에서 자기 호출 시 사용되는 개념입니다. 예를 들면 팩토리얼이 있습니다.

- 함수를 다른 함수의 인자로 전달

 <script>
        let click = function(fname) {
            fname();
        };


        let loginButtonClick = function() {
            console.log("로그인되었습니다.");
        };
        let logoutButtonClick = function() {
            console.log("로그아웃되었습니다.");
        };


        click(loginButtonClick);
        click(logoutButtonClick);
    </script>

아래의 예시는, switch 문 사용 시 내용 추가를 위해 코드를 수정해야하는 점, let으로 선언 시 코드를 추가해야하는 점의 차이를 보여주는 내용입니다.

    <script>
        let cal = function(f, x, y) {
            switch(f) {
                case "add": console.log(`x + y = ${x + y}`); break;
                case "sub": console.log(`x - y = ${x - y}`); break;
                case "mul": console.log(`x * y = ${x * y}`); break;
                case "div": console.log(`x / y = ${x / y}`); break;                
            }
        };


        let calurator = function(f, x, y) {
            f(x, y);
        };


        let add = function(x, y) {
            console.log(`x + y = ${x + y}`);
        };
        let sub = function(x, y) {
            console.log(`x - y = ${x - y}`);
        };
        let mul = function(x, y) {
            console.log(`x * y = ${x * y}`);
        };
        let div = function(x, y) {
            console.log(`x / y = ${x / y}`);
        };


        calurator(add, 10, 20);
        calurator(sub, 10, 20);
        calurator(mul, 10, 20);
        calurator(div, 10, 20);
    </script>

- 함수를 다른 함수의 리턴값으로 활용

 <script>
        let foo = function() {
            return function() {
                console.log("반환함수");
            };
        };


        let bar = foo();
        bar();
</script>

- 함수의 종류

함수의 종류는 콜백 함수, 즉시 실행 함수, 화살표 함수가 있습니다.

콜백 함수 (callback function)
개발자가 코드를 이용해서 명시적으로 호출하는 함수가 아니고,
개발자는 단지 함수를 등록하기만 하고,
어떤 이벤트가 발생하거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수
이벤트 핸들러 ⇒ 특정 이벤트가 발생했을 때 실행되는 함수

<input type="button" onClick="function() { .... }" />

즉시 실행 함수 = 자기 호출 함수
함수 정의와 동시에 바로 실행하는 함수로, 익명 함수 표현식을 괄호로 둘러싼 후 바로 호출(실행)할 수 있도록 괄호 쌍을 추가합니다.

( function (name) { console.log(`${name}는 즉시 실행됩니다.`); } ) ('이 함수');
                                                                ~~~~~~~~~
                                                   함수 실행에 필요한 인자값을 전달
<script>
        // 익명 함수 표현식을 이용해서 함수를 정의
        const add1 = function (x, y) { return x + y; };
        console.log(add1(2, 3)); // 5
</script>

화살표함수
function, {} 를 생략하고 =>를 넣어서 표현하며, 객체를 반환 할 때엔 ({}) 로 감싸줘야합니다.

 <script>   
        // 화살표 함수
        // function 키워드를 제거하고, 함수 파라미터와 본문 사이에 화살표(=>)를 추가
        const add2 = (x, y) => { return x + y; };
        console.log(add2(2, 3)); // 5
        // 화살표 함수 본문이 결과를 반환하는 구문으로 되어 있는 경우, 중괄호와 return 키워드를 생략할 수 있음
        const add3 = (x, y) => x + y;
        console.log(add3(2, 3)); // 5
        // 매개변수가 하나인 경우, 매개변수를 감싸고 있는 소괄호도 생략이 가능
        const add4 = x => x + 4;
        console.log(add4(2)); // 6
        // 객체를 반환하는 경우에는 반환 객체를 소괄호로 감싸야 함
        const add5 = (x, y) => { return { result: x + y }; };
        console.log(add5(2, 3)); // { result: 5 }
        const add6 = (x, y) => ({ result: x + y });
        console.log(add6(2, 3)); // { result: 5 }
  </script>

5. 배열

배열 요소에 접근하기 위한 방법은 다양합니다. 개별 요소를 직접 참조하거나 for-loop, for-in , for-of, forEach 를 활용할 수 있습니다.

<script>
       
        // 배열의 모든 요소를 순차적으로 가져와서 출력
        let values = [ "빨강", "노랑", "파랑", "초록" ];
       
        console.log("방법1. 개별 요소를 직접 참조해서 출력력");
        console.log(values[0]);
        console.log(values[1]);

        console.log("방법2. for loop를 이용");
        for (let i = 0; i < values.length; i++) {
            console.log(values[i]);
        }


        console.log("방법3. for - in 구문을 이용 => 개별 요소의 인덱스를 반환환");
        for (let index in values) {
            console.log(index, values[index]);
        }


        console.log("방법4. for - of 구문을 이용 => 개별 요소의 값을 반환");
        let idx = 0;
        for (let value of values) {
            console.log(idx++, value);
        }

        console.log("방법5-1. forEach => 개별 요소를 콜백 함수로 전달");
        // 함수 선언문 형태로 콜백 함수를 정의
        function printData(data) {
            console.log(data);
        }
        values.forEach(printData);


        console.log("방법5-2. forEach -------");
        // 함수 표현식 형태로 콜백 함수를 정의
        let printData2 = function(data) {
            console.log(data);
        };
        values.forEach(printData2);


        console.log("방법5-3. forEach -------");
        // 콜백 함수를 직접 정정의
        values.forEach(function(data) {
            console.log(data);
        });


        console.log("방법5-4. forEach -------");
        // 화살표 함수로 콜백 함수를 정의
        values.forEach((data) => {
            console.log(data);
        });


        console.log("방법5-5. forEach -------");
        // 화살표 함수로 콜백 함수를 정의 => 화살표 함수 축약
        values.forEach(data => console.log(data));


        consle.log("인덱스와 값을 함께 출력")
        values.forEach((data, index) => {
            console.log(index, data);
        });


        consle.log("인덱스와 값을 함께 출력 => 화살표 함수 축약")
        values.forEach((data, index) => console.log(index, data));


</script>

6. 객체

객체 사용을 위한 선언 방법 및 활용 예제입니다. 객체는 인덱스가 없으므로 key값으로 접근합니다.

<script>
        // 객체 선언
        let person = {
            "name": "홍길동",
            'age': 23,
            isMarraied: false,
            "favorite colors": [ "red", "blue" ],
            hello: function() {
                console.log(`안녕하세요, 나는 ${this.name}입니다.`);
            }
        };    


        // 객체 항목을 참조 => 객체이름.키이름 또는 객체이름["키이름"]
        console.log(person.name);
        console.log(person["name"]);
        console.log(person["favorite colors"]);
        person.hello();


        // 객체 항목의 값을 변경
        person.name = "김철수";
        person.hello();


        // 객체 속성 추가
        person.email = "chulsu@test.com";
        person["address"] = "서울시 강남구";
        console.log(person);


    </script>

아래의 내용은 객체와 배열을 활용해 데이터에 접근하는 방법입니다.

    <script>
        // 객체 선언
        let person = {
            "name": "홍길동",
            'age': 23,
            isMarraied: false,
            "favorite colors": [ "red", "blue" ],
            hello: function() {
                console.log(`안녕하세요, 나는 ${this.name}입니다.`);
            }
        };    


        // 객체의 모든 항목을 가져와서 출력
        console.log("for-in 구문을 이용 => 객체의 키를 반환")
        for (let key in person) {
            console.log(key, person[key]);
        }


        // Uncaught TypeError: person is not iterable
        /*
        for (let value of person) {
            console.log(value);
        }
        */


        // 객체의 키를 배열로 만들어서 반환
        for (let key of Object.keys(person)) {
            console.log(key, person[key]);
        }


        function print(key, value) {
            console.log(key, value);
        }
        Object.keys(person).forEach(key => print(key, person[key]));
       
        Object.keys(person).forEach(function(key) {
            console.log(key, person[key]);
        });


        Object.keys(person).forEach(key => {
            console.log(key, person[key]);
        });


        Object.keys(person).forEach(key => console.log(key, person[key]));
    </script>

마지막 줄에 쓰여진 예제는 자료형, 객체, forEach, 화살표함수를 모두 활용하는 구문입니다.

7. OUTRO

정리할 내용이 많아지고 있습니다. 수업 끝나면 배가 고파서 바로 정리하기가 어려운데,, 핵심만 요약해서 정리할 수 있도록 해보겠습니다! 감사합니다.

[참고 문헌]

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/is