개발자 블로그

객체에는 배열 메소드를 직접 적용할 수 없다. 하지만 유사 배열 객체의 경우에는 call, apply 메소드를 이용할 수 있다. 유사 배열 객체란? 키가 0 또는 양의 정수인 프로퍼티가 존재하고 length 프로퍼티 값이 0 또는 양의 정수인 객체를 의미한다. 꼭 index 순서는 0번부터 시작해야 하며, length를 반드시 포함하고 있어야 한다. 이 조건이 만족하지 않으면 유사배열객체라고 인식하지 못하거나 에러가 발생한다. ES5까지는 Array.prototype.slice.call(arr,0) 를 사용하였지만, ES6부터는 Array.from(arr) 를 사용하여 유사배열객체나 반복 가능한 객체를 얕게 복사해 새로운 array를 만든다. let obj ={ 0:'a', 1:'b', 2:'c', le..

FRONT-END dev/JavaScript 2022. 8. 6. 18:20

대부분의 객체지향 언어에서 this는 클래스로 생성한 인스턴스 객체를 의미한다. 클래서에서만 사용하기에 혼란의 여지가 없지만 자바스크립트에서 this는 어디서든 사용이 가능하기 때문에 상황에 따라 혼란을 야기합니다. 함수와 객체(메소드)의 구분을 할 때 this를 사용합니다. this는 함수를 호출할 때 결정되는데 함수를 어떤 방식으로 호출하냐에 따라 값이 달라집니다. 전역 공간에서 this 전역 공간에서 this는 전역 객체를 가리킨다. 전역 객체는 브라우저 환경에서 window, Node.js 환경에서는 global을 의미한다. console.log(this)//{process:...} console.log(window)//{process:...} console.log(this === window) ..

FRONT-END dev/JavaScript 2022. 7. 30. 01:51

Fetch() 1. fetch(resource) 2. fetch(resource, options) fetch 메소드는 네트워크에서 리소스를 가져오는 과정을 시작해 fulfilled된 Promise를 리턴한다. A Promise that resolves to a Response object fetch함수는 resource를 받아 response object를 돌려주는 Promise를 return한다. |fetch ✔|Promise ✔ |response object ✔| 위 말대로라면, fetch가 resource를 받았을 때를 콘솔로그 하면 Promise를 반환해야 한다. 직접 찍어서 정말 Promise가 나오는 지 확인해보자. const fetched = fetch('https://jsonplacehol..

FRONT-END dev/JavaScript 2022. 7. 27. 03:48

js를 공부하면 반복문은 꼭 나온다. 반복문의 형태는 여러 가지인데 그중 for, forEach, for of, for in, do while, while을 배워보자. 들어가기 전에 알아두어야 하는 것은 for in 같은 경우 예외적으로 객체에서 쓰이는 반복문이다. 그 외 for, forEach, for of, do while, while은 배열에서 쓰이는 반복문이라는 것을 알아두자. for const animals = ['dog','cat','camel','rabbit'] const myDog = { name: 'miso', age: 10, favorite: 'sweet potato', color: 'brown' } html의 ul element 안에 li를 만들어서 각각의 li 태그에 배열의 아이템들..

FRONT-END dev/JavaScript 2022. 7. 22. 17:17

event.target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 내가 클릭한 자식 요소를 반환한다. 하지만 currentTarget은 이벤트가 부착된 부모의 위치를 반환한다. event.target은 자식요소를 반환하고event.currentTarget 은 부모 요소를 반환한다. + = 더하기 const left = document.querySelector('input') const right = document.querySelector('input:nth-child(2)') const result = document.querySelector('input:nth-child(3)') const div = document.querySelector('div') div.addEventListener..

FRONT-END dev/JavaScript 2022. 7. 20. 14:35

참조형 데이터(객체)의 얕은 복사 food라는 변수에다가 fruits 라는 변수를 복사했다. 그랬더니 food와 fruits가 완전히 같은 메모리를 바라보게 되어 food === fruits 의 값으로 true가 나왔다. 이렇게 되면 food 프로퍼티에 어떤 걸 추가해도 food와 fruits는 같아져서 의미가 없어진다. 그래서 얕은 복사로 food와 fruits를 완전히 별개의 것으로 만들고 싶을 때 그 방법으로 두가지를 쓸 수 있다. 하나는 위에서 사용한 것처럼 object.assign({}, 소스) 를 적용하는 방법이고 다른 하나는 전개연산자를 사용하는 것이다. js에서 깊은 복사는 lodash 모듈의 cloneDeep을 사용하는 방법이 있다. npm i lodash

FRONT-END dev/JavaScript 2022. 7. 19. 15:10

Array.concat() concatenate 는 사슬같이 잇다라는 의미로, concat() 메소드는 array의 아이템들을 한 줄의 사슬처럼 이어주는 역할을 한다. 위의 예제에서 number.concat(color)를 콘솔로그 했더니 (7) [1, 2, 3, 44, 'red', 'yellow', 'blue'] 라는 배열이 출력됐다. 보면 하나의 사슬처럼 이어졌다. 그 외에도 이렇게 배열 안에 배열을 만들어서 concat으로 엮을 수 있는데, 이렇게 하면 배열 안의 배열을 하나의 아이템으로 보기 때문에 출력 결과는 (7)개의 아이템이 나오는 것이 아니라 위 사진처럼 (5) or (4) 개의 아이템이 나올 수 있다. 그리고 위 사진처럼 concat 안에 orange, purple을 직접 넣어도 출력 결과..

FRONT-END dev/JavaScript 2022. 7. 19. 00:23

arrow 함수 배웠는데 자꾸 헷갈려서 정리를 해본다. const apple = function (x) { return x * 2 } console.log('apple:', apple(10)) // apple: 20 여기 일반적으로 우리가 사용하는 기명함수(이름이 있는 함수를 의미함)가 있다. apple 이라는 함수를 arrow function을 사용해서 더 간결하게 표현해보자. const apple = (x) => { return x * 2 } console.log('apple:', apple(10)) // apple: 20 바뀐 거라곤 function을 지우고 매개함수 자리 옆에다가 '=>' 라는 화살표 표시만 해주었을뿐이다. 우리는 이 arrow function을 더 간략하게 줄일 수 있다. con..

FRONT-END dev/JavaScript 2022. 7. 11. 17:47