JavaScript : scope

위코드 첫 주, JavaScript 레플릿 진행 중, Scoping개념의 필요성을 느낀 문제

Replit. 17

• findSmallestElement 함수를 구현해 주세요.
• findSmallestElement 의 arr 인자는 숫자 값으로만 이루어진 배열입니다.
• arr 의 값들 중 가장 작은 값을 리턴 해주세요.
• 만일 arr 가 비어있으면 0을 리턴 해주세요.
• 예를 들어, 다음과 같은 배열이 인자(input)으로 들어왔다면 1이 리턴 되어야 합니다.
  [20, 200, 23, 1, 3, 9]

for 반복문 관련 문제로 아래와 같이 푸는데 있어서 생겼던 의문점을 아래 코드에 적어보겠다.

function findSmallestElement(arr) {
  if(arr.length === 0) {
    return 0;
  } else {
    let small = arr[0];
    
    /* 1. 가상의 최소값을 선언하는거 까지 ok, 
    근데 왜 그 값을 인덱스0의 요소를 사용하는지? */
    
    for (i = 0; i < arr.length; i++) {
      if(arr[i] < small) {
        small = arr[i]
        
     /* 2. arr[i]가 인덱스 0 자리에 들어있는것(=min)보다 작을때
		min = arr[i]인데....
        
		예를들어
        arr = [1,2,3,4,5]
		일때 for문 안에 있는 if문을 반복하면
		
        1<1 false
		2<1 false
		3<1 false
		4<1 false
		5<1 false
        
		모두 false인데 왜 if가 작동이 되서 1이 나오나 ?*/
      }
    } return small 
  }
}

1. 가상의값 설정

let small = arr[0]

위와 같이 가상의 값을 구할 때 빈 배열을 만들어 쓰는 것은 거의 공식처럼 사용한다고 한다.
but, 왜 index 0자리의 배열 값을 구하는지, for 문을 이용해 최소값을 구할 떄 다른 방법이 있는지 찾지 못했다.

2. for 문의 조건문이 false인데 왜 작동하는지에 대해?

arr = [1,2,3,4,5]
일때 for문이 반복하기 전에 (= for 문 block 위에)
let small = arr[0]
이 이미 할당되어 있고,

return small
은 for문이 모두 반복된 후 ( = for 문 block 아래에)
return을 받기 때문에

for문의 if가 모두 false여도 1이 나오게 된다.

Scope 개념 정리

• scope : '변수가 어디까지 쓰일 수 있는 지'의 범위
• block : {} 로 감싸진 것 (fucntion, if, for 등)
• global scope : 전역 범위
• global variable : 전역 변수
• name space : scope와 비슷한 개념으로 변수 '이름'을 사용할 수 있는 범위, 변수 이름을 얘기할 떄 사용
• scope pollution : global variable이 남용되는 경우

좋은 Scoping 습관의 중요성

global 변수는 지양하고, 최대한 block내({})에서 let,const를 사용하여 변수를 새로 만들어쓰자.

• 타이트한 scope(tightly scoping)의 변수는 코드 퀄리티 향상
• 코드가 block으로 명확하게 구분되기 떄문에 가독성 올라감
• 각각의 기능별로 block을 나누면 코드 이해도가 높아짐
• 그로인한 유지보수 용이
• block이 끝나면 local variable의 수명이 다해 메모리 절약