기존에는 함수로 객체를 생성했다면, 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
중첩된 배열의 차원을 낮추는 flat 매서드에 대해서 알아보자. flat() flat 메서드는 배열 안에 배열이 있는 다중 차원의 배열의 차원을 한 단계 낮춰준다. 배열이 일차원이라면 그대로 일차원으로 남는다. flat()의 단점은 속도가 비교적 느리다는 점이다. 구문 1 flat([depth]); cs 기능 1) 다중 차원 배열 평탄화 1 2 3 4 5 6 7 8 const array1 = [1, 2, 3, 4, 5, [6, 7, 8, 9, 10]]; array1.flat(); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] const array2 = [1, 2, 3, 4, 5, [6, 7, [8, 9, 10]]]; array2.flat(); // [1, 2, 3, 4, 5, [6, 7,..
ES6부터 구조분해 할당(destructuring assignment)이라는 문법이 등장했다. 말 그대로 어떤 배열이나 객체를 분해한 후 다시 할당하는 것이다. ES5와 ES6를 비교하며 알아보자. 목차 배열 구조분해 할당 객체 구조분해 할당 구조분해 할당 응용 1. 배열 구조분해 할당 1) 형식 ES5 배열의 모든 요소에 접근해 하나씩 변수에 담는 방식이다. 1 2 3 4 5 6 const fruits = ['apple', 'banana', 'kiwi']; const red = fruits[0]; const yellow = fruits[1]; const green = fruits[2]; console.log(red, yellow, green); // apple banana kiwi cs ES6 frui..
누구나 알고 있겠지만 평균을 구할 때에는 저장된 요소의 값을 모두 더하고 그 요소의 개수만큼 나누면 된다. 이렇게 평균값을 구하는 방식을 코드로 작성해보자. 1 2 3 4 const array = [12, 5, 7, 32, 10]; const average = array.reduce((a, c) => a + c) / array.length; console.log(average); // 13.2 Colored by Color Scripter cs 모든 값을 더할 때, reduce라는 매서드를 사용하였다. reduce는 배열에 있는 모든 요소의 값을 합쳐서 새로운 값으로 반환하는 매서드이다. reduce의 형식은 아래와 같다. 1 2 3 array.reduce((accumulator, currentValue..
자바스크립트에서 삼항 연산자(Ternary operator)인 물음표에 대해 알아보자. 주로 if 문을 간단하게 표현하고 싶을 때 사용한다. 참과 거짓 중 하나를 선택할 수 있도록 만든 것으로 '조건 연산자'라고 한다. 목차 2항 연산자와 3항 연산자의 구분 삼항 연산자 구문 표현 삼항 연산자 사용법 다중 삼항 연산 1. 2항 연산자와 3항 연산자의 구분 2항 연산자 3항 연산자 n > 5 n > 5 ? 9 : 2 2. 삼항 연산자 구문 표현 (조건) ? value1 : value2 조건이 참인 경우 물음표 바로 다음에 있는 value1이 실행되며, 거짓이면 value2가 실행된다. 3. 삼항 연산자 사용법 삼항 연산자는 변수에 결괏값을 담아 필요할 때마다 변수를 사용한다. 같은 조건이 if 문과 삼항 ..
본문으로 들어가기 전에 변수의 재선언, 재할당, 변수 참조, 그리고 유효범위(Scope)에 대해서는 아래 페이지에서 참고하면 된다. var, let, const 차이점과 유효범위 (Scope) 작업을 할 때 무의식적으로 var로만 변수를 선언하다가, let이나 const라는 변수를 보면 의아할 것이다. 도대체 왜 변수를 구분해서 쓸까? 사실 ES6 이전에는 let과 const가 존재하지 않았다. ES6에서 let fromnowwon.tistory.com for 문을 사용할 때, 조건식 영역에서 var을 사용할 때와 let을 사용할 때 결괏값이 다르게 나온다. 그 이유에 대해 알아보자. 목차 var, let, const 비교표 for 문에서의 변수 참조 for 문 안에서 함수를 사용할 때 for 문 안에서..