배열에 중복된 요소가 있는지 확인 후 제거하여 새 배열로 출력하는 여러 가지 방법에 대해 알아보자. 목차 Set() filter() + indexOf() forEach() + includes() 1. Set() 중복된 값이 있는 배열을 new Set() 메서드를 활용하여 중복 값을 제거한다. 중복은 제거됐지만 배열이 아니기 때문에, 배열 형태로 변형하는 과정이 필요하다. '...' 연산자를 사용하는 스프레드 문법을 통해 객체로 변형해준다. 1 2 3 4 5 6 7 8 9 const array = [1, 2, 3, 1]; const set = new Set(array); console.log(set); // {1, 2, 3} console.log(toString.call(set)); // [object S..
구조분해 할당(Destructuring Assignment)에 대한 자세한 내용은 아래 페이지에서 확인할 수 있다. [Javascript] 구조분해 할당(destructuring assignment) ES6부터 구조분해 할당(destructuring assignment)이라는 문법이 등장했다. 말 그대로 어떤 배열이나 객체를 분해한 후 다시 할당하는 것이다. ES5와 ES6를 비교하며 알아보자. 목차 배열 구조분해 할당 객 fromnowwon.tistory.com 구조분해 할당을 활용하여 클릭한 객체의 정보를 전달받을 수 있다. 그 이벤트 객체 내의 정보만 따로 출력할 수도 있다. 아래에서 살펴보자. 1234567891011121314151617181920212223242526272829303132333..
자바스크립트에는 배열 형태이지만 배열이 아닌 것들이 꽤 있다. 이 경우 배열로 어떻게 변환할 수 있는지 알아보도록 하자. arguments를 사용했을 경우, 배열이 아니지만 형태만 배열인 객체를 출력한다. 배열이 아니기 때문에 map() 배열 메서드를 사용하면 아래처럼 오류가 뜬다. 1 2 3 4 5 6 7 8 9 10 function addTxt () { let newData = arguments.map((value) => { return '#' + value; }); console.log(newData); // Uncaught TypeError: arguments.map is not a function } addTxt(1, 2, 3, 4, 5); Colored by Color Scripter cs 그..
반복적인 동작을 하는 forEach() 메서드, for in 문, for of 문의 특징과 차이점에 대해 알아보도록 하겠다. 목차 forEach() for in 문 for of 문 1. forEach() forEach() 함수는 반복문 기능을 지닌 배열 메서드이다. 배열을 순회하며 모두 순회하면 실행을 멈춘다. 1 2 3 4 5 6 7 8 9 10 11 12 const data = [1, 3, null, undefined, NaN, ""]; data.forEach(item => { console.log(item); }); // 1 // 3 // null // undefined // NaN // Colored by Color Scripter cs [Javascript] 반복문 for, forEach, ma..
클로저(Closure)는 어떤 함수가 함수의 외부에서 선언된 변수에 접근하는 것을 말한다. 아래와 같이 for 문에서 var을 사용해보자. i가 4가 되면 false가 되어 for 문을 나온다. 콜백 함수(클릭 이벤트가 발생한 뒤의 동작을 정한 함수)는 나중에 실행된다. 콜백 함수 영역 밖에 있는 변수 i를 계속 참조하면서 기억해둔다. 그게 4이기 때문에 콜백 함수가 실행될 때 결괏값이 계속 4가 나오는 것이다. 여기에서 i는 클로저 변수라고 할 수 있다. See the Pen Untitled by cw (@fromnowwon) on CodePen. 반면에 for 문에서 let을 사용하면 어떻게 될까? let은 블록 스코프이다. 때문에 for 문 밖으로 나온 변수 i와 상호작용하지 않는다. 따라서 클릭한..
기존에는 함수로 객체를 생성했다면, ES6(ES2015)부터는 클래스를 통해 객체를 생성한다. 함수로 객체를 생성하는 방법부터 클래스로 객체를 생성하는 방법까지 단계별로 알아보도록 하겠다. 목차 공장 함수 (Factory function) 생성자 함수(Constructor function) 클래스(Classes) 1. 공장 함수 (Factory function) 어떤 함수가 객체를 반환할 때, 이 함수를 공장 함수 혹은 팩토리 함수라고 부른다. 객체를 찍어내는 형태이기 때문에 붙은 이름이다. 1 2 3 4 5 6 7 8 9 10 function createInfo() { return { type: 'fruit', name: 'apple', color: 'red', }; } console.log(creat..
자바스크립트에서 객체를 다루려면 참조와 복사의 개념에 대해 반드시 알아야 한다. 객체의 참조, 얕은 복사, 깊은 복사의 차이점에 대해 자세히 알아보도록 하겠다. 요약 의미 방식 참조 (reference) 같은 객체를 참조 변수에 그대로 대입 얕은 복사 (shallow copy) 중첩된 객체를 복사했을 때, 가장 바깥 객체만 복사되며 내부 객체는 참조 관계를 유지. 깊은 복사와 참조의 중간 형식 스프레드 문법 사용 깊은 복사 (deep copy) 복사하여 새로운 객체를 생성 참조 관계가 생기지 않음 JSON 연산자 사용 참조 (Reference) 변수 array와 ref는 같은 객체를 참조하고 있기 때문에 어떤 걸 비교해도 true로 반환된다. 한쪽에서 변경하면 다른 쪽도 변경된다. 1 2 3 4 5 6 ..
JSON(JavaScript Object Notation)이란, 자바스크립트에서 객체를 만들 때 사용하는 표현식이다. 데이터 전송 등에 많이 사용된다. JSON에 내장된 함수인 parse()와 stringify() 메서드에 대해 알아보고 이 두 가지 메서드를 활용하여 깊은 복사하는 방법까지 알아보도록 하자. 목차 JSON.parse() JSON.stringify() JSON.parse() + JSON.stringify() 깊은 복사하기 1. JSON.parse() JSON.parse() 메서드를 사용하면, 문자열(String)을 객체(Object)로 만들 수 있다. 구문 1 JSON.parse('텍스트', (속성명, 속성값)); cs 매개변수인 속성명(key)과 속성 값(value)은 선택사항으로, 사용..
자바스크립트에서 이벤트 관련 코드를 작성할 시 많이 사용되는 event.preventDefault()와 event.stopPropagation()의 개념과 차이점에 대해 알아보자. 목차 event.preventDefault() event.propagation() 1. event.preventDefault() a 태그와 submit 기능의 경우, 지니고 있는 고유의 동작이 있다. a 태그의 경우 지정한 페이지로 이동할 수 있으며 submit의 경우 input에 작성된 값을 전송한 뒤 페이지가 새로고침 된다. 이러한 default 동작이 필요하지 않을 때 preventDefault()를 사용하면 된다. 아래에서 확인해보자. 두 번째 링크는 클릭해도 페이지 이동이 동작하지 않음을 알 수 있다. See the ..
every와 some 메서드는 어떤 조건 함수의 반환값이 true인지 false인지에 따라 메서드의 반환값도 달라진다. every와 some 메서드에 대해 알아보자. 목차 every() some() 1. every() every 매서드는 모든 요소를 순회하면서 조건 함수의 반환값이 모두 true일 경우에만 true를 반환한다. 즉, 하나라도 false가 있으면 false를 반환한다. 구문 1 array.every(조건함수); cs 예제 1 2 3 4 5 6 7 8 const number = (currentNumber) => currentNumber currentNumber