[TIL-108] 위코드 7일차: JS replit 23~26

Javascript

 

스코프

개념

스코프는 변수가 쓰일 수 있는 범위를 의미한다. 종류로는 블록 스코프와 함수 스코프가 있다.

블록(block)은 { } (중괄호)로 감싸인 영역이다. function이나 for문, if문 등에서 { }가 하나의 블록인 셈이다. 이 블록 내부에서 정의된 const, let 변수는 블록 내부에서만 사용할 수 있는 블록 스코프에 해당하며, 이 변수를 지역변수(local variable)라고 부른다. 블록 밖은 global scope로, 이 영역에서 정의된 전역변수(global variable)는 코드 어디서든 접근 가능하다.

namespace는 변수의 이름을 사용할 수 있는 범위이다. scope이기도 하지만 변수의 이름에 대해서 namespace라고 부른다. 전역변수를 남용하면 변수가 프로그램이 종료될 때까지 계속 살아있기 때문에 값이 계속 변할 경우 추적하기 어렵고, 어디서 왜 필요한 변수인지 알아보기 어려워진다. 그럴 때 새로운 변수를 정의하려다 변수명이 겹쳐서 전역변수로 이미 선언된 변수를 실수로 수정할 수도 있는데 어디서 잘못되었는지 찾아내기 힘들다. 이런 현상을 스코프 오염이라고 한다.

따라서 최대한 블록 스코프로 좁은 범위 안에서 변수를 정의하고 사용하는 것이 편리하다. 코드가 기능별로 블록으로 구분되면서 가독성도 좋아지고, 유지보수도 쉽다. 블록이 끝나면 지역변수가 종료되기 때문에 메모리도 절약된다. 그리고 새로운 변수는 꼭 다른 이름으로 선언해야 한다.

 

 

switch문

개념

여러 코드 블록들 중 하나를 골라 실행하는 문법이다. switch ( ) 괄호 안의 식을 case " " 와 비교하여 일치하는 case의 코드 블록을 실행한다. 코드 블록은 case x:로 시작해서 break;로 끝난다.

사용법

예) new Date()를 사용하여 현재 날짜를 받아, getDay()로 요일을 구해 결과값에 따라 day 변수에 요일을 할당하기.

switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
     day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}

 

 

클래스

객체지향 프로그래밍

객체지향 프로그래밍은 프로그램을 객체들로 구성하고, 객체 간에 상호작용하도록 코드를 작성하는 방법이다. 이때 객체는 데이터 타입으로서 객체가 아니라, object 뜻 그대로 사물을 의미한다. 특정 로직을 갖고 있는 행동(메서드)와 변경 가능한 상태(멤버 변수)를 갖는다.

 

개념

클래스는 객체지향 프로그래밍의 핵심이다. 객체의 규모가 크거나 비슷한 모양의 객체를 계속 만들어야 할 때 사용하는 설계도를 말한다.

 

사용법

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
    this.department = "선릉지점";
    this.salesAmount = 0;
  }

  applyDiscount(discount) {  
    return this.price * discount;   
  }
  
  addSales() {
    this.salesAmount++;
  }
}

const morning = new Car('Morning', 2000000);

자동차에 대한 정보를 담는 Car라는 클래스를 생성했다. 마지막 줄은 Car 클래스를 이용해서 morning이라는 객체를 생성한 것이다. 이렇게 클래스를 통해 생성된 객체는 인스턴스(instance), 클래스로 객체를 생성하는 과정은 인스턴트화라고 한다.

constructor라는 생성자 함수를 사용해 클래스를 구축한다. 클래스를 이용해서 객체(인스턴스)를 생성할 때, new 키워드가 constructor() 메서드를 호출하고 새로운 인스턴스를 반환한다. 이때 constructor() 메서드는 name과 price 두 개의 인자를 받는다. 이 인자는 클래스 내 어디서든 사용할 수 있는 변수로서 멤버 변수라고 부른다. 멤버 변수는 this 키워드로 접근한다. (객체의 property 값으로 함수를 넣을 때, this 키워드를 통해 객체 내부에서 해당 객체의 property에 접근할 수 있다.) 이렇게 클래스의 실행범위(context)에서 this는 해당 인스턴스를 의미한다.

인스턴스는 클래스의 property 이름(key)과 메서드를 갖지만, 인자가 다른 만큼 인스턴스마다 서로 다른 property 값(value)을 갖는다. 클래스의 메서드는 객체의 property처럼 ,(콤마)로 구분하지 않아도 된다.

 

 

객체 심화

객체 리터럴

• { } 으로 생긴 객체를 객체 리터럴(object literal)이라 부른다.

 

key(property명)

• 객체의 키에는 변수를 선언할 때와 달리 스페이스, 한글, 숫자, 특수문자 등이 들어갈 수 있다.
• 스페이스나 특수문자가 포함되지 않은 키는 따옴표를 생략할 수 있다.($는 따옴표 생략 가능)

 

글로벌 객체(global object)

• 자바스크립트 어디에서나 접근 가능한 객체.
• 예) console.log() 처럼 자바스크립트에 기본적으로 존재하는 메서드의 경우 console이라는 글로벌 객체의 메서드.

 

reference

• 객체를 변수에 저장하면 그 객체 자체가 저장되는 것이 아니라 객체가 담긴 어느 메모리의 reference가 저장되는 것.
• 똑같이 생긴 객체 두 개가 있어도 각각 컴퓨터 안 서로 다른 메모리를 가리키고 있기 때문에 비교연산하면 같지 않다.
• const로 선언한 객체의 프로퍼티가 수정될 수 있는 이유도, 객체 변수에 저장된 reference가 바뀌는 게 아니라 참조하고 있는 객체 내부의 프로퍼티가 수정된 것이기 때문이다. (이거 굉장히 궁금했는데 해결됨.)