What 자바스크립트의 수많은 메서드를 공부하다 보면, 가끔 비슷하게 생겨서 이게 저거였는지 저게 이거였는지 헷갈리는 경우가 종종 발생한다. 나같은 경우는 slice, splice, split 이 삼총사가 헷갈렸다. 따라서 이번 기회에 포스팅함으로써 이 셋의 차이점을 제대로 기억하고자 한다. How slice() : Array, String const arr = [1, 2, 3, 4, 5]; arr.slice(3); // [4, 5] arr.slice(2, 3); // [3] arr.slice(-1); // [5] arr.slice(-4, -1); // [2, 3, 4] slice()는 배열 메서드로 괄호 안에 인덱스를 인자로 넣으면, 그 인덱스에 해당하는 값부터 배열 끝까지 반환된다. slice()의 ..

What call, apply, bind에 대한 차이를 알아보기 전 우리는 자바스크립트에서의 this에 대해서 이해할 필요가 있다. 단독으로 this를 호출할 경우 this는 window를 호출한다. 또한 객체 안에서 this는 해당 객체를 나타내기도 한다. 함수 안에서 사용할 경우 함수의 주인인 window 객체를 가리킨다. (strict mode에서는 undefined를 반환한다) 메서드를 설정하는 경우 this는 해당 메서드로 호출한 객체로 바인딩된다. 하지만, 간혹 다른 객체를 바인딩할 경우가 생길 수도 있다. 이 경우 call, apply, bind 메서드를 통해 간단히 해결할 수 있다. How call() const obj = { name: '홍길동', myFunc: function(city)..

DOM 추가/삭제하기 // 1. div라는 태그를 만든다. const wrapDiv = document.createElement('div'); // 2. 만든 div에 text를 넣는다. (2가지 방법) wrapDiv.textContent = 'Hello World!'; wrapDiv.append('Hello World!'); // 3. 만든 div의 자식 요소로 넣을 h1 태그를 만든다. const txtH1 = document.createElement('H1'); // 4. 만든 h1에도 text를 넣어준다. txtH1.textContent = '안녕하세요.'; // 5. 만든 h1을 div의 자식 요소로 추가해준다. (2가지 방법) wrapDiv.append(txtH1); wrapDiv.append..

What 특정 배열안의 원소가 [1, 2, 3, 1, 2, 3]이 있다고 하자. 그런데, 나는 1, 2, 3이 반복이 되므로 중복된 원소는 제거해서 [1, 2, 3]이라는 깔끔한 배열로 만들고 싶다. 그럴 땐, filter()와 indexOf()을 활용하여 쉽게 중복 원소를 제거할 수 있다. How const arr = [3, 2, 5, 3, 2, 6, 5, 4]; const filterArr = arr.filter((el, idx) => { return arr.indexOf(el) === idx; }) console.log(filterArr); // [3, 2, 5, 6, 4] 지저분한 중복 원소들로 가득찬 arr 배열이 있다. 이제 다음 단계들을 거쳐서 깔끔하게 중복 원소들을 제거해보자. 1) 우선 ..

배열의 비구조화 할당 배열 선언 및 호출 const [apple, banana, grape] = ['apple1', 'banana1', 'grape1']; console.log(apple); // apple1 console.log(banana); // banana1 console.log(grape); // grape1 변수명과 값을 배열 형식으로 한꺼번에 선언할 수 있다. 나머지 패턴 const fruitList = ['apple', 'banana', 'grape']; const [apple1, ...rest] = fruitList; console.log(apple1); // apple console.log(rest); // ['banana', 'grape'] 전개 연산자를 통해 나머지 변수들을 따로 분..