[엘카데미 챌린지] 13일차 생활코딩 자바스크립트 (3)

1. 서론

생활코딩 자바스크립트를 진행중인데, 기초같은 경우 딱히 기록할 만한 부분이 많이 없는 것 같다.

동작방식 등 디테일한 부분에 대해 더 파헤쳐보지 못한 부분은 아쉽지만,

오늘부로 자바스크립트 강의를 마치고, 다른 강의로 넘어가려고 한다.

 

 

2. 정리

1) 용어 및 함수 정리

리팩토링 : 코드의 가독성을 높이고, 유지보수를 편리하게 만들고, 중복된 코드를 줄이는 방향으로 코드를 개선하는 작업

 

this 키워드 : 이벤트 안에서 실행되는 코드에서는 현재 코드가 속해 있는 태그를 가리키도록 약속돼 있는 특수한 키워드

<input id="night_day2" type="button" value="night" onclick="
            if(this.value === 'night') {
                document.querySelector('body').style.backgroundColor = 'black';
                document.querySelector('body').style.color = 'white';
                this.value = 'day';
            } else {
                document.querySelector('body').style.backgroundColor = 'white';
                document.querySelector('body').style.color = 'black';
                this.value = 'night';
            }
        ">

 

push() : 배열에 값 추가

var coworkers = ["a", "b"];
coworkers.push('c');
coworkers.push('d');

 

주/야간 모드 a태그 글자색 변경

<input type="button" value="night" onclick="
            var target = document.querySelector('body');
            if(this.value === 'night') {
                target.style.backgroundColor = 'black';
                target.style.color = 'white';
                this.value = 'day';

                var alist = document.querySelectorAll('a');
                var i = 0;
                while(i < alist.length) {
                    alist[i].style.color = 'powderblue';
                    i = i + 1;
                }
            } else {
                target.style.backgroundColor = 'white';
                target.style.color = 'black';
                this.value = 'night';
                var alist = document.querySelectorAll('a');
                var i = 0;
                while(i < alist.length) {
                    alist[i].style.color = 'blue';
                    i = i + 1;
                }
            }
        ">

 

2) this와 self

this는 자바스크립트에서 특별한 키워드로서, 함수가 호출될 때 동적으로 바인딩되는 값이다. this는 함수를 어떻게 호출하느냐에 따라 그 바인딩이 결정된다. 함수가 객체의 메소드로 호출되면 this는 그 객체를 참조하게 되고, 일반적인 함수로 호출되면 전역 객체(브라우저에서는 window, Node.js에서는 global)를 참조하게 된다.

 

예를 들어, 다음과 같은 함수가 있다고 가정해보면

const person = {
  name: 'John',
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

여기서 sayHello 함수를 호출할 때, this는 person 객체를 가리킨다.

 

하지만, 다음과 같이 함수를 직접 호출하면 this는 전역 객체를 가리키게 된다.

const sayHelloFunction = person.sayHello;
sayHelloFunction(); // 출력: Hello, my name is undefined (전역 객체에 name 속성이 없기 때문)

---

'self'라는 키워드는 자바스크립트 언어 자체에서 정의된 것은 아니다. 하지만 'this'를 다른 변수 이름으로 대체하는 용도로 'self'라는 이름을 사용하는 경우가 있다.

 

예를 들어, 'this'가 다른 함수나 콜백 함수 내에서 다른 값으로 바인딩되는 상황을 해결하려면 'self'라는 변수를 사용하여 'this'의 값을 저장할 수 있다.

const person = {
  name: 'John',
  sayHello: function() {
    const self = this;
    setTimeout(function() {
      console.log(`Hello, my name is ${self.name}`);
    }, 1000);
  }
};

person.sayHello(); // 1초 후에 출력: Hello, my name is John