JavaScript③

원시타입과 객체(참조)타입

자바스크립트의 7가지 데이터 타입은 원시타입과 객체 타입으로 나뉜다.

원시타입 : 변경 불가능한 값

: 변경이 불가능하다는 것은 변수가 아니라 값에 대한 진술이다.

원시 값을 변수에 할당하면 변수(메모리 공간)에는 실제 값이 저장된다.
원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시값이 복사되어 전달
-> 값에 의한 전달
변수에 원시 값을 갖는 변수를 할당하면 두 변수의 원시 값은 서로 다른 메모리 공간에 저장된 별개의 값이 되어 어느 한쪽에서 재할당을 하더라도 서로 간섭하지 않는다.

객체(참조)타입 : 변경 가능한 값

객체를 변수에 할당하면 변수(메모리 공간)에는 참조 값이 저장된다.
객체의 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달
-> 참조에 의한 전달
객체를 할당한 변수는 재할당 없이 객체를 직접 변경할 수 있다.

객체 타입의 구조적 단점 : 여러개의 식별자가 하나의 객체를 공유할 수 있다.

얕은복사와 깊은복사

얕은복사(Shadow Copy)

객체를 프로퍼티 값으로 갖는 객체를 한 단계까지만 복사하는 것

const 0 ={x: {y:1}};

const c1 = {...o};
console.log(c1 === o);	//false
console.log(c1.x === o.x)	//true

깊은복사(Deep Copy)

객체를 프로퍼티 값으로 갖는 객체에 중첩되어 있는 객체까지 모두 복사하는 것
-> 원시 값처럼 완전한 복사본을 만들어줌

// lodash의  cloneDeep을 사용한 깊은 복사
// "npm install lodash"를 설치한 후, Node.js 환경에서 실행

const 0 ={x: {y:1}};
const _ = require('lodash');
const c2 = _.cloneDeep(o);

console.log(c2 === o);	//false
console.log(c2.x === o.x)	//false

빌트인 객체

자바스크립트의 객체는 크게 3개로 분류할 수 있다.

• 표준 빌트인 객체 : ECMAScript 사양에 정의된 객체
• 호스트 객체 : 자바스크립트 실행 환경에서 추가로 제공하는 객체
• 사용자 정의 객체 : 사용자가 직접 정의한 객체

표준 빌트인 객체

자바스크립트는 Object, String, Number, Boolean, Symbol, Date, Math, RegExp, Array, Map/Set, WeakMap/WeakSet, Function, Promise, Reflect, Proxy, JSON, Error 등 40여개 표준 빌트인 객체가 존재한다.

표준 빌트인 객체인 String, Number, Boolean, Function, Array, Date는 생성자 함수로 호출하여 인스턴스를 생성할 수 있다.

인스턴스
비슷한 성질을 가진 여러개의 객체를 만들기 위해 생성자 함수(Constructor)를 만들어 사용하는데, 생성자 함수를 통하여 생성된 객체를 인스턴스라 한다.

생성자 함수(Constructor) = 거푸집
인스턴스 = 거푸집으로 찍어낸 칼

으로 비유를 많이 하더라....

생성자함수 예시

//  String 생성자 함수에 의한  String 객체 생성
const strObj = new String('Lee');	//String{'Lee'}
console.log(typeof strObj);		//object

//Number 생성자 함수에 의한 Number 객체 생성
const numObj = new Number(123);		// Number {123}
console.log(typeof numObj);		//object

//Boolean 생성자 함수에 의한 Boolean 객체 생성
const boolObj = new Boolean(true);	Boolean {true}
console.log(typeof boolObj)		//object

정규표현식

일정한 패턴을 가진 문자열의 집합을 표혀하기 위한 형식언어
정규표현식은 문자열을 대상으로 패턴 매칭 기능을 제공한다.

• 참고사이트
  https://regex101.com/
  https://regexr.com/
  https://www.regexpal.com/
  https://emailregex.com/

정규표현식의 생성

정규표현식 객체를 생성하기 위해서는 정규표현식 리터럴과 RegExp 생성자 함수(일반적인 방법)를 사용할 수 있다.

정규표현식 리터럴

정규표현식 리터럴은 패턴과 플래그로 구성된다.

정규표현식 플래그

패턴과 함께 정규표현식을 구성하는 플래그는 정규표현식의 검색 방식을 설정하기 위해 사용

플래그	의미	설명
i	Ignore case	대소문자를 구별하지 않고 패턴을 검색
g	Global	대상 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색
m	Multi line	문자열의 행이 바뀌더라도 패턴 검색을 계속한다

자주 사용하는 정규표현식

1 특정단어로 시작하는지 검사
https:// 혹은 http:// 시작하는 문자열 검색

const urlTest = ""https://example.com"";
const urlTestRegexp = "/^http?s:\/\//";
console.log(urlTestRegexp.test(urlTest));        

2. 숫자로만 이루어진 문자열d인지 검사
   (숫자 이외의 문자열이 있다면 false)

const onlyContainNumber = "1234546";
const onlyContainNumberRegexp = "/^\d+$/";
console.log(onlyContainNumberRegExp.test(onlyContainNumber));

3. 하나 이상의 공백으로 시작하는지 검사
   (공백이 들어간 경우 false)

const doNotStartEmpty = " JavaScript";
const doNotStartEmptyRegexp = "/^[\s]+/";
console.log(doNotStartEmptyRegexp.test(doNotStartEmpty));

4. 메일주소 형식에 맞는지 검사

const emailFormat = ""fullstack2022@gmail.com"";
const emailFormatRegexp = "/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/";
console.log(emailFormatRegexp.test(emailFormat));

5. 휴대폰 번호 형식에 맞는지 검사

const cellphoneFormat = "010-1234-5678";
const cellphoneFormatRegexp = "/^\d{3}-\d{3,4}-\d{4}$/";
console.log(cellphoneFormatRegexp.test(cellphoneFormat));

6. 특수 문자열 포함 여부 검사
   (없다면 true)

const doNotSpecialSymbol = "abc#123";
const doNotSpecialSymbolRegexp = "/[^A-Za-z0-9]/gi";
console.log(doNotSpecialSymbolRegexp.test(doNotSpecialSymbol));"