[자바스크립트] 연산자, 반복문과 제어문, defer

연산자 - 자바 스크립트 연산자

종류
산술연산자	+ - * / % **(거듭제곱)
증감연신자	++ --
비교연산자	== (===) != (!==) > < >= <=
논리연산자	&& || !(단항)
삼항연산자	조건 연산자 (조건식) ? 참 : 거짓 - 참, 거짓 위치에 실행문을 넣을 수 있다.
typeof	단항연산자. 오른쪽의 데이터(변수)의 타입을 알려줌
비트연산자	>> << ~ (1은 0으로 0은 1로 변경 : 1의 보수 연산자)
대입연산자	LV = RV
복합대입연산자	+= 등등
전개연산자 (spread operator)	새롭게 추가된 연산자로 배열, 객체에 포함된 요소들을 펼치는 연산자 - 함수의 파라미터에서 사용되는 경우 - 대입연산자에서 사용되는 경우

 

let a = 3;
console.log('3의 3제곱의 결과' + a **3);

let x = '3';
console.log(x == 3)  // 동등
console.log(x === 3)  // 일치 (타입도 고려)

 

let y = 10;
console.log(8 < y < 20); // 연산을 두번에 걸쳐 나눠한다.
// 1) true < 20
// 2) y < 20 

// 사이의 숫자인지 확인하려면?
console.log(y> 8 && y < 20);

 

단축평가 Short circuit

- 왼쪽 연산의 결과에 따라 오른쪽 연산을 할것인가 말것인가 결정하는 기능
- 관계 연산자에서 사용됨

- 전체 연산의 결과를 확정 지을 수 있다.

종류
&&	//
T && ? ==> ?	T || ? ==> T
F && ? ==> F	F || ? ==> ?

 

let b = 1;
b > 1 || console.log('출력될까요?'); // 왼쪽이 false 니까 오른쪽을 해봄
b == 1 || console.log('출력될까요!'); // 왼쪽이 true 니까 오른쪽을 안 함

 

삼항 연산자

let c = 5;
let d = 3;
c > d ? console.log(`${c}가 ${d}보다 크다.`) : console.log(`${c}가 ${d}보다 작다.`)

 

스프레드 연산자

let obj1 = {name: '홍길동'};
let obj2 = {name: '임꺽정'};

let obj = [obj1, obj2];
console.log(obj[0]);

let tmp = [...obj]; // obj와 같이 배열을 하나로 묶을 때 사용할 수 있다.


console.log(obj)
console.log(tmp); 

let obj3 = {name: '손오공'};
let obj4 = {age: 30};
obj = [...obj3, ...obj4] // 오류 : iterable 데이터만 펼칠 수 있다.
console.log('손오공 객체를 펼침' + obj)

코드	내용
let tmp = [...obj];	obj와 같이 배열을 하나로 묶을 때 사용할 수 있다.
obj = [...obj3, ...obj4] ;	오류 : iterable 데이터만 펼칠 수 있다.

 

iterable 객체

- for ... of 등의 문법을 이용하여 각 요소를 반복할 수 있는 객체
- 배열(Array) 객체는 내장 iterable 객체이기 때문에 for ... of 문법을 이용
- String 객체, Map 객체, Set 객체도 내장 iterable 객체

let ary1 = [1, 2, 3, 4, 5];
let ary2 = [11, 12, 13, 14, 15];

let ary = [...ary1, ...ary2];
console.log(ary);

두 데이터 전부 배열로 되어있기 때문에 사용 가능한 것

 

반복문과 제어문

반복문	제어문
while , do~while, for문 - for문의 종류는 3가지 - continue, break	if, switch~case문

 

for

let ary = [1,2,3,4,5];
for(let i = 0; i < ary.length; ++i){
    console.log(ary[i]);
}

 

for ~ in 반복문

값을 뽑아오는 것이 아닌 인덱스를 뽑아옴. for (변수 in iterable)

for(let j in ary){
    console.log(ary[j]) 
}

 

for~of 반복문

값을 뽑아옴. 자바의 향상된 for문과 같다.

let city = ['서울', '대전', '대구', '부산'];
for (let k of city){
    console.log(k);
}

 

1 ~ 50 사이 데이터 중 3의 배수 이거나 5의 배수인 경우만 출력

for(let i = 1; i <= 50; ++i){
    if(i%3==0 || i%5 ==0){
        console.log(i)
    }
}

 

Falsy로 평가되는 값

falsy : https://developer.mozilla.org/ko/docs/Glossary/Falsy

거짓 같은 값 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

 

let y = "10a";
let result = parseInt(y);
console.log(result); 

result = 10 /y; // NaN ==> false 처럼 동작함
console.log(result);

console.log('----- Falsy test')
// if(null){
// if(NaN){
// if(""){
if([]){
    console.log("실행됨?");
}

// 0, 0.0, -0 : 연산의 결과가 Infinity 인것 = true
let temp = 10/-0; 
console.log(temp);

 

- [], {} 주의 : 이것은 true 이다.
- 0, 0.0, -0 : 연산의 결과가 Infinity 인것 = true

 

[예제] 키보드로부터 숫자를 입력받아 양수이면 "양수" 로 아니면 "음수" 로 경고창을 출력하시오.

출력: alert()_경고창 
입력: prompt(), prompt("메시지"), prompt("메시지", 초기값)

let data = prompt("숫자를 입력하세요: ")

console.log(isNaN(data)); // 숫자가 아닌것만 true

if(isNaN(data) == false){
    if(parseInt(data) > 0){
        alert("양수");
    } else {
        alert("음수");
    }
}

alter() 경고창에 13 이라고 작성했을 때의 결과

 

중첩 for문 : 별찍기

for(let i =0 ; i < 5 ; ++i){
    for(let j = 0; j < (i+1); ++j){
        document.write("*");
    }
    document.write("<br>");
}

document.write() 를 통해 콘솔이 아닌 본문에 * 을 찍을 수 있게 되며 HTML 태그도 사용가능하다.

 

defer

실행위치에 따른 결과

종류	결과
html 의 header 위치에 포함	HTML 파싱 도중에 Javascript fetch --> execute --> HTML parsing ( 파싱시간에 공백이 생김)
async	HTML parsing 과 Javascript fetch 를 동시에. execute 할 때 parsing을 멈춘다.
defer	HTML parsing 과 Javascript fetch 를 동시에. execute 할 때 parsing을 이후로 미룬다. (window.onloag 와 유사하게 동작한다.)

 

중첩 for문 : 별 찍기

let data = '';

for(let i =0 ; i < 5 ; ++i){
    for(let j = 0; j < (i+1); ++j){
        data += '*';
    }
    data += '<br>'
}

let result = document.getElementById("result"); // HTML 객체여야 한다.
// console.log('리절트: ' + result);
result.innerHTML = data;

코드	내용
result.innerHTML = data;	아래의 <div> 태그의 id와 연결하여 본문에 작성한다.

<body>
    <h2>자바스크립트 실행위치에 따른 결과</h2>
    <div id="result"></div>
</body>
</html>

 

이벤트 (같은 결과를 가진다.)

window.onload = function() {
	let data = '';

    for(let i =0 ; i < 5 ; ++i){
        for(let j = 0; j < (i+1); ++j){
            data += '*';
        }
        data += '<br>'
    }

    let result = document.getElementById("result"); // HTML 객체여야 한다.
    // console.log('리절트: ' + result);
    result.innerHTML = data;
 }

window.onload() 메소드는 오로지 한번만 정의할 수 있다는 한계점이 존재
만일 다른 위치의 <script> 태그에서 메소드를 사용하려고 한다면,
이미 한번 정의했다면 중복 처리가 되어 분담 사용이 불가능하다는 단점이 존재한다.