본문 바로가기

전체 글

(33)
일반 객체를 이터러블 객체로 만들기 for of 루프는 기본 이터러블 객체(예: 배열, 문자열, 맵, 셋 등)에서만 사용할 수 있다.그럼 이터러블 객체가 아닌 일반객체(사용자 정의 오브젝트)에서 어떻게 요소들을 순회할까?for...in 루프첫번째는 for in 루프로 const obj = { a: 1, b: 2, c: 3 };for (const key in obj) { console.log(`${key}: ${obj[key]}`); // 출력: a: 1, b: 2, c: 3} 객체에서 사용할 수 있는 루프 방법이다. for of 루프와 동일하게 객체 속성들을 돌며 코드를 실행한다.  배열로 반환하기저번에 keys(), values(), entries() 등의 자료구조 함수들을 배웠는데이 함수들 역시 같은 기능을 하며, 배열로 반환을 ..
개인프로젝트 주차: 영화 검색 사이트 만들기1 이번 주는 개인프로젝트가 있다.바로 영화 검색 사이트 만들기    이번 프로젝트에서 순수 자바스크립트로 이벤트를 구현해야 하며, 제이쿼리는 사용하지 못한다.근데 나는 제이쿼리 없이 사이트를 만들어본 적이 없다.  일단 시작.  구상하기 첫번째로는 이번 프로젝트의 주요 개발 사항을 추려보았다.API로 데이터 받아오기영화 리스트 구현모달창검색 기능북마크(로컬) 기능이 사항들을 구현하는 것을 목표로 정하고화면을 어떻게 만들지 구상했다그리고 발제에서 튜터님이 참고용으로 보여주셨던 화면. 기초적인 ui로 되어있지만, 영화 포스터의 이미지들의 색감이 예쁘기 때문에 사이트 디자인이 괜찮아 보이는 효과가 있다.이 좋은 이미지들을 살릴 수 있는 디자인을 만들어 보고 싶다. 레퍼런스 찾기넷플릭스 나 왓챠 사이트가 생각났다..
이터러블(Iterable) 객체 지난번 Array.from() 함수의 매개변수 조건에서 Iterable 이라는 단어를 보았다. 자바스크립트 배열JavaScript 참고서 - JavaScript | MDN이 페이지는 JavaScript 언어에 대한 정보 보관소입니다. 이 참고서에 대해 더 읽어보세요.developer.mozilla.org  배열의 형태let arr = [1, 2, 3, 4];console.log(arr); // [1, 2, 3, 4]  notion7815.tistory.comiterable 이라는건 어떤 종류의 데이터를 말하는 것일까?   배열이 객체로써 동작하기에 사용할 수 있는 속성과 메서드가 생각보다 많다는것을 알고있을것이다. 예를들면length 부터 시작하여 push(), pop(), shift(), splice(..
고차함수 메서드로 for 루프 대체해보기 지난번 배열메서드 활용하기에서 사용했던 메서드들을 어떻게 대체할 수 있을지 알아보자 첫번째 문제주어진 배열 안의 'on' 이라는 문자열을 'off'로 교체하는 함수를 '새로' 만들기const array = ['on', 'off', 'on', 'on', 'off'];function replace(arr, from, to) { const replaced = Array.from(arr); for(let i = 0; i  이렇게 for 루프로 순회하며 값을 바꾸는 함수를 만들었었다.  오늘은 map을 활용하여 값을 변경하여 새 배열을 반환해보자const array = ['on', 'off', 'on', 'on', 'off'];function replace(arr, from, to) { r..
고차함수 메서드들 콜백함수의 작동원리를 이해하기 위해서 필요한 두가지 개념을 먼저 설명하겠습니다. 일급 객체(First-Class Object)자바스크립트에서는 함수는 일급 객체로 취급됩니다.함수를 특정한 일을 하는 코드블럭 이라는 개념notion7815.tistory.com예전에 함수의 특징에 관하여 언급한적이 있는데 이 부분을 다시 정리해 보자 일급객체 (first-class object)는 일반객체와 다름없이 활용할 수 있는 특징을 말한다. 할당과 비교가 가능함수의 매개변수로 전달가능함수의 반환값으로 사용 가능 그리고 매개변수로 사용하는 함수를 콜백함수라고 하고 함수를 반환하는 함수를 고차함수라고 한다.여기서 고차함수 이야기를 하는 이유는 앞으로 설명할 메서드들이 고차함수이기 때문이다.  forEach(); for ..
배열 메서드 활용 예제 배열을 순회하며 접근하는 방법과 메서드들을 활용하여 아주 간단한 기능을 구현하는 코드를 직접 작성하는 시간을 가져보자메서드를 활용할 때에는 원본 배열을 수정하는 메서드인지 잘 파악하며 사용하도록 하자.   문제1주어진 배열 안의 'on' 이라는 문자열을 'off'로 교체하는 함수를 '새로' 만들기  풀이과정 우선 input 데이터, 함수, 호출부를 만들었다.const array = ['on', 'off', 'on', 'on', 'off'];function replace(arr, from, to) { return replaced;}const result = replace(array, 'on', 'off');console.log(result) 매개변수는 input 데이터가될 배열과, 바꾸기 전 문자열,..
자바스크립트 배열 JavaScript 참고서 - JavaScript | MDN이 페이지는 JavaScript 언어에 대한 정보 보관소입니다. 이 참고서에 대해 더 읽어보세요.developer.mozilla.org  배열의 형태let arr = [1, 2, 3, 4];console.log(arr); // [1, 2, 3, 4]  배열 생성 방법배열 생성자를 이용해 배열을 생성하는 방법let arr1 = new Array(3); // 배열의 사이즈를 정하는 경우console.log(arr1); //[ ]let arr2 = new Array(1, 2, 3); // 배열의 실제 item을 정의하는 경우console.log(arr2); // [ 1, 2, 3 ]   생성자가 아닌 Array의 static 함수를 이용하여 만들수도..
전역 객체 전역객체(Global Object)지금까지 설명했던 객체는 모두 사용자가 필요에 의해 직접 정의한 사용자 정의 객체(User-defined Object) 관련 내용이었다. JS는 자체적으로 브라우저에 화면을 띄우거나 네트워크 전송, 컴퓨터의 파일을 읽는 등의 작업을 수행할 수 없다.JS코드는 런타임 환경에서 실행되며, 이러한 기능을 수행하기 위해서는런타임 환경에서 제공하는 호스트 객체(Host Object)가 필요하다.브라우저 환경에서는 window.location 과 같은 브라우저가 제공하는 호스트 객체 웹 API가 필요하며,Node.js 환경에서는 Node가 제공하는 Node API를 활용하게 된다. JS에는 유용한 기능을 제공하는 내장 객체(Built-in Object)가 기본적으로 존재한다. 내장..