만약 새로운 오브젝트를 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..
멋쟁이사자처럼 FE 3기 활동을 하고나서 나아진 것이 있는가? 결론을 말하자면 YEESSS 이다. 지난 한달간 멋사에서 HTML CSS 에 대해 심화학습했다. 이종찬 강사님(빔캠프)의 강의로 CSS에 대한 두려움을 떨쳐낼 수 있었고, 한재현 강사님의 시맨틱한 html 작성법을 배워 html에 대한 두려움 역시 떨쳐낼 수 있었다. 이호준 대표님의 시각에서 말씀해주시는 개발자 현실 토크를 통해 어떻게 개발자로 밥벌이해야 할 지도 대략적으로 머릿속에 그릴 수 있었다. 종합적으로 이번 한달동안 html과 css에 대한 직관이 크게 상승했다. 개발자로써의 마음가짐이 잡히게 되었다. 팀플레이에 대한 이해 프론트엔드스쿨에서 회고조장, DOM 챕터2 챕터장을 맡게되었다. 어쩌다보니 다 조장이 되었는데... 바쁜 와중에..
브라우저에 자료를 저장할 수 있게하는 localStorage 기능을 통해 todolist를 제작해보자. 필요한 기술의 이해 자바스크립트의 Array에 대한 이해 및 reduce, forEach 메서드에 대한 이해 document 객체를 이용해서 필요한 node를 선택할 수 있는지에 대한 이해. localStorage.getItem 메서드와 localStorage.setItem 메서드에 대한 이해. JSON.stringify(), JSON.parse()에 대한 이해. 만들기 전 생각해야할 사항 input에 '할 일'을 작성하고 Add 버튼을 눌렀을 때, 기록한 것들이 화면에 출력되어야 함. 각 '할 일' 을 클릭할 경우, 클릭한 '할 일'이 삭제되고, 수정된 부분이 화면에 출력되어야 함. 화면에 출력되고,..
문제 출처 https://www.c0d3.com/curriculum/js2 C0D3 — Learn Javascript the old school way Learn the foundations to be a full stack software engineer. 100% free. www.c0d3.com Write a function called solution that replicates Array.prototype.reduce and call it cReduce. Callback takes 4 input parameters, accumulator, element, index and original array. documentation result = [5,8,7].cReduce( (acc, e, i, a..
