Frontend/Javascript

자바스크립트 기본 구성 요소

Developer Mobssie 2021. 4. 28. 12:49

자바스크립트 기능 : 기본적인 객체와 데이터 유형으로 구분한다.

문자열, 숫자, 불리언 데이터유형은 문자열, 숫자, 불리언과 연관된 기능을 제공한다.

내장 RegExp, 날짜(Date), Math객체는 각각 정규표현식, 날짜, 필수적인 수학 연산과 같은 기본 기능을 제공

자바스크립트의 기본적인 구성 요소는 시간이 지나면서 변했다.

 

자바스크립트 객체(object), 원시(primitive), 리터럴(literal) 구분

자바스크립트 리털럴은 인용 문자열(String), 부동 소수점수(Number), 불리언(Boolean)과 같은 특정한 형식의 값을 나타냄.

자바스크립트 원시(primitive)는 데이터 유형의 인스턴스를 나타내며 문자열, 숫자, 불리언, null, undefined 등 다섯 가지 형식이 있다.

 

원시 데이터 유형 중 문자열, 숫자, 불리언 데이터 유형만 상보적인 생성자 객체(constructor object)를 가지고 있다.

→ 이 객체들은 내장되어있는 속성 및 메서드에 접근이 가능해 단순히 값을 할당하고 부차적으로 그 값을 추출하는 것을 넘어서 더 다양한 일처리를 해줄 수 있다.

var str1 = '문자열';

console.log(str1.length); // String객체의 length 속성 사용

▶ 변수를 선언하는 것이 단순한 문자열이나 숫자를 다루고 있는거처럼 보일 수 있지만, 광범위한 기능을 구현하기 위한 진입로를 만드는 것과 같다. 변수를 사용해 다른 일을 좀 더 하고자 한다면 해당 데이터 유형의 상보적 자바스트립트 객체 및 속성을 사용야 한다.

 

내부를 들여다보면, 코드가 리터럴에 대한 String 객체의 속성을 추출하려면

새로운 String 객체가 생성 → 그 값이 변수에 포함된 문자열의 값이 됨 → length 속성을 읽어내 결과를 출력 → 새로 생성된 String객체는 폐기

객체 속성을 읽어낼 때 자바스크립트 엔진은 원시 데이터를 감싸기 위해 실제로 객체를 생성할 필요가 없다.

단지 이런 형태의 동작을 하는것처럼 보인다.

 

문자열, 실수, 정수, 정수, 불리언의 실제 표현방식은 리터럴이다.

new 연산자를 쓰지않고 리터럴 표현방식이나 객체를 이용해 원시 Boolean, 문자열, 숫자 변수를 생성할 수 있다.

var str1 = String('문자열') //원시문자열
var num1 = Number(1.45)    //원시 숫자
var bool1 = Boolean(true)  //원시 boolean

 

객체를 신중하게 인스턴스화하려면 new 연산자를 사용

var str2 = new String('문자열') //String 객체 인스턴스
var num2 = new Number(1.45)    //Number 객체 인스턴스
var bool2 = new Boolean(true)  //원시 boolean

완전 일치(strict equality) 연산자를 이용하여 객체 인스턴스를 리터럴 값에 비교하면 원시와 객체 인스턴스의 차이를 알 수 있다.

 

var str1 = String('문자열');

if (str1 === '문자열'){

   console.log('equal');

}



var str2 = new String('문자열');

if(str2 === '문자열'){

   console.log('equal')

} else {

  console.log('not equal')
}





// result 출력

equal

not equal

 

세 가지 원시 데이터 유형에 대한 객체 인스턴스를 직접 생성하지 않는다.

객체보다는 숫자, 불리언, 문자열처럼 동작하는 숫자, 불리언, 문자열 변수만 있으면 된다.

유형(type) 확인이나 완전 일치 연산자를 사용할 때 변수를 '객체'로 정의하는 것보다는 변수가 원하는 데이터 유형과 일치하는것이 중요.

var num1 = 1.45;
var num2 = new Number(1.45);

console.log(typeof num1); //숫자를 출력
console.log(typeof num2); //객체를 출력

원시 데이터 유형 객체를 직접 인스턴스화하면 다르게 출력된다.