자바스크립트에서 this는 참으로 어려운 개념이다. this가 호출될 때, 호출되는 대상에 따라서 참조하는 범위가 동적으로 바뀌기 때문이다. 메서드로써 호출되면 본인을 호출한 메서드를 가지고 있는 객체를 참조한다. (Array라던지, Object라던지..) 함수 내 함수로써 호출되면 전역을 참조하거나(선언형), 위 스코프를 참조(화살표형)한다. 메서드로써의 this는 무엇을 참조할까? ;[5, 6, 7].push(10) // push 메서드 내부의 this는 `.`뒤의 배열([5, 6, 7])을 참조하게 된다. const a = [1, 2, 3] a.getLast() // getLast 메서드 내부의 this는 `.`뒤의 배열([1, 2, 3])을 참조하게 된다. alert('안녕하세요.') // `.`..
문제 Write a getCharCount prototype function for arrays of strings that returns an object of character counts. (어레이 내 모든 문자열의 문자 하나하나를 카운트해서 오브젝트로 출력하는 getCharCount 함수를 만들어라.) const result = ['Charmander', 'Charmeleon', 'Charizard'].getCharCount() /* * Returns { C: 3, h: 3, a: 5, r: 5, m: 2, n: 2, d: 2, e: 3, l: 1, o: 1, i: 1, z: 1 } */ 문제 해석 모든 것을 순회해서 다른 자료를 만든다. → reduce 메서드를 쓰기 적합한 환경이다. 배열의 메..
만약 새로운 오브젝트를 new 키워드를 통해 생성하고자 할 때, new라는 키워드 뒤에는 실제로 행해지고 있는 동작들이 있다. function Person(name, age) { this.name = name this.age = age } const me = new Person('2DC', 24) Person 펑션은 사실 특별한 것은 없다. 그냥 자바스크립트에서 쓰이는 펑션이다. 다만 new 키워드가 이 함수를 스페셜하게 만든다. 위의 함수를 new Person()의 형태로 실행시키게 되면, 자바스크립트는 새로운 오브젝트를 만들기 위해 동작하게 되며 me라는 변수에 오브젝트 프로토타입 상속(Prototype Inheritance)을 적용한다. 아래 코드는 위의 Person()이 new 키워드와 함께 동작..
(문제) Write a function called keyOfLongestString that finds the longest value string but return its key. 오브젝트 내 밸류 중 가장 긴 문자열을 가진 key를 출력하는 keyOfLongestString라는 함수를 작성하라. const info = { ironman: 'arrogant', spiderman: 'naive', hulk: 'strong' } const result = keyOfLongestString(info) // result should be "ironman" // because "arrogant" is longer than "naive" and "strong" const info2 = { a: 'xxxxxx'..
(문제) Write a function called longestString that finds the longest value string in an object. 오브젝트의 Value 중 가장 길이가 긴 스트링을 가진 longestString이라는 function을 작성하시오. const info = { ironman: 'arrogant', spiderman: 'naive', hulk: 'strong' } const result = longestString(info) // result should be "arrogant" (문제 이해) 오브젝트 내부의 value를 비교해야 한다. Object.value() 헬퍼 펑션을 사용해서 Object의 value들을 어레이로 만들어줄 수 있다. 어레이 내부의 가..
Object Helper function(오브젝트 헬퍼 펑션) Object 타입은 object의 key와 value를 수정하거나 찾아낼 수 있는 몇가지 'helper' function이 존재한다. Object.keys() Object.keys는 오브젝트를 인수로 받고, 오브젝트의 키를 어레이 형태로 리턴한다. const info = { ironman: 'arrogant', spiderman: 'naive', hulf: 'strong' } const result = Object.keys(info) Object.keys(오브젝트) 형태로 이용한다. 오브젝트 내 키들이 어레이의 형태로 리턴된다. 그런데 왜 info.keys() 처럼 사용하지 않을까?? 대부분의 Object의 헬퍼 펑션들은 정적함수기 때문이다...
오브젝트도 어레이처럼 비원시 유형으로 분류된다. 즉, 값이 변수로 바로 할당되는 것이 아닌 변수는 자료를 자료가 있는 메모리의 주소를 참조를 하는 형식으로 표현한다. 아래 코드에서 star와 star2의 최종적인 오브젝트 프로퍼티는 어떻게 될까? const star = { name: 'Tarzan'} // (1번) const star2 = star // (2번) star2['friend'] = star // (3번) star2['friend']['lover'] = 'jane' // (4번) // what is star? // what is star2? (1번) star는 {name: 'Tarzan'} 오브젝트의 주소를 참조한다. (2번) star2는 star를 할당한다. (즉, 두 주소가 참조하는 오브젝..
Array : 어레이 Object : 오브젝트 이라고 명명한다. 오브젝트는 자바스크립트에서 가장 중요한 컨셉트라고 할 수 있다. 왜냐하면 자바스크립트를 구성하는 중요한 기능들의 대부분이 오브젝트로 되어있기 때문이다. 어레이처럼 오브젝트도 다양한 데이터를 저장할 수 있는 자료구조인데, 오브젝트와 어레이를 둘 다 사물함으로 비교해볼 수 있다. 어레이는 사물함 내 물건마다 각 자리가 있고, 번호(인덱스)가 달려있는 것이라고 한다면 오브젝트는 사물함 내 물건마다 넘버링이 아닌 문자열 라벨이 달린 것이라고 할 수 있다. 이 때 오브젝트 내 라벨은 'key(키)'라고 부르고 물건은 'value(밸류)'라고 부른다. 오브젝트를 한번 만들어보자. 오브젝트를 생..
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction Introduction to the DOM - Web APIs | MDN The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. This guide will introduce the DOM, look at how the DOM represents an HTML document in memory and how to use APIs to developer.mozilla..
브라우저에 자료를 저장할 수 있게하는 localStorage 기능을 통해 todolist를 제작해보자. 필요한 기술의 이해 자바스크립트의 Array에 대한 이해 및 reduce, forEach 메서드에 대한 이해 document 객체를 이용해서 필요한 node를 선택할 수 있는지에 대한 이해. localStorage.getItem 메서드와 localStorage.setItem 메서드에 대한 이해. JSON.stringify(), JSON.parse()에 대한 이해. 만들기 전 생각해야할 사항 input에 '할 일'을 작성하고 Add 버튼을 눌렀을 때, 기록한 것들이 화면에 출력되어야 함. 각 '할 일' 을 클릭할 경우, 클릭한 '할 일'이 삭제되고, 수정된 부분이 화면에 출력되어야 함. 화면에 출력되고,..
