728x90

스코프(var, let, const)와 String 메서드들에 대한 공부 정리


스코프 (범위)

 var, let 

예제1

var name = "global var";

function home(){
    for(var i=0; i<10; i++){
    }
    console.log(i); //10
}

home();
var name = "global var";

function home(){
    for(let i=0; i<10; i++){
      //console.log(i); //1 ~ 10 까지 잘나옴
    }
    console.log(i);//에러
}

home();

 

예제2

var list = document.querySelectorAll("li");

for(var i = 0; i<list.length; i++){
    list[i].addEventListener("click", function(){
        console.log(i + "번째 리스트입니다")
    })
}

querySelector

특정 name,id,class를 제한하지 않고 
css선택자를 사용하여 요소를 찾습니다.


querySelectorAll 

사용 방법은 querySelector과 동일하며 
선택자를 선택하여 배열과 비슷한 객체인 nodeList를 반환합니다. 

반환객체가 nodeList이기에 for문 또는 forEach문을 사용합니다.


addEventListener

이벤트 바인딩함. 이벤트 생성.

 

예제3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
    <li>javascript</li>
    <li>java</li>
    <li>html</li>
    <li>css</li>
</ul>
    <script type="text/javascript" src="../js/js_study01.js">

    </script>
</body>
</html>
var list = document.querySelectorAll("li");

for(let i = 0; i<list.length; i++){
    list[i].addEventListener("click", function(){
        console.log(i + "번째 리스트입니다")
    })
}

계속 결과로는 4번째 리스트입니다 라고 문제가 생긴다.

이럴때 let으로 변경할 경우 , 0번째  ~ 3번째 리스트입니다. 라고 위치에 맞게 수정이 된다.

 

 const 

예제1

function home() {
    
    /* 
    *예제 1-1
    var homename = 'my house';
    //console.log(homename);//my house
    homename = "your house"; 
    //console.log(homename);//your house */

    
    *예제 1-2
    const homename = 'my house';
    homename = "your house"; 
    console.log(homename);
    //const 변수는 재할당시 오류발생

}

home();

 

지키면 좋은 사용 법칙 

  • const를 기본으로 사용한다.
  • 변경이 될 수 있는 변수는 let을 사용한다
  • var는 사용하지 않는다.

 

 

예제2

 

const를 사용하더라도 배열과 오브젝트의 값을 변경하는 것은 가능하다.

//immutable array를 어떻게 만들지?
const list = ["apple", "orange", "watermelon"];
list2 = [].concat(list, "banana");
console.log(list, list2);
console.log(list === list2);

//출력값 : 
//['apple', 'orange', 'watermelon']
//['apple', 'orange', 'watermelon', 'banana']
//fasle

concat()

인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다.

 

string의 메서드들 

 str.startsWith() 

어떤 문자열이 특정 문자로 시작하는지 확인하여 결과를 true 혹은 false로 반환

let str = "hello world";
let matchstr = "hello"; //true
//let matchstr = "helloo"; //false

console.log(str.startsWith(matchstr));

 

 str.endsWith() 

어떤 문자열이 특정 문자로 끝나는지 확인하여 결과를 true 혹은 false로 반환
let str = "hello world";
let matchstr = "world"; //true
//let matchstr = "worldd" //false

console.log(str.endsWith(matchstr));

 

 str.includes() 

어떤 문자열이 포함되어있는지 확인하여 결과를 true 혹은 false로 반환

let str = "hello world";

//console.log(str.includes("test")); //false
console.log(str.includes("wor")); //true
728x90

'STUDY > JavaScript' 카테고리의 다른 글

[JS] spread operator - 배열의 복사  (0) 2023.01.05
[JS] 배열 순회 for · for-in · for-of · forEach  (0) 2023.01.03
[JS] 함수 표현식과 함수 선언식의 차이 - 호이스팅  (0) 2022.12.28
[JS] options = options || {}; / 연산자 우선순위 · 삼항 연산자  (0) 2022.12.28
[JS] .charAt() 와 .indexOf() 에 대해 알아보기  (0) 2022.12.28

티스토리툴바