잠온다

1. this javascript에서 this는 한마디로 함수를 호출한 객체다. 즉 선언한 시점에서 this가 결정되는 것이 아니라 호출한 시점에서 this가 결정된다. 개발자 도구에서 this를 콘솔에 출력하면 window 객체가 출력된다. window에서 this를 콘솔로 출력했기 때문에 window가 함수를 호출한 객체가 된다. 이렇게 obj라는 객체의 item이 this를 가지고 있고 함수를 호출할 때 그 item을 인자로 받더라도 this를 호출한 객체는 window이기에 console 또한 window가 출력된다. 반대로 이 경우는 window 객체에선 obj 객체의 main이란 함수를 호출한 것이고 결국 console.log 함수의 호출은 obj 객체의 main 함수, 즉 obj가 함수를 호..

1. DOM DOM이란 Document Object Model의 약어로 넓은 의미로는 웹 브라우저가 HTML 페이지(Document Object = 문서 객체)를 인식하는 방식(Model), 좁은 의미로는 document 객체와 관련된 객체의 집합을 의미한다. DOM은 tree형식의 자료구조로 이루어져 있는데 tree 위쪽의 node를 parent node, 아랫쪽 node를 child node라고 한다. 가장 위에서 시작되는 node는 root node, 자식이 없는 가장 아래 node는 leaf node라고 한다. 2. node vs element node란 tree 구조에서 root node를 포함한 모든 개체를 node라고 표현한다. element는 html 문서에서 , 와 같은 태그를 사용해서 ..

며칠 전에 객체의 속성에 값을 할당하다가 문제가 생겼다. foo2에 test.foo1를 할당할 땐 test를 읽지 못하지만, 함수를 할당할 땐 에러가 나지 않는 것이다. 스크립트를 읽어들이면서 foo2에 test.foo1을 할당할 시점에는 객체 test가 아직 다 그려진 상태가 아니기에, 즉 test는 undefined 이기에 foo2: undefined.foo1과 같은 형태가 되면서 에러가 난다고 생각했다. 그렇다면 func2에서는 왜 test는 undefined로 읽히지 않아서 func2: function() { undefined.fun1(); } 과 같은 형태가 되지 않는 것일까? 1. 실행 컨텍스트(Execution Context) 실행 컨텍스트란, 자바스크립트 코드가 실행되고 연산되는 범위를 나..

1. object shorthand assignment 생성하고자 하는 객체의 key 값이 변수 명과 일치할 경우 value 값을 생략하여 속성을 추가할 수 있다. let name = 'hj'; let age = 26; let person = { name, age } console.log(person) // { name: 'hj', age: 26 } 2. destructuring (비구조화, 파괴) 반대로 객체나 배열에서 값을 빼내올 때 더욱 짧은 코드로 값을 빼내올 수 있다. let person = { name: 'hj', age: 26 } let {name, age} = person; console.log(name, age) // hj 26 모든 속성을 입력할 필요 없이 하나의 속성만 가져올 수도 있..

1. var var phone = 'galaxy'; console.log(phone)// galaxy var phone = 'apple'; console.log(phone)// apple - var는 재선언을 해도 에러가 나지 않는다. - 물론 재할당도 가능하다. 2. let let phone = 'galaxy'; console.log(phone)// galaxy let phone = 'apple'; // Uncaught SyntaxError: Identifier 'name' has already been declared phone = 'apple'; console.log(phone)// apple - let은 재선언은 불가하나 재할당은 가능하다. 3. const const phone = 'galaxy'..

1. 함수와 함수의 호출 const add = (a, b) => a + b; console.log(typeof add);// function console.log(typeof add(1, 2));// number - 함수명 뒤에 괄호가 붙으면 함수의 호출이다. - 함수의 호출은 리턴 값이 말 그대로 결과 값이다. ============================================================================================== const calculator = (func, a, b) => { return func(a, b); } console.log(calculator(add, 1, 2)); // 3 console.log(typeof calculato..