JavaScript | 대화상자,제어문,반복문,배열,호이스팅

자바스크릡트 대화상자
- alert()
사용자에게 메시지를 보여주고, 확인을 기다림
BOM(Browser Object Model)
    윈도우는 최상위 객체 (운영체제 윈도우가 아님)
    원래는 window.alert();라고 쓰는게 맞고
    그냥 alert();라고 써도 상관없어용

alert('안녕하세요. 자바스크립트!');

- confirm()
사용자에게 메시지를 보여주고, 확인이나 취소를 누르면 그 결과를 불린값으로 반환
    const result = confirm('확인이나 취소를 누르세요');

const a = confirm('확인을 눌러주세요')
console.log(a);

 

- prompt()

사용자에게 메시지를 보여주고, 사용자가 입력한 문자열을 반환
스캐너대신해서 실습할때 사용할거임
    const result = prompt('문자를 입력하세요');
    입력값은 무조건 문자형으로 전달됨
    숫자를 넣어도 문자화~

const name = prompt("당신의 이름을 입력하세요");
console.log(name);
console.log(typeof(name));

연산자(Operator)
1. 산술 연산자
+, -, *, /, %, **(제곱)
    2 ** 2

2. 비교 연산자
>, <, >=, <=, ==, !=, ===(두 식이 값이 같고, 타입까지 같으면 참)
    '3' * '3' = 9
    '3' == 3 -> true
    '3' === 3-> false

3. 대입 연산자
=, +=, ==, *=, /=, %=, **=

4. 증감 연산자
++변수, --변수, 변수++, 변수--

5. 논리 연산자
&&, ||, !

6. 비트 연산자
&, |, ^, <<, >>

7. 삼항 연산자
    변수 = 조건식 ? 반환값1 : 반환값2


제어문

1. if문
    if(조건식){
        조건식의 결과가 true일 때 실행할 문장;
        ...
    }

    if~else문
    if(조건식){
        조건식의 결과가 true일 때 실행할 문장;
        ...
    }else{
        조건식의 결과가 false일 때 실행할 문장;
        ...
    }
2. if~else if~else문
    if(조건식1){
        조건식1의 결과가 true일 때 실행할 문장;
        ...
    }else if(조건식2){
        조건식2의 결과가 true일 때 실행할 문장;
        ...
    }
    ...
    }else{
        모든 조건식의 결과가 false일 때 실행할 문장;
        ...
    }

const age = Number(prompt('나이입력하세요'));

// if(age > 19){
//     console.log('성인입니다');
// }else if(age > 14){
//     console.log('청소년입니다');
// }else if(age > 6){
//     console.log('어린이입니다');
// }else {
//     console.log('꼬맹이');
// }

if(age > 19)console.log('성인입니다');
else if(age > 14)console.log('청소년입니다');
else if(age > 6)console.log('어린이입니다');
else console.log('꼬맹이');

3. switch 문
    switch(변수){
        case 값1:
            변수와 값1이 같을 경우 실행할 문장;
            ...
            break;
        case 값2:
            변수와 값2가 같을 경우 실행할 문장;
            ...
            break;
        ...
        default:
            변수와 모든 값이 다를 경우 실행할 문장;
            ...
    }  

let input = prompt('아동, 청소년, 성인 중 하나를 고르세요');

switch(input){
    case '아동':
        input += ': 입장료 무료'; // input = 아동: 입장료 무료
        break;
    case '청소년':
        input += ': 입장료 15,000원'; // '청소년: 입장료 15,000원'
        break;
    case '성인':
        input += ': 입장료 25,000원'; // '성인: 입장료 25,000원'
        break;
    default:
        alert('입력값을 확인하세요');
        input = '입력값 확인!';
}

    console.log(input);

반복문
    1. while문

    while(조건식){
        조건식의 결과가 true인 동안 반복할 문장;
        ...
    }

    do ~ while 문

    do{
        조건식의 결과가 true인 동안 반복할 문장;
        ...
    }while(조건식);

const dan = Number(prompt('원하는 단을 입력하세요'));
console.log(`${dan}단`);

let i = 1;
while(i <= 9){
    console.log(`${dan} * ${i} = ${dan * i}`);
    i++;
}

   2. for문
    
    for(초기값; 조건식; 증감식){
        조건식의 결과가 true인 동안 반복할 문장;
        ...
    }

continue 문
- 반복중인 루트 내에서 사용하여 해당 루프의 나머지 부분을 건너뛰고 다음 조건식의 판단으로 넘어감

break문
- switch문 또는 반복중인 루프 내에서 사용하여 해당 문장을 완전히 종료시키고 다음에 위치한 실행문으로 이동

const dan = Number(prompt('원하는 단을 입력하세요'));
console.log(`${dan}단`);

for(let i =1; i<=9;  i++){
    console.log(`${dan} * ${i} = ${dan *i}`)
}

배열(Array)

- 이름과 인덱스로 참조되는 정렬된 값의 집합(자료구조)
- 배열을 구성하는 각각의 값을 배열 요소라고 하며,  배열에서의 위치를 가리키는 숫자를 인덱스라고 함

배열 선언
let 배열명;
const 배열명 = 초기화 바로~

배열 초기화
배열명 = [요소1,요소2,요소3 ...];

    let arr;
    arr= [100,200,300]; //리터럴 표기

    let arr = [100, 200, 300];

배열 객체로 생성
let 배열명 = new Array(요소1, 요소2 ..); //객체 표기

const arr = [1,'apple','김사과',20,'서울','잠자기'];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);
console.log(arr[4]);
console.log('arr[5]'+arr[5]);
console.log('arr[6]'+arr[6]); // arr[6]변수 생성만하고 값은 안넣은상태 즉 undefined상태
마지막 값이 undefined
arr[5] = '먹기';
console.log('arr[5]'+arr[5]);
//마지막값이 undefined값이면 크기에 포함X
console.log('arr.length = '+arr.length);

arr[7]= 'A형';
console.log('arr[6]'+arr[6]);
console.log('arr[7]'+arr[7]); // 마지막값이 undefined값이 아니라서 arr[6]도 크기에 포함
console.log('arr.length = '+arr.length);

for(let i=0; i<arr.length; i++){
    console.log('arr['+i+']='+arr[i])
}

자바스크립트 배열의 특징
1. 배열 요소의 타입이 고정되어 있지 않음
    let arr = [1, 1.453, '김사과', true];
2. 배열 요소의 인덱스가 연속적이지 않아도 됨
    let arr;
    arr[0] = 1;
    arr[1] = 2;
    arr[4] = 5;
    * index 2, 3은 undefined

Array 객체의 메소드
push(): 배열의 마지막에 요소를 추가
pop(): 배열의 마지막 주소에 있는 값을 제거
shift(): 배열의 첫번째 주소에 있는 값을 제거
unshitf(): 배열의 젤앞에 요소를 추가
concat(): 두 개의 배열을 합침
join(): 배열 요소 사이에 원하는 문자를 삽입
reverse(): 배열을 역순으로 재배치

sort(): 배열을 오름차순으로 정렬

slice( startIndex, endIndex): 배열의 startIndex부터 endIndex 앞까지를 새로운 배열 객체로 반환

 

// const arr = [1,'apple','김사과',20, '서울', '잠자기'];
arr.push('여자');
console.log(arr);

arr.shift();
console.log(arr);

const sub = ['isfp', '천칭자리'];
const arr_concat = arr.concat(sub);
console.log(arr_concat);

const arr_join = arr.join('❤');
console.log(arr_join);
console.log(typeof(arr_join));

const arr2 = ['a','z', 'c','f', 'r'];
arr2.sort();
console.log(arr2);
arr2.reverse();
console.log(arr2);

배열을 이용한 반복

user = {'userid:'apple', 'name':'김사과'}
let arr = [100,200,300];
프로퍼티 'userid:'apple' 이거 한덩어리
                  property

for in 문: 변수에 배열의 인덱스 또는 객체의 key가 저장
           user같은 경우 인덱스 0 1 2
           포인은 인덱스가 저장된다

    for(변수 in 객체){
        객체의 프러퍼티 개수만큼 반복할 실행문0

    }

// const arr = [1,'apple','김사과',20, '서울', '잠자기'];

for(let i in arr){ //index
    console.log(`i: ${i}, arr[i]: ${arr[i]}`);
}

for of 문: 변수에 배열의 value 또는 객체의 value가 저장
    valueof 생각하자
    for(변수 of 객체){
        객체의 property 개수만큼 반복할 실행문;
        ...
    }

for(let i of arr){ //valueof
    console.log(`i: ${i} `);
}

forEach 문: forEach 문은 배열에서만 사용 가능

    let arr = [100,200,300];

    배열명.forEach(function(변수1, 변수2, 변수3){
        배열의 요소 개수만큼 반복할 실행문;
        ...
    });

    - 변수1: 값(value) 100 -> 200 -> 300
    - 변수2: 번호(index)  0 -> 1 ->  2
    - 변수3: 배열객체 [100,200,300]->[100,200,300]->[100,200,300]

value->index->arr전체
arr.forEach(function(v,i,arr){
    console.log(`v: ${v}, i: ${i}, arr: ${arr}`)
})

 

함수

사용자 정의 함수(function)
- 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블론
- 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있음(코드를 재활용)

1. 함수 선언식
    function 함수명(매개변수1, 매개변수2 ..){
        함수가 호출되었을 때 실행할 문장;
        ..
        return 값;
    }


2. 함수 표현식
    let 변수명 = function(매개변수1, 매개변수2 .. ){
        함수가 호출되었을 때 실행할 문장;
        ...
        return 
    }

function func1(){
    console.log('func1() 호출 호이스팅ㅇ');
}
//밖에 있는값들 예를들면(참조변수,함수..) 얘네들은 호이스팅
//그 안에 있는 값들은 호이스팅X
const func2 = function(){
    console.log('fun2() 호출 호이스팅 x');
}
//개인적인 생각으로 호이스팅은 참조변수들만 체크해가지 그 안에 값들은 체크안함
const fun2은 참조변수, 안의 function은 값으로 인식되어서
체크가 안되어 호이스팅 안되는느낌

func1();
func2();

 

 

function func3(num){
    console.log(`전달받은 매개변수의 값: ${num}`);
}

func3(10);
func3('apple');
func3(true);

 

function func4(start, end){
    let sum = 0;
    for(let i=start; i<=end; i++){
        sum+=i;
    }
    console.log(`${start}부터 ${end}까지의 총합: ${sum}`);
}

func4(1, 100);
func4(1); //error 가 안남 디버깅 어려움그래서...

 

function func5(){
    return '❤';
}

console.log(func5());
const presents = func5();
console.log(presents);

나머지 매개변수
생략 접두사(...)를 사용하여 특정위치의 인수부터 마지막 인수까지 한번에 지정할수 있음
 function gkatnaud (매개변수1, ... 매개변수2){
    함수가 호출되었을 때 실행할 문장;
    ...
    return 값;
    }

    함수명(값1,값2,값3,값4,값5);

function func6(x1, ...x2){
    console.log(`x1의 값: ${x1}`)
    console.log(`x2의 값: ${x2}`)
    for( i in x2){
        console.log(`i의 값 : ${i}, x2[i] ${x2[i]}`)
        // ...x2는 일종의 배열이 되는거임
    }
    
}


func1(30, 50,60,90,100,20,40)
func1(30,40,60)

디폴트 매개변수
 매개변수의 값을 정하지 않으면 기본값을 변수에 저장

    function 함수명(매개변수1=기본값1, 매개변수2=기본값2, ..){
            함수가 호출되었을 때 실행할 문장;
    ...
    return 값;

    }

    함수명(); 기본값 1,2 로 세팅
    함수명(값1, 값2 ..);

function func7(num1=1, num2=1){
    console.log(`num1의 값: ${num1},num2의 값: ${num2}`);
    console.log(`${num1} * ${num2} = ${num1*num2}`);
}
func7(2,8);
func7();

 

*익명즉시실행함수

사용시 이전 코드들은 (;) 세미콜론으로 끝맺어줘야함
(function () {
    console.log('함수를만들고 바로호출합니다');
})();

 

호이스팅
호이스팅: 코드 젤위로 올라감
 변수안에 메소드 담으면 호이스팅안됨
 메소드 선언 전에 호출하면 에러남

따로 다루겠음