본문 바로가기

프론트엔드 멘토링/과제

2주차 과제 - 모던자바스크립트 10~14장 정리

10장

"객체 리터럴"

 

10.1 객체란?

- 자바스크립트는 객체 기반 프로그래밍 언어이며 자바스크립트를 구성하는 거의 모든 것이 객체다.

원시값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체다.

- 객체 타입은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조다.

- 원시타입의 값 즉 원시 값은 변경 불가능한 값이지만 객체 타입의 값, 즉 객체는 변경 가능한 값이다. 

- 객체는 0개 이상의 프로퍼티로 구성된 집합이며 프로퍼티는 키와 값으로 구성된다.

객체는 프로퍼티와 메서드로 구성된 집합체이다. 

// 객체는 프로퍼티의 집합이다.
var person = {
	name: 'Lee', 
    age: 20   // 프로퍼티 키: 프로퍼티 값
}
// 객체의 프로퍼티와 메서드
var counter = {
	num: 0,    // 프로퍼티
    increase: function() {   // 메서드
    	this.num++;
    }
}

프로퍼티: 객체의 상태를 나타내는 값

메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작

 

- 객체는 객체의 상태를 나타내는 값(프로퍼티)과 프로퍼티를 참조하고 조작할 수 있는 동작(메서드)을 모두 포함할 수 있기 때문에 상태와 동작을 하나의 단위로 구조화할 수 있어 유용하다.

 

 


 

12장

"함수"

12.1 함수란?

-일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것.

-입력을 받아 출력을 내보낸다.

- 함수 내부로 입력을 전달받는 변수를 매개변수, 입력을 인수, 출력을 반환값 이라 한다.

또한 함수는 값이며, 여러개 존재할 수 있으므로 특정 함수를 구별하기 위해 식별자인 함수 이름을 사용할 수 있다.

 

12.2 함수를 사용하는 이유

- 함수는 몇 번이든 호출할 수 있으므로 코드의 재사용 측면에서 매우 유용하다.

- 재사용성을 높이는 함수는 유지보수의 편의성을 높이고 실수를 줄여 코드의 신뢰성을 높인다.

- 코드의 가독성을 향상시킨다.

 

12.3 함수 리터럴 (사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기 방식)

-함수 구성 요소

구성요소 설명
함수 이름 -함수 이름은 식별자다. 따라서 식별자 네이밍 규칙을 따라야한다.
-함수 이름은 함수 몸체 내에서만 참조할 수 있다.
-함수 이름은 생략할 수 있다. 이름이 있는 함수를 기명 함수, 이름이 없는 함수를 무명/익명 함수라 한다.
매개변수 목록 -0개 이상의 매개변수를 소괄호로 감싸고 쉼표로 구분.
-각 매개변수에는 함수를 호출할 때 지정한 인수가 순서대로 할당된다. 즉 매개변수 목록은 순서에 의미가 있다.
-매개변수는 함수 몸체 내에서 변수처럼 취급된다. 따라서 매개변수도 변수와 마찬가지로 식별자 네이밍 규칙을 준수해야한다.
함수 몸체 -함수가 호출되었을 때 일괄적으로 실행될 문들을 하나의 실행 단위로 정의한 코드 블록이다.
- 함수 몸체는 함수 호출에 의해 실행된다.

- 함수는 객체다.

-일반 객체는 호출할 수 없지만 함수는 호출할 수 있다.

- 일반 객체에는 없는 함수 객체만의 고유한 프로퍼티를 갖는다.

 

 


13장

"스코프"

13.1 스코프란?

- 유효범위

- 모든 식별자(변수이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정되는데 이를 스코프라 한다. 즉, 스코프는 식별자가 유효한 범위를 말한다.

 

13.2 스코프의 종류

구분 설명 스코프 함수
전역 코드의 가장 바깥 영역 전역 스코프 전역 변수
지역  코드의 몸체 내부 지역 스코프 지역 변수

 


 

14장

"전역 변수의 문제점"

 

14.1 변수의 생명 주기

- 지역변수의 생명주기

: 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸된다.

지역변수의 생명 주기는 함수의 생명 주기와 일치한다.

 

-전역변수의 생명 주기

: 전역변수의 생명 주기가 전역 객체의 생명 주기와 일치한다.

 

 

14.2 전역 변수의 문제점

1. 암묵적 결합: 전역 변수를 선언한 의도는 전역, 즉 코드 어디서든 참조하고 할당할 수 있는 변수를 사용하겠다는 것이다.  이는 모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결합을 허용하는 것이다. 변수의 유효 범위가 클수록 코드의 가독성이 나빠지고 의도치 않게 상태가 변경될 수 있는 위험성도 있다.

 

2. 긴 생명 주기

: 전역 변수는 생명 주기가 길다. 따라서 메모리 리소스도 오랜 기간 소비한다.

var 키워드는 변수의 중복 선언을 허용하므로 생명 주기가 긴 전역 변수는 변수 이름이 중복될 가능성이 있다.

변수 이름이 중복되면 의도치 않은 재할당이 이뤄진다.

 

3. 스코프 체인 상에서 종점에 존재

: 전역 변수의 검색 속도가 가장 느리다. 차이는 크지 않지만 차이는 분명히 있다

.

4. 네임 스페이스 오염

: 파일이 분리되어 있다 해도 하나의 전역 스코프를 공유한다는 것이다. 따라서 다른 파일 내에서 동일한 이름으로 명명된 전역 변수나 전역 함수가 같은 스코프 내에 존재할 경우 예상치 못한 결과를 가져온다.

 

 

14.3 전역 변수의 사용을 억제하는 방법

- 전역변수를 반드시 사용할 이유를 찾지 못한다면 지역 변수를 사용해야 한다. 변수의 스코프는 좁을수록 좋다.

1. 즉시 실행 함수

: 모든 코드를 즉시 실행함수로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가 된다.

 

2. 네임스페이스 객체

: 전역에 네임스페이스 역할을 담당할 객체를 생성하고 전역 변수처럼 사용하고싶은 변수를 프로퍼티로 추가하는 방법

. 네임스페이스 객체에 또다른 네임스페이스 객체를 프로퍼티로 추가해서 네임스페이스를 계층적으로 구성할 수 있다.

3. 모듈 패턴

4. ES6 모듈