[JavaScript] 개발자 지망생 스터디 - 4일차

■ Operator

• 산술 비트 연산자
  • 정수 데이터를 가지고 연산을 수행하는데 연산은 비트 단위로 이루어지고 결과는 다시 10진 정수로 리턴을 해주는 연산자
  • ~ : 단항 연산자인데 1의 보수를 구해주는 연산자 ※ 0 -> 1, 1 -> 0
  • & : Bit AND, 2개의 데이터 모두 1일 때 만 1 그 이외의 경우는 0
  • | : Bit OR, 2개의 데이터 모두 0일 때 만 0 그 이외의 경우는 1
  • ^ : Bit XOR(eXclusive OR): 2개의 데이터가 같으면 0 다르면 1
  • >> : 이진수를 오른쪽으로 이동시키는 연산자 - 첫번째 비트는 이동 대상이 아님
  • >>> : 이진수를 오른쪽으로 이동시키는 연산자 - 첫번째 비트도 이동 대상이어서 양수의 경우는 >> 와 동일하지만 음수의 경우 >>와 다르게 동작
  • << : 이진수를 왼쪽으로 이동시키는 연산자

    <script>
        console.log(~14); // 1의 보수는 부호는 반대가 되고 절대값 1차이
        console.log(27 & 14); // 10
        console.log(27 | 14); // 31
        console.log(27 ^ 14); // 21
        console.log(14 << 2); // 한 번 밀때 마다 2배씩 증가
        console.log(14 >> 2);
        console.log(14 >>> 2);
        console.log(-14 >> 2); // 음수의 경우는 >>> 과 결과가 다름
        console.log(-14 >>> 2);
    </script>

• 논리 연산자
  • 데이터를 Boolean 형태의 하나의 값으로 간주하고 논리 연산을 수행하는 연산자
  • &&(AND) : 둘 다 true 일 때 만 true
  • ||(OR) : 둘 다 false 인 경우만 false
  • !(NOT) : true 이면 false 그리고 false 이면 true
  • && 연산의 경우는 앞의 데이터가 false 이면 뒤의 내용은 확인하지 않음
  • || 연산의 경우는 앞의 데이터가 true 이면 뒤의 내용은 확인하지 않음
  • Boolean 이외의 데이터를 가지고 && 와 || 연산 가능 (이 경우는 결과가 Boolean이 아닐 수 있음)
  • Falsy : false 로 간주하는 데이터 - 0, null, NaN(Not A Number), undefined, ""(아무것도 없는 문자열)
  • Truthy : true로 간주하는 데이터 - Falsy 가 아닌 데이터

    <script>
        var x = 10;
        // 앞의 식의 결과가 false 이면 뒤의 식을 확인하지 않음.
        let result = x > 10 && x++;
        console.log(x); // 10

        // javascript는 Boolean이 아니어도 && 연산을 할 수 있음.
        result = true && 10;
        console.log(result); // 10

        let data1 = null;
        let data2 = [3, 4];
        // data1 Falsy 라면 data2가 대입되고 Truthy 라면 data1이 대입됨.
        result = data1 || data2;
        console.log("결과 : " +result);
        // 문자열과 다른 데이터를 + 하면 다른 데이터를 문자열로 변환해서 결합함.
        
        console.log("12" * 3); 
        // 문자열과의 곱셈 : 다른 언어와 다르게 JavaScript에서는 Error가 나지 않고 연산을 실행함.
    </script>

• 복합 할당 연산자
  • 연산 과 할당을 동시에 수행

var x =10;
x += 9; //x 가 참조하고 있는 10 + 9 를 하고 그 결과를 x 가 참조

 

• 문자열 연산자
  • + : 다른 데이터를 문자열로 변환해서 연결을 시켜주는 연산자
  • * : 숫자로 변환이 가능한 문자열이라면 곱하기를 해서 숫자를 결과로 리턴
• 삼항 연산자
  • 표현식? 표현식1 : 표현식2
  • 표현식이 true 이면 표현식1 이 남고 false 이면 표현식2 가 남음

    <script>
        var a1 = 20;
        var a2 = 30;
        // 맨 앞의 내용이 true이면 다음 내용이 남고 그렇지 않으면 마지막 내용이 남음.
        let max = (a1>a2)?a1:a2;

        console.log("a1 : " +a1);
        console.log("a2 : " +a2);
        console.log("큰 값은? " +max);
    </script>

• 쉼표 (,) 연산자
  • 두 피연산자를 모두 평가한 후 오른쪽 피연산자의 값을 반환
  • 연속해서 적용
• ?? (Nullish coalescing operator - 널 병합 연산자)
  • 왼쪽의 데이터가 null 또는 undefined 일 때 오른쪽 데이터를 리턴하고 그렇지 않으면 왼쪽의 데이터를 리턴하는 연산자
  • || 를 이용하는 것과 유사하지만 조금 다름

    <script>
        var data1 = 0;
        var data2 = "JavaScript";

        // 0은 falsy 값이라서 data2가 남음.
        let result = data1 || data2
        console.log(result);

        // data1 이 null이 아니기 때문에 data1이 남음. 
	// ?? falsy를 판단하는 것이 아니고 데이터를 존재 여부를 확인
        result = data1 ?? data2
        console.log(result);
    </script>

• 기능에 따른 분류
  • new 연산자 : 생성자를 호출해서 인스턴스를 생성하고 인스턴스의 참조를 리턴하는 연산자
  • this: 생성자나 객체 내부의 함수에서 객체 자신을 가리키는 연산자
  • typeof: 데이터의 자료형을 문자열로 리턴해주는 연산자
  • delete 연산자
    • 객체의 속성이나 배열의 요소를 삭제하는 연산자
    • 기존 데이터는 undefined
  • instance of : 객체가 특정 클래스로부터 만들어졌는지 확인하기 위한 연산자
  • in : 데이터가 객체나 배열의 요소인지 확인해주는 연산자
  • void : 함수를 만들 때 값을 리턴하지 않도록 지정하기 위한 연산자

    <script>
        var str = "카카오";
        console.log(typeof str); // 카카오의 type은 String 이기 때문에 string 출력

        var ar = ["카카오뱅크", "카카오페이", "카카오프렌즈"];
        console.log("카카오vx" in ar); // 존재 여부 확인 -> ar의 배열에 해당 data가 없기 때문에 false 출력
    </script>

• 연산자의 우선 순의
  1. ., [인덱스] : 요소 접근
  2. ( ) 나 new
  3. 단항 연산자 : !, ++, --, typeof, void, delete, 부호 + 와 -
  4. %, *, /
  5. 사칙 연산 +, -
  6. 쉬프트 연산 : >>, >>>, <<
  7. 크기 비교 : <, <=, >, >=
  8. 동일성 비교 : ==, === , !=, !===
  9.  &, ^, |(순서대로)
  10. &&, ||
  11. ? :
  12. =, +=...
  13. ,

■ 제어문(Control Statement)

기본적인 명령의 흐름은 왼쪽에서 오른쪽으로 위에서 아래로 임. 이런 명령의 흐름을 변경하기 위한 명령어가 제어문.

• 분기문
  • 조건이나 값에 따라 다른 문장을 수행하는 것
  • if
  • 표현식

if(표현식){
	표현식이 Truthy 일 때 수행할 내용
}
else if(앞의 표현이 Falsy 일 때 다시 평가할 표현식){
	앞의 표현식이 Falsy 이고 현재 표현식이 Truthy 일 때 수행할 내용
}
else{
	앞의 모든 표현식이 Falsy 일 때 수행할 내용
}

 

- else if 는 0개 이상 여러 번 작성 가능
- else 는 생략하거나 1번만 작성 가능
- if 와 else if 그리고 else 는 별도의 블럭으로 처리
- 위의 표현식이 true 라면 아래 표현식은 확인하지 않음.

    <script>
        // DATA를 입력받기
        var score = prompt("점수를 입력하세요");
        console.log(score);

        // 점수가 60 보다 크다면 합격이라고 출력
        if(Number(score) >= 60){
            alert("합격")
        }

        // 점수가 60이상이면 합격 아니면 불합격이라고 출력
        if(Number(score) >= 60){
            alert("합격")
        }else{
            alert("불합격")
        }

        // 90이상 = A, 80이상 = B, 60이하 = C, 나머지 = F
        if(Number(score) >= 90){
            alert("A");
        }else if(Number(score >= 80)){
            alert("B");
        }else if(Number(score >= 60)){
            alert("C");
        }
        else{
            alert("F");
        }
    </script>

• switch : 값에 의한 분기
  • 표현식

switch(표현식){
	case 값1:
	표현식의 결과가 값1 일 때 수행할 내용
	break;
	case 값2:
	표현식의 결과가 값2 일 때 수행할 내용
	break;
	...
	default:
	일치하는 값이 없을 때 수행할 내용
	break;
}

 

- 표현식의 결과는 문자열이나 정수 또는 Boolean 이어야 함.
- 값의 자리에는 반드시 값을 기재하는 것이 아니라 표현식도 가능
- case 문의 개수는 여러 개 가능하지만 생략은 안됨
- default 는 생략하거나 1번만 작성
- break 가 없으면 break를 만날때까지 모든 내용을 수행.(fall through)
- switch(true)로 작성하고 case 문에 Boolean 표현식을 작성하는 것도 가능.

 

• 반복문(Loop) - for
  
  • 표현식

for(처음 한 번 수행되는 식; 판별식; 두번째 수행되는 식){
	반복할 내용;
}

- 처음 한 번 수행되는 식을 수행하고 판별식을 확인해서 falsy 가 아니면 반복할 내용을 수행

- 이후 부터는 두번째 수행되는 식을 수행하고 판별식을 확인해서 falsy 가 아니면 반복할 내용을 수행
- 판별식이 falsy 가 되면 반복 내용을 종료

    <script>
        // Hello JavaScript를 3번 출력
        console.log("Hello Javascript");
        console.log("Hello Javascript");
        console.log("Hello Javascript");
        
        // 0부터 3보다 작을 때 까지 하나씩 증가하면서 수행
        // 0, 1, 2
        // 스파게티 코드가 제거되서 유지보수가 편리해짐.
        for(var i=0; i<3; i++){
            console.log("Hello Javascript");
        }
        
        // 일정한 패턴이 반복되는 반복문 (ex, 신문사 URL 페이지 1..2..3)
        // image1.png image11.png image21.png image22.png
        // 위의 내용을 반복문을 이용해서 해결
        for(var i=0; i<4; i++){
            console.log("image"+(10 * i + 1)+".png”);
        }
    </script>

• 반복문(Loop) - while
  
  • 표현식

while(표현식){
	수행할 내용
}

- 표현식이 truthy 라면 { } 안의 내용을 수행하고 다시 표현식으로 돌아와서 표현식 Falsy 가 될 때까지 반복

    <script>
        // 초기식을 while 외부에 작성하고 증감식을 반복 블럭 안에 작성하면
        // for와 거의 유사한 역할을 하는 형태를 만들 수 있음.
        var i = 0;
        while(i<4){
            console.log("image" + (10 * i + 1) + ".png");
            i++;
        }
    </script>

• 반복문(Loop) - do ~ while
  • 표현식

do{
	수행할 내용
}while(표현식);

 

- 표현식이 뒤에 있어서 어떤 상황속에서도 수행할 내용은 한 번은 실행.
- 기능적으로는 while 과 동일한데 반드시 한 번은 한다는 의미 전달을 위해 사용.

• 반복문(Loop) - for ~ in
  • 표현식

for(임시변수 in 객체 나 배열){
	수행할 내용
}

 

- 객체의 경우는 속성 이름을 임시변수에 순서대로 대입
- 배열의 경우는 각 요소의 인덱스를 임시 변수에 대입

    <script>
        // do ~ while로 작성하면 반드시 한 번은 수행한다는 의미를 전달함.
        i = 0;
        do{
            console.log("image" + (10 * i + 1) + ".png");
            i++;
        }while(i<4);

        // object 객체 생성 - name 과 age 라는 속성에 adam 과 26이라는 값을 저장
        var obj = {"name" : "adam", "age" : 26};
        // Array 객체 생성
        var ar = [100, 300, 200];

        // obj가 가진 모든 속성을 attt에 대입하고 { } 안의 내용 수행
        for (var attr in obj){
            alert(attr + ":" + obj[attr]);
        }

        // 배열의 경우는 인덱스가 순서대로 attr에 대입
        for (var attr in ar){
            alert(attr + ":" + ar[attr]);
        }
    </script>

• 제어문 작성 규칙
  • switch를 제외한 제어문에서 수행해야 할 내용이 한 줄 이라면 { } 는 생략이 가능
  • 제어문 안에 제어문 사용이 가능 - 안쪽 제어문에서는 바깥쪽 제어문의 데이터를 사용하는 것이 가능
• 기타 제어문

(1) break : switch 나 반복문에서 switch 나 반복문의 수행을 종료하기 위한 명령어

    <script>
        for(var i=1; i<10; i++){
            if(i % 3 == 0){
                // 반복문 중단
                break;
            }
            console.log(i); // 1, 2
        }
    </script>

(2)continue : 반복문에서 아래 내용을 수행하지 않고 다음 반복으로 진행하기 위한 명령어

    <script>
        for(var i=1; i<10; i++){
            if(i % 3 == 0){
                // continue 아래는 수행하지 않고 다음 반복으로 넘어감
                continue;
            }
            console.log(i); // 1, 2, 4, 5, 7, 8
        }
    </script>

break 와 continue 는 if 와 함께 사용합니다.

return : 함수의 수행을 종료하고 0 개 또는 하나의 데이터를 가지고 호출한 곳으로 돌아가도록 해주는 명령어

※ Example

    <script>
        // ***** 5줄 출력
        for(var i = 0; i < 5; i++){
            for(var j = 0; j < 5; j++){
                document.write("*");
            }
            document.write("<br/>");
        }
        document.write("<br/>");

        // *, **, ***, ****, ***** 하나씩 증가하는 구조 (시작위치는 같음 : 왼쪽 정렬)
        for(var i = 0; i < 5; i++){
            for(var j = 0; j < i + 1; j++){
                document.write("*");
            }
            document.write("<br/>");
        }
        document.write("<br/>");

        // *, ***, *****, *******, ******* 2개씩 증가하는 구조 (시작위치는 같음 : 왼쪽 정렬)
        for(var i = 0; i < 5; i++){
            for(var j = 0; j < 2 * i + 1; j++){
                document.write("*");
            }
            document.write("<br/>");
        }
        document.write("<br/>");

        // *****, ****, ***, **, * 1개씩 감소하는 구조 (시작위치는 같음 : 왼쪽 정렬)
        for(var i = 0; i < 5; i++){
            for(var j = 0; j < 5 - 1 * i; j++){
                document.write("*");
            }
            document.write("<br/>");
        }
        document.write("<br/>");

        // *, **, ***, **, * 1개씩 증가,감소하는 구조 (시작위치는 같음 : 왼쪽 정렬)
        for(var i = 0; i < 5; i++){
            // 3보다 작을 때 - 3줄은 증가하는 형태로 작성
            if(i <3){
                for(var j = 0; j < i + 1; j++){
                    document.write("*");    
                }
                document.write("<br/>"); 
            }
            // 3보다 크거나 같을 때는 감소하는 형태로 작성
            else{
                for(var j = 0; j < 5 - 1 * i; j++){
                document.write("*");
            }
            document.write("<br/>");
            }
        }
    </script>

 

■ Function

• 개념
  • 한 번에 수행해야 할 코드를 하나의 이름으로 묶어두고 사용하는 것으로 독립적으로 메모리를 할당받아서 수행됨
• 목적
  • 중복되는 코드를 방지하기 위함
  • 모듈화 - 코드를 읽기 좋고 실행하기 편리하도록 분할
• 종류
  • Maker Function : 언어 차원에서 제공하는 함수로 JavaScript에서는 window 객체가 제공
  • User Define Function : 개발자가 필요에 의해서 생성한 것
  • 3rd party Function : 다른 개발자가 만든 함수, 이 함수를 사용할 때는 주의가 필요함.
    (보안이나 라이센스 문제를 생각해야 함)
• 자바스크립트에서 함수는 일급 객체
  • 함수도 하나의 자료형
  • 변수에 대입할 수 있고 리턴할 수 도 있음
• 함수를 선언: 함수를 만드는 것

- 예전 방식

function 함수이름(매개변수 나열){
	수행할 내용
return 데이터; //없는 경우도 있음
}

- 변수에 대입하는 방식

[var | let | const] 이름 = function(매개변수 나열){
	수행할 내용
return 데이터; //없는 경우도 있음
}

 

- 화살표 함수

[var | let | const] 이름 = (매개변수 나열) => {
	수행할 내용
return 데이터; //없는 경우도 있음
}

 

• 함수 호출(실행)
  • 직접 호출 : 함수이름(매개변수 대입)
  • 콜백(상태 변화 나 이벤트가 발생하면 호출)으로 지정해서 호출 : 특정 이벤트가 발생하면 자동으로 함수를 실행하도록 해주는 것
• 함수의 구성
  • 이름 : 함수를 구별하기 위한 이름 - 이름은 자기 영역에서 중복되면 안됨, 중복되면 이전 내용이 사라짐
  • 매개변수(parameter, argument, 인자, 인수 등): 함수를 호출할 때 넘겨주는 데이터
  • return: 함수의 코드를 실행하고 호출 한 곳에 넘겨주는 데이터 - 결과

    <script>
        // 함수 생성 - 선언했다고 함.
        // 함수의 선언문은 현재 모듈에 저장
        let f = () => { // => 화살표 함수 (Function 대신하여 사용 가능) "let f= function() {"
            for (var i=0; i<3; i++){
                console.log("Hi Function");
            }
        }

        // f라는 함수를 호출
        f();

        console.log("방해");

        f();
    </script>