19. 자바스크립트 기본 정리2

1. 제어문 

whilen 문

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

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

• do ~ whie문은 조건식의 결과가 처음부터 false인 경우라도 한 번은 {}에 문장을

for 문

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

    let sum = 0;
    for(let i=1; i<=10; i+1){
        sum += i;
    }

    while문 비교
    let i=1;
    let sum=0;
    while(i <= 10){
        sum += i;
        i++;
    }

    for문의 무한루프
    for(;;){
        ...
    }

 

 

 

break문

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

 

continue 문

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

    let num =1;
    whiile(num <= 10) {
        console.log(num);
        num++;
        if (num == 5) continue;
        ...
        ...
    }

 

 

2. 배열(Array)

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

배열배열 선언

let 변수명;

 

배열 초기화

변수명 = [요소1, 요소2, 요소3 ...];

 

let arr;

arr = [100, 200, 300];

 

배열 생성 함수

let 변수명 = Array(요소1, 요소2, 요소3 ..);

 

배열의 접근

let arr = [100, 200, 300];

arr[0] // 100
arr[1] // 200
arr[2] // 300

 

자바스크립트 배열의 특징

1. 배열 요소의 타입이 고정되어 있지 않음
    let arr = [1, 1.5, '김사과', true];

 

2. 배열 요소의 인덱스가 연속적이지 않아도 됨
    let arr;
    arr[0] = 1;
    arr[1] = 100;
    arr[4] = 10;  

    // index 2, 3은 undefined

 

 

배열을 이용한 반복

 

for in 문

변수에 배열의 인덱스 또는 객체의 key가 저장되며 반복

    const arr = [10, 20, 30];
    const user = {userid:'apple', name:'김사과', age:20}

    예)
    for(let i in arr){
        ... // i: 0, 1, 2(i에는 인덱스 번호가 저장)
    }

    for(let i in user){
        ... // i : userid, name, age (i에는 키가 저장)
    }

 

for of 문

변수에 배열의 value가 저장되며 반복

    예)
    for(let v of arr) {
        ... // v: 10, 20, 30
    }

 

forEach 문

변수에 배열의 인덱스 또는 객체의 key가 저장되며 반복

    변수명.forEach(function(변수1, 변수2, 변수3){
        ...
    });

    변수1: value가 저장
    변수2: index 저장
    변수3: 모든 배열요소가 저장
    * 변수2, 변수3은 생략 가능

    예)
    const arr = [10, 20, 30];

    arr.forEach(function(v, i, a){
        console.let(v); // 10, 20, 30
        console.log(i); // 0, 1, 2
        console.log(a); // [10, 20, 30], [10, 20, 30], [10, 20, 30]
    });

 

 

사용자 정의 함수(function)

• 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록
• 필요할 때마다 호출하여 해당 작업을 반복 수행할 수 있음
• 코드를 재활용하기 위한 목적

1. 함수 선언식

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

 

2. 함수 표현식

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

 

3. 디폴트 매개변수

• 매개변수의 값을 설정하는 것
• 매개변수의 값을 정하지 않으면 기본값을 변수에 저장

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

 

4. 나머지 매개변수

• 생략 접두사(...)를 사용하여 특정 위치의 인수부터 마지막 인수까지 한번에 지정할 수 있음

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

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

    매개변수1: 값1
    매개변수2: 값2, 값3, 값4

 

 

 

호이스팅(hoistiong)

• 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것
• var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화
• let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않음

 

화살표 함수

• function 키워드를 사용하여 함수를 만드는 것보다 간단하게 표현
• 화살표 함수는 항상 익명
• return은 생략하며 모든 화살표 함수는 return 형

    매개변수가 없는 경우

    const 변수명 = function(){
        ...
    }
    
    const 변수명 = () => {
        ...
    }

    const 변수명 = () => 문장;

    매개변수가 있는 경우

    const 변수명 = 매개변수1 => {
        ...
    }

    const 변수명 = (매개변수1, 매개변수2 ..) => {
        ...
    }

 

객체(Object)

• 하나의 주제를 가지고 관련있는 프로퍼티(Property)를 가지고 있는 집합

프로퍼티(Property)

• 이름과 값으로 구성된 정렬되지 않은 집합
• 프로퍼티는 함수도 저장할 수 있음 -> 프로퍼티 메서드

객체를 생성하는 방법

1. 리터럴 표기법

    const 변수명 = {
        프로퍼티명1:값1,
        프로퍼티명2:값2,
        ...
        프로퍼티명n:function(){
            ...
        }
    }

 

2. 생성자를 이용

• 객체를 만드는 함수
• new 연산자를 사용하여 객체를 생성하고 초기화할 수 있음
• 같은 형태의 객체를 여러개 생성할 때 유리

    function 함수명(매개변수1, 매개변수2 ..){
        this.프로퍼티1 = 값1;
        this.프로퍼티2 = 값2;
        ...
        this.프로퍼티1 = function(){
            ...
        }
    }

    const 변수1 = new 함수명(값1, 값2, ..)
    const 변수2 = new 함수명(값1, 값2, ..)

 

3. 클래스를 이용

• ECMA Script6에 추가된 객체 생성 방법
• 내부적으로 생성자를 이용한 객체 생성 방법과 동일하게 작동

    const 클래스명 = class {
        constructor(매개변수1, 매개변수2, ...){
            this.프로퍼티1 = 값1;
            this.프로퍼티1 = 값1;
            ...
        }

        매소드명(매개변수1, 매개변수2, ..){
            ...
        }
    }

    const 변수명1 = new클래스명(값1, 값2, ....);
    const 변수명2 = new클래스명(값1, 값2, ....);

 

 

프로토타입(Property)

• 모든 객체는 프로토타입이라는 객체를 가지고 있음
• 모든 객체는 프로토타입으로부터 프로퍼티와 프로퍼티 메서드를 상속받음
• 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며 상속되는 정보를 제공하는 객체를 프로토타입이라고 함

const dog = new Dog(); // Dog.Property, Object.Property

 

상속

• 클래스 기반의 객체지향 언어와 다름
• 자바스크립트는 프로토타입 기반의 객체지향언어