JAVASCRIPT

자바스크립트 어려운 부분 복습하기

진블로그 2023. 3. 12. 12:59
다른 명언

728x90
반응형

변수 : 지역변수 + 전역변수(스코프)

함수 내부에서 선언된 변수는 지역 변수(local variable)라고 하며, 해당 함수 내에서만 접근할 수 있습니다.
반면에 함수 외부에서 선언된 변수는 전역 변수(global variable)라고 하며, 프로그램의 어느 곳에서든지 접근할 수 있습니다.

{
    let x = 100;    //전역 변수
    let y = 200;    //전역 변수

    function func(){     
        let x = 300;        //지역 변수     x앞에 let이 없으면 전역변수로 변경
        let y = 400;        //지역 변수
        z = "javascript";   //전역 변수로 취급 string모드 선언하면 에러

        console.log("함수 안"+x);       //함수 안의 x값은 지역변수이기 때문에 사용가능
        console.log("함수 안"+y);
        console.log("함수 안"+z);
    }
    func();

    console.log("함수 밖"+x);
    console.log("함수 밖"+y);
    console.log("함수 밖"+z);
}

// 정답 : 함수 안300
//함수 안400
//함수 안javascript
//함수 밖100
//함수 밖200
//함수 밖javascript

배열 : 데이터 불러오기 : map()

map을 이용하여 배열에서 불러온 값을 배열에 저장할 수 있습니다.
Map은 forEach() 메서드를 통해 각 항목을 반복할 수 있습니다.

map() 메소드는 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 새로운 배열로 반환합니다. 이 메소드를 사용하면 기존 배열을 변경하지 않고도 요소를 변환하거나 새로운 배열을 만들 수 있습니다.

 {
    const num = [100, 200, 300, 400, 500];

    num.forEach(function(el, i, a){
        console.log(el)
        console.log(i)
        console.log(a)
    });

    num.map(function(el, i, a){
        console.log(el)
        console.log(i)
        console.log(a)
    });
}

결과 : 100 0 [100, 200, 300, 400, 500] 200 1 [100, 200, 300, 400, 500] 300 2 [100, 200, 300, 400, 500] 400 3 [100, 200, 300, 400, 500] 500 4 [100, 200, 300, 400, 500]

상수 : 데이터 저장 + 데이터 변경(x)

상수는 데이터 저장은 가능하나 변경은 불가합니다. 상수(const)는 이미 선언한 상수에 대해 중복 선언이 불가능 하며 상수의 값을 재지정 할 수도 없습니다.
const 상수를 변경하려 하였으나 오류로 변경하지 못하였습니다.

{
    const x = 100;
    const y = 200;
    const z = "javascript";
    
    //x = 300;        //Assignment to constant variable. 
    //y = 400;        //Assignment to constant variable. 
    //z = "react";    //Assignment to constant variable. 

    console.log(x);
    console.log(y);
    console.log(z);
     
    //const x = 100, y = 200, z = “javascript”;   //숫자,문자,블린(논리),undefined,null(값이 없는것),객체,배열,심벌 --> 자료형(typeof)
    //let x = 100;
    //let y = 200;
    //let z = “javascript”;
    //x -= 1000;      // 100 - 1000 = -900
    //x += 1000;      // -900 + 1000 = 100
    //console.log(x, y, z);
}

객체 : 데이터 불러오기 : hasOwnProperty()

hasOwnProperty()는 객체가 특정 속성을 가지고 있는지 확인하는 메서드입니다.
이 메서드는 객체의 속성 중에서 상속받은 속성은 확인하지 않고, 객체가 직접 소유한 속성만 확인합니다.

 {
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    console.log(obj.hasOwnProperty("a"));    //true
    console.log(obj.hasOwnProperty("b"));    //true
    console.log(obj.hasOwnProperty("c"));    //true
    console.log(obj.hasOwnProperty("d"));    //false

    console.log("a" in obj);            //for in문과 비슷하게 보임
    console.log("b" in obj);
    console.log("c" in obj);
    console.log("d" in obj);
}

// 정답 :
//true
//true
//true
//false
//true
//true
//true
//false

함수 유형 : 프로토타입 함수

프로토타입 함수는 객체 생성자 함수에 의해 생성된 모든 객체가 공유하는 메서드입니다.
객체 생성자 함수에 메서드를 추가하면, 생성된 모든 객체에서 해당 메서드를 사용할 수 있습니다. 객체 생성자 함수에 메서드를 추가하려면, 생성자 함수의 프로토타입 객체에 메서드를 추가해야 합니다.

 {
    function Func(num, name, word){
        this.num = num;
        this.name = name;
        this.word = word;
    }

    Func.prototype.result = function(){
        document.write(this.num +". "+ this.name + "가 " + this.word + "되었습니다."+"");
    }

    const info1 = new Func(1, "함수", "실행");
    const info2 = new Func(2, "자바스크립트", "실행");
    const info3 = new Func(3, "리액트", "실행");

    info1.result();
    info2.result();
    info3.result();
}

// 정답 :
//1. 함수가 실행되었습니다.
//2. 자바스크립트 실행되었습니다.
//3. 리액트가 실행되었습니다.

 

this는 현재 실행 컨텍스트 내에서 참조하는 객체를 가리킵니다. this는 함수 내에서 사용될 때 호출 방식에 따라 달라집니다.

1. 함수 호출에서 this

함수를 호출할 때, this는 전역 객체를 가리킵니다. 전역 객체는 window 객체이며, 브라우저에서 실행되는 자바스크립트 코드에서는 window 객체를 가리킵니다.

function example() {
  console.log(this); // window
}
example();

2. 메소드 호출에서 this

객체의 메소드를 호출할 때, this는 그 객체를 가리킵니다.

const obj = {
  name: 'John',
  greet() {
    console.log(`Hello, ${this.name}!`);
  }
};
obj.greet(); // Hello, John!

3. 생성자에서 this

생성자 함수를 사용하여 객체를 만들 때, this는 새로 생성되는 객체를 가리킵니다.

function Person(name, age) {
  this.name = name;
  this.age = age;
}
const john = new Person('John', 30);
console.log(john); // Person { name: 'John', age: 30 }

 

while문을 이용하여 1부터 50까지의 합 구하기

let sum = 0;
let i = 1;
while(i<=50){
    sum += i;
    i++;
}
document.write(sum);

// 정답 : 1275

total 변수를 0으로 초기화하고, i 변수를 1로 초기화한 후, while 루프를 돌면서 i가 50 이하일 동안 total에 i를 더하고 i를 1씩 증가시킵니다.

즉, while 루프는 1부터 50까지의 모든 정수를 순회하면서 total 변수에 누적 합을 계산하는 역할을 합니다. 반복문의 조건인 i <= 50은 i가 50 이하인 동안 while 루프를 계속 실행하도록 합니다.  while 루프가 종료된 후 total 변수에는 1부터 50까지의 합이 저장되며, console.log() 함수를 사용하여 결과를 출력합니다. 

728x90