📚FOS Study
홈카테고리
홈카테고리
📚FOS Study

개발 학습 기록을 정리하는 블로그입니다.

바로가기

  • 홈
  • 카테고리

소셜

  • GitHub
  • Source Repository

© 2025 FOS Study. Built with Next.js & Tailwind CSS

목록으로 돌아가기
⚡javascript/ Data_Structures_and_Algorithms

2장 자바스크립트의 독특한 특징

약 4분
GitHub에서 보기

2장 자바스크립트의 독특한 특징

  • 구문과 동작 방식에 있어 JS 지니는 예외적인 사례와 특징을 살펴볼 것이다
  • JS는 동적 인터프리터 프로그래밍 언어이기 때문에 다른 전통적인 객체지향 프로그래밍 언어들과 구문이 다르다
  • 이런 개념들은 JS의 근간을 이루고 있으며 우리가 JS 알고리즘을 설계하는 과정을 이해하는데 많은 도움이 된다

자바스크립트 스코프 (scope)

  • 스코프는 자바스크립트 변수에 대한 접근 권한을 정의하는 것이다

  • JS에서 변수는 전역 스코프 또는 지역 스코프에 속할 수 있다

  • 전역 스코프에 속하는 변수는 전역 변수라고 부른다

  • 전역 변수는 프로그램의 어디에서나 접근 가능하다

    전역 선언 : 전역 스코프

    • JS에서 연산자 없이 변수를 선언할 수 있다
    foo = "I'm Global Variable";
    console.log(foo);
    
    • 위의 코드는 전역변수를 생성한다
    • 위와 같은 선언 방식은 JS에서 가장 안좋은 사용법 가운데 하나이다
    • 항상 JS에서는 var나 let를 사용해 변수를 선언하자
    • 마지막으로 수정하지 않을 변수를 선언할 때 const를 사용하자

    var를 사용해 선언하기 : 함수 범위

    • JS에서 var는 변수를 선언하는 데 사용하는 키워드다

    • 변수를 어디에서 선언하든 변수 선언이 함수의 맨 앞으로 이동한다

    • 이를 변수 호이스팅이라고도 한다

    • 스크립트 실행 시 변수가 스크립트의 가장 마지막에 선언됐다고 하더라도 해당 선언 코드가 가장 마지막에 실행되는 것이 아니다

    • var 키워드에 관해 주목해야 할 핵심적인 사항은 해당 변수의 범위가 가장 가까운 함수 범위리는 것이다

    • 다음 코드에서 scope2 함수는 insideIf 변수와 가장 가까운 함수 범위다

    function scope2(print) {
        if (print) {
            var insideIf = '12';
        }
        console.log(insideIf);
    }
    scope2(true); // 12를 출력하며 오류가 발생하지 않음
    
    • 자바에서 위의 구문은 오류를 일으킬 것이다
    • insideIf 변수가 if문 블록 내에서만 사용 가능하고 if문 블록 외부에서는 사용할 수 없기 때문이다

    let을 활용한 선언 : 블록 범위

    • 변수를 선언할 때 사용할 수 있는 또 다른 키워드로 let이 있다
    • let을 사용해 선언된 변수는 가장 가까운 블록 범위를 갖는다(즉, 변수가 선언된 {} 내에서 유효하다)
    function scope3(print) {
        if (print) {
            let insideif = '12';
        }
        console.log(insideIf);
    }
    scope3(true); // 오류 ReferenceError가 발생한다
    

등가와 형

  • JS에는 전통적인 언어와 다른 자료형이 있다

  • 이러한 점이 등가 비교와 같은 것들에 어떤 식으로 영향을 미치는지 살펴보자

    변수형

    • JS에는 boolean, number, string, undefined, object, function, symbol과 같은 일곱 개의 기본 자료형이 있다
    • 여기서 특이한 점은 선언만 되고 값이 할당되지 않은 변수에 undefined가 할당된다는 것이다
    • typeof는 변수의 형을 반환하는 데 사용하는 기본 연산자다
    var is20 = false; // boolean
    typeof is20; // boolean
    
    var age = 19;
    typeof = age; // number
    
    var lastName = "Bae";
    typeof lastName; // string
    
    var fruits = ["Apple", "Banana", "Kiwi"];
    typeof fruits; // object
    
    var me = { firstName: "Sample", lastName: "Bae" };
    typeof me; // object
    
    var nullVar = null;
    typeof nullVar; // object
    
    var function1 = function() {
        console.log(i);
    }
    type function1 // function
    
    var blank;
    typeof blank; // undefined
    

    참/거짓 확인

    • 하지만 JS에서(그리고 다른 동적으로 형이 결정되는 언어들)는 이 점에 있어 좀더 유연하다
    • 다음 예를 살펴보자
    if (node) {
        ...
    }
    
    • 여기서 node는 변수다

    • 해당 변수가 비었거나 null이거나 undefined이면 해당 변수는 false로 평가된다

    • 다음은 일반적으로 사용되는 표현식 중 false로 평가되는 경우다 (falsy)

      1. false
      2. 0
      3. 빈 문자열 ('')
      4. NaN
      5. undefined
      6. null
    • 다음은 일반적으로 사용되는 표현식 중 true로 평과디는 경우다 (truthy)

      1. true
      2. 0이 아닌 다른 숫자
      3. 비어있지 않은 문자열
      4. 비어 있지 않은 객체

    === vs ==

    • JS는 스크립트 언어이고 변수 선언 시 변수에 형이 할당되지 않는다
    • 대신에 코드가 실행될 때 해당 변수의 형이 해석된다
    • 따라서 ===는 ==보다 등가를 좀 더 엄격히 확인한다
    • ==가 값만은 확인하는 반면 ===는 형과 값 모두 확인한다
    "5" == 5 // true를 반환한다
    "5" === 5 // false를 반환한다
    

    객체

    • 자바와 같은 강한 타입 언어는 equals()를 사용해 두 객체가 동일한지 확인한다

    • JS에서 두 객체가 동일한지 확인하고자 우리는 간단히 == 연산자를 사용해볼까 하는 생각이 들 수 있다

    • JS에서 객체의 비교를 할 떄 == 연산자를 사용하면 두 객체의 메모리상 주소가 같은지 확인한다

    • 이것이 대부분의 자바스크립트 애플리케이션이 lodash나 underscore와 같은 유틸리티 라이브러리를 사용하는 이유다

    • 다음 예제에서 객체가 같은지 정확하게 비교하기 위해 각 속성을 비교한다

    function isEquivalent(a, b) {
        // 속성 이름 배열
        var aProps = Object.getOwnPropertyNames(a);
        var bProps = Object.getOwnPropertyNames(b);
    
        // 속성 길이가 다른 경우 두 객체는 다른 객체다
        if (aProps.length !== bProps.length) {
            return false;
        }
    
        for (const propName of aProps) {
            if (a[propName] !== b[propName]) {
                return false;
            }
        }
    
        // 모든 것이 일치하면 두 객체는 일치한다
        return true
    }
    
    • 위 함수는 문자열이나 숫자 하나만을 속성으로 갖는 객채에 대해서도 잘 동작할 것것이다
    • 그렇지만 객체에 함수가 있다면 두 함수가 동일한 연산을 수행해도 두 함수의 메모리상 주소는 다르다
    • 기본 등가 확인 연산자인 ==와 ===는 문자열과 숫자에만 사용할 수 있다
    • 객체에 대한 등가 확인을 구현하려면 객체의 각 속성을 확인해야 한다
javascript 카테고리의 다른 글 보기수정 제안하기
목차
  • 2장 자바스크립트의 독특한 특징
  • 자바스크립트 스코프 (scope)
  • 등가와 형