'Development/JavaScript'에 해당되는 글 3건

  1. [Javascript] 'return' outside function definition 문제 해결하기
  2. Javascript 문자열 치환 replaceAll 함수
  3. [Javascript] 인터넷 익스플로러에서 Includes 함수가 동작하지 않는 현상

인텔리제(intellij) 계열 IDE에서 Javascript 코드 수정 시 return 부분에 빨간 밑줄이 그어지며, 'return outside function definition' 오류가 발생하는 경우가 있습니다.



[Javascript] 'return' outside function definition' 문제 해결하기


이는 가로()나 괄호{} 기호의 적절치 못한 사용으로 일어나는 문제로 함수 내에서 괄호를 잘 열고 닫지 않았거나, 틀리게 쓴 부분이 있는 것입니다. 이 문제를 해결하면 빨간 밑줄이 사라지게 됩니다.

JavaScript에서의 replace는 처음 만나는 문자열만 대체합니다. 해당하는 문자열이 뒤에 더 있어도 바꾸지 않습니다. 모두 바꾸기(Replace All)의 효과를 보고 싶은데 그러지 못하죠. 이를 위한 함수가 있습니다.



Javascript 문자열 치환 replaceAll 함수

아래 함수를 사용하여 해당하는 문자열을 모두 치환할 수 있습니다.

function replaceAll(str, searchStr, replaceStr) {
return str.split(searchStr).join(replaceStr);
}

replaceAll(문자열, 찾을 문자열, 덮어쓸 문자열);


사용 예)

replaceAll("hi hello hi" , "hi", "hello");


반환값)

hello hello hello


Includes는 항목에서 원하는 특정 문자열이 있는지 확인해주는 JavaScript 함수입니다. 아무 생각 없이 습관처럼 쓰다가 인터넷 익스플로러(Internet Explorer)에서는 동작하지 못하고 오류를 뿜어냈습니다.

최신 버전인 IE11에서도 마찬가지였으며, 다른 브라우저에서는 잘되는데 유독 IE에서만 지원하지 못하는 함수였습니다.




해결 방법


같은 기능을 하는 다른 함수로 바꿔 문제를 해결할 수 있습니다.


기존

if(str.includes('hi')){
alert('HI!!');
}


변경 후

if(str.indexOf('hi') >= 0){
alert('HI!!');
}


문자열.indexOf(확인할문자열) >= 0 을 이용해서 includes와 동일한 기능을 하게 할 수 있습니다. indexOf는 찾고자 하는 문자열이 어디 위치에 있는지 반환해주는 함수인데, 문자열 내에 존재하지 않으면 -1을 반환합니다. 


따라서 0 이상이면 존재한다고 볼 수 있습니다.