생성자 함수에 대한 객체 생성

생성자 함수를 사용하여 객체를 생성 방식에는 Object 생성자 함수를 사용하는 방법이 있다.

Object 생성자 함수를 사용하는 방법

new 연산자와 함께 Object 생성자 함수를 호출하여 빈 객체를 생성한다.
이때 객체를 생성하고 프로퍼티나 메서드를 추가하여 객체를 완성시키면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13

const person = new Object();

// new Object 함수를 호출하면 빈객체가 생성된다.
console.log(person); // {}

// 빈객체에 프로퍼티를 추가한다.
person.name = 'hanjuren';
person.getName = function () {
  console.log(`Hello My Name is ${this.name}`);
};

console.log(person); // { name: 'hanjuren', getName: f }
console.log(person.getName()); // Hello My Name is hanjuren

생성자 함수에 의해 생성된 객체를 인스턴스라고 부른다.

생성자 함수의 종류는 다음과 같다.

1. String
2. Number
3. Boolean
4. Function
5. Array
6. Date
7. RegExp
8. Promise

생성자 함수를 호출하여 객체를 생성하는 것은 객체 리터럴을 사용하여 생성하는 것보다는 비효율적이므로 필요한 상황이 아니라면 바람직 한 생성방식은 아니다.

let, const 키워드와 블록레벨 스코프

ES5 까지 변수의 선언을 유일하게 할 수 있던 방법인 var키워드는 여러가지의 문제점들이 있다.

1. 변수의 중복선언
   var 키워드로 선언한 변수는 중복 선언이 가능하다.

2. 함수레벨 스코프
   var키워드로 선언한 변수는 오직 함수의 코드블록만이 지역 스코프로 인정된다. 따라서 외부 함수에서 var키워드로 선언한 전역 변수는 코드블록 내에서 선언해도 전역변수가 된다.

3. 변수 호이스팅
   var 키워드로 선언한 변수는 호이스팅에 의해 가장 위로 끌어 올려지고 할당이전에도 참조가 가능하다.

   1 2 3 4 5 6 7 8 9 10 11 12

   // 변수 호이스팅에 의해 이미 foo라는 변수는 선언이 되었다. // 아직 변수에 값이 할당된 상태가 아니기 때문에 undefined가 반환된다. console.log(foo); // undefined // 변수 호이스팅에 의해 foo변수가 선언되었고 값을 선언하면 foo의 값은 123이 된다. foo = 123; // 값이 할당된 변수이기 때문에 변수의 값이 반환된다. console.log(foo); // 123 // 런타임 이전에 foo 라는 변수가 선언이되고 undefined로 초기화 된다. var foo;

   선언문 이전에 참조하는 것이 변수 호이스팅에 의해 에러가 발생하지는 않지만 코드의 가독성을 해치며 오류를 발생시킬 여지가 생긴다.

전역변수의 문제점

변수의 생명주기

• 변수는 선언에 의해 생성되고 할당을 통해 값을 가진다.
• 변수는 언젠가 소멸한다.
• 전역변수의 생명주기는 애플리케이션의 생명주기와 같다.
• 함수 내에서 생성된 지역변수는 함수 호출시 선언문이 실행되고 함수 종료시 소멸된다.
• 즉 지역변수의 생명 주기는 함수의 생명 주기와 같다.

전역 변수의 문제점

1. 암묵적 결합
   전역변수의 의도는 코드 어디서든 참조할 수 있는 변수를 만든다는 의미이다. 이는 모든 코드가 이를 참조하고 값을 변경할 수 있는 암묵적 결합을 의미한다.
   변수의 유효범위가 클수록 코드의 가독성이 나빠지고 의도치 않은 값 변경이 일어날 수 있다.

2. 긴 생명 주기
   전역 변수는 생명주기가 길다. 즉 메모리 소비 시간이 길다.
   var 키워드로 생성된 변수는 중복을 혀용하므로 전역변수는 변수 이름이 중복될 가능성이 크다. 의도치 않게 변수가 중복되면 값이 변경된다.

3. 스코프 체인 상에서 종점에 존재
   전역 변수는 스코프 상에서 종점에 존재한다. 이는 변수의 검색시 가장 마지막 단계에서 검색이 된다는 것이다. 따라서 검색 속도가 가장 느리다.

4. 네임스페이스 오염
   파일을 분리해도 하나의 전역 스코프를 공유 한다는 것에서 다른 파일 내에 동일한 변수가 스코프내에 존재할 수 있다는 문제점이 있다.

스코프

스코프 (유효범위)는 javascript를 포함한 모든 프로그래밍 언어의 기본적이고 중요한 개념이다.

1
2
3
4
5
6
7
8
9

function add (x, y) {
  // 매개변수는 함수 몸체 내에서만 참조가 가능하다.
  // 따라서 매개변수의 스코프는 함수 내부다.
  console.log(x, y);
  return x + y;
}
add (1, 2);

console.log(x, y); // Error 스코프 유효범위를 벗어남

변수는 코드의 가장 바깥쪽에 함수 내부에 또는 코드블록에서 선언될 수 있다. 이렇게 선언된 변수는 변수가 선언된 위치에 따라서 스코프가 결정된다. 모든 식별자가 자신의 선언된 위치에서 스코프를 결정한다.

1
2
3
4
5
6
7
8
9

var x = 'global';

function foo () {
  var x = 'local';
  console.log(x); // local
}
foo();

console.log(x); // global

위의 예제를 보면 동일한 이름을 가진 변수 x를 선언했고 함수내부, 외부에서 각각 참조를 한다. 이때 자바스크립트 엔진은 같은 두이름 중 어떤 것을 참조할지 결정한다. 이를 식별자 결정이라고 한다. 이때 엔진은 스코프를 규칙으로 삼아 참조할 변수를 결정한다. 즉 스코프는 식별자를 검색할 때 사용하는 규칙이라고도 할 수 있다.

코드의 문맥과 환경
코드가 어디서 실행되는지 주변에 어떤 코드가 있는지를 렉시컬 환경이라고 부른다.

javascript 책 공부중 렉시컬 환경? 이라는 단어를 보고 이게 어떤것을 의미하는지 궁금하여 알아보았다. 역시 처음들어보는 생소한 의미였고 새로운것을 배웠다.
렉시컬 환경에 대해 알아보자.

👍렉시컬 환경

javascript에서 실행중인 함수, 코드 블록 { }, 스크립트는 렉시컬 환경이라 불리는 내부 숨김 연관 객체를 갖는다.

렉시컬 환경은 두가지로 나뉜다.

1. 환경 레코드: 모든 지역변수를 프로퍼티로 저장하고 있는 객체.
2. 외부 렉시컬 환경에 대한 참조: 외부 코드와 연관

환경 레코드

• 모든 지역변수를 프로퍼티로 저장하는 객체
• this 값과 같은 기타 정보도 저장된다.
• 변수는 특수 내부 객체인 환경 레코드의 프로퍼티의 의미일 뿐이다.
• 변수를 가져오거나 변경하는 것은 환경 레코드의 프로퍼티를 가져오거나 변경하는 것이다.

외부 렉시컬 환경

• 외부 코드와 연결된다.

전역 렉시컬 환경

1

let a = 'hello';

위와 같이 선언된 변수는 코드 전체와 관련된 변수로 전역 렉시컬 환경이라고 부른다. 스크립트 전체와 관련된 전역 렉시컬 환경은 외부 참조를 가지지 않는다.

함수

함수란?

함수는 자바스크립트에서 중요한 핵심중 하나이다. 프로그래밍 언어의 함수는 일련의 과정을 문으로 구현하고 코드블록으로 감싸서 하나의 실행 단위로 정의 한것이다.
함수는 입력을 받아 출력을 내보낸다. 이때 함수 내부로 입력을 전달받는 변수를 매개변수 입력을 인수 출력을 반환값이라 한다. 또한 함수는 값이고 여러개 존재할 수 있기 때문에 특정 함수를 구별하기 위해 식별자인 함수 이름을 사용할 수 있다.

1
2
3
4
5

// 함수 정의
function 함수이름(매개변수1, 매개변수2) {
  return 매개변수1 + 매개변수2 // 반환값
}
함수이름(값1, 값2); // 함수 호출

함수는 함수 정의로 생성하며 다양한 방법으로 정의할 수 있다.

1
2
3
4

// 함수 정의
function add (x, y) {
  return x + y;
}

함수를 정의하고 나서 실행을 하기 위해서는 인수를 매개변수를 통해 함수에 전달하며 함수의 실행을 지시해야한다. 이 과정을 함수 호출이라고 한다.

1
2
3
4
5

// 함수 호출
var result = add(2, 5);

// 인수를 전달하면 반환값이 반환된다.
console.log(result); // 7

함수는 왜 사용할까?

함수는 필요할 때마다 호출하여 실행이 가능하다. 실행 시점은 개발자가 결정하기도 하고 재사용이 가능하다. 동일한 작업을 반복적으로 실행해야 한다면 같은 코드를 중복하여 작성하는 것이 아닌 함수를 재사용하는 것이 효율적이다. 함수는 코드의 재사용 측면에서 매우 유용한 기능이다.

함수는 재사용성을 높여주고 유지보수 측면에서 편의성을 높이고 실수를 줄여 코드의 신뢰성을 높이는 효과가 있다. 이러한 함수를 정의할때 함수이름 즉 식별자를 붙일 수 있다. 함수이름은 함수의 역할을 이해하기 쉽게 네이밍해주는 것이 좋다.

원시값과 객체의 비교

원시 타입과 객체 타입의 차이점

1. 원시 타입의 값은 변경 불가능한 값이다. 객체 타입의 값은 변경가능한 값이다.
2. 원시 값을 변수에 할당하면 변수에는 실제 값이 저장된다. 객체를 변수에 할당하면 변수에는 참조 값이 저장된다.
3. 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다. 이를 값에 의한 전달이라 한다. 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 참조에 의한 전달이라 한다.

원시 값

변경 불가능한 값

원시타입 : 변경 불가능한 값
변경이 불가능한 값이라는 것은 변수란 값을 저장하기 위한 메모리의 공간 자체 또는 공간을 식별하기 위한 이름이고 값은 저장된 데이터이다. 즉 변경 불가능하다는 것은 변수가 아닌 값에대한 이야기이다.

변경이 불가능한것은 상수와 같은 맥락이긴 하지만 원시값은 재할당시 값이 바뀌지 않고 새로운 공간에 값을 저장하지만 상수는 재할당이 안되므로 둘의 개념이 완벽히 일치하는 것은 아니다.

1
2
3
4
5

const a = {};

a.first = 1;
// const 키워드를 사용하여 선언한 변수에 할당한 값은 변경이 불가능하다.
// 하지만 const 키워드를 사용한 변수에 할당한 객체는 변경이 가능하다.

변수에 할당한 값은 원시 값으로 한번 할당하면 그 값의 변경이 불가능하다. 변수에 값을 재할당시 기존에 값이 저장되어있던 메모리 주소에 새로운 값을 갱신하는 것이 아닌 새로운 메모리 공간에 저장하고 그 메모리 주소를 가리키게 되는데 값의 이러한 특성을 불변성이라고 한다.

객체 리터럴

자바스크립트는 객체기반 프로그래밍 언어이며 자바스크립트를 구성하는 거의 대부분이 원시값을 제외한 객체이다.

원시타입은 단 하나의 값을 나타내지만 객체 타입은 다양한 타입의 값을 하나의 단위로 가지고있는 복합적 자료구조이다.

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

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

1
2
3
4
5

var person = {
  // key: value
  age: 25,
  name: 'han',
};

타입 변환과 단축 평가

타입 변환이란

자바스크립트의 모든 값은 타입이 존재한다. 값의 타입을 개발자가 의도적으로 변환하는 것을 명시적 타입 변환, 타입 캐스팅이라 한다.

1
2
3
4
5

var x = 10;

// 명시적 타입변환 - 숫자를 문자열로 
var str = x.toString();
console.log(type of str, str); // string, 10

개발자의 의도와 상관없이 표현식을 평가하는 도중 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 상황이 생긴다. 이를 암묵적 타입 변환, 타입 강제 변환이라 한다.

1
2
3
4
5
6

var x = 10;

// 암묵적 타입 변환
// 문자열 연결 연산자는 숫자 타입 x를 바탕으로 새로운 문자열을 생성한다.
var str = x + '';
console.log(type of str, str); // string, 10

명시적 타입 변환, 암묵적 타입 변환은 기존 원시 값을 변경하는 것이 아닌 기존 원시 값을 기준으로 다른 타입의 새로운 값을 생성하는 것이다.

암묵적 타입 변환

자바스크립트 엔진이 표현식을 평가시 개발자의 의도와 상관없이 코드의 문맥을 고려하여 암묵적으로 타입을 강제 변환하는 것.

1
2
3

'10' + 2 // 102

5 * '10' // 510

이처럼 표현식을 평가할 때 코드의 문맥에 부합하지 않는 상황이 발생할 수 있다. 이때 에러를 발생시키기도 하지만 자바스크립트가 가급적 암묵적 변환을 통해 표현식을 평가한다.

명시적 타입 변환

개발자의 의도에 따라 명시적으로 값의 타입을 변경하는것.

문자열 타입으로 변경시 String 생성자 함수를 이용, Object.prototype.toString 메서드를 이용, 문자열 연결 연산자를 이용하는 방법들이 있다.

숫자 타입으로 변경시 Number 생성자 함수를 이용, parseInt.parseFloat 함수를 사용하는 방법, + 단항 산술 연산자를 사용하는 방법, * 산술 연산자를 이용하는 방법

불리언 타입으로 변경시 Boolean 생성자 함수를 이용하는 방법 ! 부정 논리 연산자를 두번 사용하는 방법이 있다.

제어문

제어문은 조건에 따라 코드블록을 실행하거나 반복 실행할 때 사용한다.
일반적인 실행 순서는 위에서 아래이며 제어문을 사용하면 순서를 인위적으로 제어 할 수 있다.

블록문

블록문이란 0개 이상의 문을 중괄호로 묶은 것으로 코드 블록, 블록 이라고 부른다. 자바스크립트에서는 블록문 하나를 실행단위로 취급한다.
블록문은 단독으로 사용이 가능하나 제어문, 함수정의시 사용하는 것이 일반적인 사용방법이다.

1
2
3
4
5
6
7
8
9

{
  var foo = 10;
}

// 제어문
var x = 1;
if (x < 10) {
  x++;
}

조건문

조건문은 조건식의 결과에 따라 코드 블록의 실행을 결정한다. 자바스크립트에서는 if…else문과 switch문 두가지의 조건문을 제공한다.

if…else문

1
2
3
4
5

if (조건식) {
  // 조건식이 참일경우 이 코드블럭이 실행됨
} else {
  // 조건식이 거짓일경우 이 코드블럭이 실행된다.
}

if…else문은 주어진 조건식의 평과결과를 통해 실행할 코드블럭을 결정한다. 이때 평과 결과는 불리언 타입으로 평가되어야 한다.
조건식을 추가하여 실행할 코드블록을 늘리고 싶다면 else if문을 사용한다.