[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 8회차 미션

반복문 while 과 함수

자바스크립트의 반복문에는 for뿐만아니라 while을 사용하는 방법도 있다.

while(조건){
    조건이 거짓이 될 때까지 반복 실행
}

//while 무한 루프

while(true){
    console.log('hi');
    if(Math.random() * 100 > 90 ){
        break;
    }
}

해당 코드는 Math.random() 함수에 의해 랜덤 값이 일정 조건에 만족하면 break되는 루프문이다.

while문에는

do~while문이 있다.

do{
    조건이 거짓이 될 때까지 반복 실행
}while(조건);

while문과의 차이는 while은 조건을 먼저 판단하여 아에 실행이 안될 수 있지만 do while은 무조건 한번은 실행하고 조건을 검사하게 된다.

do{
    console.log('hi');
}while(Math.random() * 100 > 90);

위의 경우에는 hi가 무조건 한번 이상 출력 될 것이다.

for of

iterable 라는 객체에 모두 사용할 수 있게된다.

iterable이라는 객체는 2가지 종류가있다.

iterable한 프로토콜을 자체적으로 내장하고 있는 객체(ex 배열)들의 요소가 하나하나 나오게된다

for in

모든 프로퍼티

객체에서도 사용할 수 있고 객체 내부의 프로퍼티 하나하나를 출력할 수 있다.

코드를 통해 살펴보자.

for (const i of [1,2,3]){
    console.log(i);
}

for ~of는 [1,2,3]를 순회하여 변수 i 에 하나 하나 담아

블럭안에서 사용할 수 있게 해준다.

Object.prototype.test = function() {};
for ( const i in {a:1 , b:2, c:3}){
    console.log(i);
}

for ~ in 의 단점중에 한가지는 프로토탑 내에 프로퍼티를 설정해놓으면

for문에 {a:1 , b:2, c:3} 만 출력될 것처럼 느껴지지만 prototype내의 test도 함께 나오게돼서 개발자가 의도한 대로 동작하지 않을 가능성이 있어 주의해야한다.

 

함수

function

function 함수명(){}

함수를 만들 때 사용하는 키워드

이름이 hello1인 함수 선언

function hello1(){
    //함수를 호출 시 실행하게 되는 영역
    console.log('hi');
}

console.log(hi1, typeof hi1);

함수를 호출하면

type은 function이 나온다. function을 표준 내장객체라고 한다. 하지만 자세한 내용은 후에 학습한다.

함수의 매개변수

• 함수를 호출할 때 값을 지정

function hello2(name){
    console.log('hi 2', name);
}

함수의 리턴

• 함수를 실행하면 얻어지는 값

function hello3(name){
    return `hello3 ${name}`;
}

위 코드의 확인을 위해서는

console.log(hello3('jiwon'));

함수를 만드는 또 다른 방법

const hello = function(){}

함수를 선언하여 변수에 담는방법

이름이 hello1인 함수를 선언

const hello1 = function(){
    console.log('hello1');
};

console.log(hello1, typeof hello1);

함수의 매개변수

const hello2 = function(name){
    console.log('hello2', name);
}

함수의 리턴

const hello3 = function(name){
    return `hello3 ${name}`;
}

처음에 사용했던 방식이 function test(){} 의 방식을 선언적 function 방식이라하고, 방금의 방식과같이 익명 함수를 만들어 변수에 할당하는 방식이 있다.

선언적 function 방식

function hello1(){
    console.log('hello1');
}

hello1();

hello1();
function hello1(){
    console.log('hello1');
};

위의 두가지 방식 모두 정상적으로 실행이된다.

hello2();

var hello2 = function() {
    console.log('hello2');
};

이렇게 코드를 짠뒤 실행을 시켜보면

에러가 나게된다.

호이스팅을 떠올려보자.

호이스팅현상에 의해

var hello2 까지는 알게되지만 그 뒤의 코드가 무엇인지 알 수 없기때문에 오류가 발생하는것.

hello3();
const hello3 = function () {
    console.log('hello3');
};

실행하게되면 hello2와는 약간 다른 에러를 만나게된다.

hello3이라는것이 아에 defined 되지 않았다고 에러가 발생한다.

결국 function 선언적 방식으로 어디에 코드가 위치하더라도 메모리에 올라가기때문에 어디서든 사용하든 문제가 없다 볼 수 있다.

 

해당 내용은 아래 링크에서 수강할 수 있다.

프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/2ETLEzm

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스