자바스크립트 입문 정리 part.3

mauz·2022년 7월 6일

javascript

목록 보기

3/7

프로그래머스 'Hello, JavaScript: 자바스크립트 입문' 강의와 구글링을 통해서 정리한 글입니다.

1. while 문

while( /*조건*/ ){
	//실행코드      
}

2. do-while 문

do{
    /* 반복 실행될 코드 */
}while( /*조건식*/ );

while문과 다르게 do문은 '반복 실행될 코드'를 1회 실행한 뒤, '조건식'에 따라 코드를 더 반복할지 결정한다.

조건식이 거짓(False) 일 때,

while : 한번도 실행되지 않음

do, while : 한번은 실행되고 종료

3. for 문

0~4까지 더하는 동일한 while문과 for문.

while 문

var sum = 0;
var i = 0; //초기 설정 코드
while( i < 5 /*조건식*/ ){
    sum = sum + i;
    i++; // 업데이트 코드
}

for문

var sum = 0;
for( var i = 0 ; i < 5 ; i++ ){
    sum = sum + i;
}

for (인덱스 변수 초기화, 조건, 인덱스 업데이트){
실행코드
}

4. for-in 문

객체의 각 엘리먼트에 접근할 수 있는 반복문.

객체의 속성들을 출력하는 동일한 코드

for 구문 사용

var property_list = Object.keys(obj);

for( var i=0 ; i<property_list.length ; i++ ){
    var propertyName = property_list[i];
    console.log( "\t", propertyName, ": ", obj[propertyName] );
}

for in 구문 사용

for( var propertyName in obj ){
    console.log( "\t", propertyName, ": ", obj[propertyName] );
}

for-in 문은 배열에서도 사용 할 수 있다.

var arr = [1,2,3];

for (var i in arr){
    console.log(i)
}


출력
0
1
2

객체의 key 값들을 차례대로 가져옴을 알 수 있다.

5. 변수의 scope와 shadowing

변수의 scope

파이썬에서는 지역변수와 전역변수로 scope가 나뉘지만,
자바스크립트에서 변수의 scope는 하향식으로 이루어지는 듯 하다.

https://school.programmers.co.kr/learn/courses/3/lessons/150

변수의 Shadowing

함수 안에서 밖에서도 선언되었던 같은 이름의 변수를 사용하는 경우
- 함수 밖의 변수는 잠시 가려짐 (shadowing)
- 함수 안에서는 해당 함수에서의 변수를 사용 (함수 밖 변수의 값은 변하지 않음)
- 함수에서 빠져나오면 다시 해당 변수에 접근할 수 있음
함수 안에서만 값이 유지되어야 하는 경우
- 함수 안에서 var 키워드를 사용해 선언하고 사용
여러 함수에서 값이 유지되면서 사용되는 변수의 경우
- 함수를 포괄하는 곳에서 선언하고 사용

function printTimesTable(a){
    for(var i = 1 ; i <= 9 ; i++ ){
        console.log( a + " * " + i + " = " + a*i );
    }
}

for( var i = 2 ; i <= 9 ; i++ ){
    printTimesTable(i);
}

함수 속의 함수에서 변수 이름이 중복되어도 변수를 새로 선언하면
그 함수에서만 지역적으로 변수가 사용된다.

6. this

https://www.youtube.com/watch?v=PAr92molMHU

개념이 어려워서 일단은
this는 this를 호출한 객체를 불러온다 정도만 생각해도 될 것 같다.
나중에 따로 정리해야지

7. closure

https://www.youtube.com/watch?v=MbYShFxp-j0

function makeCounterFunction(initVal){
    var count = initVal;
    function Increase(){
        count++;
        console.log(count);
    }
    return Increase;
}

var counter1 = makeCounterFunction(0);
var counter2 = makeCounterFunction(10);


출력
1
11