2023.12.20 기록 (객체와 prototype, 그리고 includes)

https://gidalim4u.tistory.com/5

2023.12.8 기록 (String.prototype.includes)

 

이전 워들에서 사용된 includes에서 빈 문자열을 true 값으로 포함하지않는 것에 대한 이해로 여러가지가 필요했다.

사용된 코드는 다음과 같다.

 

 String.prototype.includes = function (subStr) {
    if (subStr.length == 0 || this.indexOf(subStr) === -1) {
        return false;
    }
    return true;

 

 

이해하기 위해선 다음과 같은 지식이 필요했다.

 

 

• 가장먼저 || 논리연산자 OR에 대한 적용방식과 == , ===의 비교연산자
• this 가 적용되는 범위
• 마지막으로 prototype에 대한 이해가 필요했다.

 

검색을 해보면 mdn사이트엔 항상 prototype이 붙어서 나온다 string.prototype.indexOf(); 라던가, 

string.prototype.includes(); 같은 것들처럼 말이다.

 

우선 위와 같은 문장을 사용할 때 이해하기 위해서는 prototype는 최상위에 해당하는 값이란 걸 먼저 기억해야한다.

현재 사용중인 메서드에서만 소급적용 하고 싶다면 string.includes();를 사용하는 것이 옳다.

 

하지만 문서 전체에서 광범위하게 적용시키고 싶다면 문서 최상단에 _prototype_을 포함해 사용하면 된다.

이 경우,  모든 문자열 (해당 메서드는 string.prototype.includes 였으므로)에서 영향력을 미친다.

 

 

다시 사용된 코드를 해석하자면 다음과 같다

 String.prototype.includes = function (subStr) {
    if (subStr.length == 0 || this.indexOf(subStr) === -1) {
        return false;
    }
    return true;

 

문자열에서 포함되는 것들에 대하여,

 

문자의 길이가 == 0 (길이가 0,  즉 빈 문자열) OR (||) this(this가 가르키는 메서드는 includes 되는 subStr을 의미한다.)문자열이 === -1 인 경우 ( 문자열이 -1이라 함은 아무것도 없는 문자열을 의미한다.) false를 반환한다.

 

즉 '빈 문자열' 이거나 '문자가 존재하지 않을 경우' false를 반환한다.

 

여기서 의문이 생긴다. 어차피 includes 를 사용한 메서드에서 공백을 false로만 반환하지 않으면 그만 아닌가?

String.prototype.includes = function (subStr) {
    if (subStr.length == 0) {
        return false;
    }
    return true;
};

 

그렇다. 이렇게 사용해도 아무런 지장이 없다.

this.indexOf(subStr) === -1 즉 이 부분의 문장은 문자열을 찾을 수 없을 때도 false 를 반환하는 것에 목적이 있다.

 

단순 includes에서 공백만을 생각한 것이 아닌, 포함되지 않은 오답을 출력했을 때 또한 false를 반환하는 아주 강력한 조건이 되는 것이다.

 

따라서 위의 메서드를 제대로 쓰기 위해선 두 가지 조건이 필요하다.

 

첫번째 prototype을 사용할 것.

두번째 문자열 (string)이 적용되기 전 가장 최상단에 위치 할 것.

 

 다음과 같은 의문이 들 수 있다.

 

• subStr 대신에 다른 변수명을 사용해도 상관없는가.

상관없다.

String.prototype.includes = function (stringlength) {
    if (stringlength.length == 0 || this.indexOf(stringlength) === -1) {
        return false;
    }
    return true;
};

 

이 경우 stringlength 라는 이름을 사용했다. subStr이라는 함수가 존재하기에 혼동이 올 수 있어 변경해보았다.

 

 

• 왜 최상단에 위치해야 하는가.

 

prototype은, 문자열 전체에 영향을 미친다. 다만 이 메서드가 사용 된 이후의 문자열부터 해당된다.

 

const str1 = 'Hello, World!';

console.log(str1.includes(''));  // true

String.prototype.includes = function (subStr) {
  if (subStr.length == 0 || this.indexOf(subStr) === -1) {
    return false;
  }
  return true;
}

console.log(str1.includes(''));//false

 

str1 은 Hello, World! 를 가지고 있고 띄어쓰기가 아닌 빈문자열 (''); 을 가지고 있다. 

 

따라서 string.prototype.includes 가  적용되기 전엔 true를 출력하지만, 

빈 문자열을 false로 반환하는 메서드 이후에 출력해보면 false를 반환한다.

 

이 과정을 찾아보기 위해 순차적인 학습을 약 일주일 정도 거쳤다.

 

앞으로 객체와 배열이 조금 더 남았다.