본문 바로가기

분류 전체보기

[ES6] 프로토타입과 클래스 ES6에서는 기존의 프로토타입을 좀 더 쉽게 사용할 수 있도록 class문법이 생겼다.기존 프로토타입에서는 상속을 받기 위해 call함수를 사용하고 자식 클래스의 프로토타입에 부모 클래의 프로토타입을 넣어주는 등의 작업이 필요했다. ES6 클래스 문법에서는 이 부분을 간소화했다. 아래는 기존의 프로토타입 문법이다. function Animal(type, name, sound) {this.type = type;this.name = name;this.sound = sound;} Animal.prototype.say = function() {console.log(this.sound)} function Dog(name, sound) {Animal.call(this, "개", name, sound);} funct.. 더보기
[JAVASCRIPT] 배열 내장 함수 reduce reduce배열 안의 모든 값을 사용해서 어떤 값을 연산해야될때 사용한다. 배열안의 항목 수 만큼 루프를 실행한다. 총 네개의 파라미터를 넣을 수 있다.reduce((accumulator, current, index, array)=>{실행문},accumulator의 초기값); accumulator: 누적값. 초기값을 0,{}등 으로 설정할 수 있다.current: 배열의 항목 중 현재 항목. (루프를 돌때마다 순차적으로 변경된다.)index: 배열의 항목 중 현재 항목의 index((루프를 돌때마다 순차적으로 변경된다.)array: reduce를 사용한 배열 reduce를 사용해서 평균값을 구하는 예제. const numbers = [1, 2, 3, 4, 5]; const avg = numbers.red.. 더보기
[JAVASCRIPT] 배열 내장 함수 concat, es6 스프레드 연산자 concat배열과 배열을 합쳐 새로운 배열을 만드는 함수. 기존의 배열을 수정되지 않는다. const arr1 = [1, 2, 3];const arr2 = [4, 5, 6]; const concated = arr1.concat(arr2);console.log(arr1);console.log(arr2);console.log(concated);=> [1, 2, 3]=> [4, 5, 6]=> [1, 2, 3, 4, 5, 6] ES6의 스프레드 연산자를 사용해도 같은 결과를 얻을 수 있다. const concated = [...arr1, ...arr2];console.log(arr1);console.log(arr2);console.log(concated);=> [1, 2, 3]=> [4, 5, 6]=> [1, .. 더보기
[JAVASCRIPT] 배열 내장 함수 splice와 slice 이름도 기능도 비슷해서 항상 헷갈리는 내장함수중 하나다.둘다 기존 배열에서 항목을 잘라낼 때 사용한다. 차이점은 기존의 배열자체를 잘라내는지 아니면 새로운 배열을 만들어내는지이다. splicesplice(자르기 시작할 항목의 index, 자르기 시작할 항목에서부터 뒤쪽으로 잘라낼 항목의 갯수) const numbers = [10, 20, 30, 40];const index = numbers.indexOf(30);const spliced = numbers.splice(index, 2);console.log(spliced);console.log(numbers);=> [30, 40]=> [10, 20] splice를 사용하자 기존의 numbers배열 자체가 수정됐다. sliceslice(자르기 시작할 항목의 .. 더보기
[JAVASCRIPT] 배열 내장 함수 map, indexOf, findIndex, find, filter mapmap 함수는 배열을가지고 일련의 과정을 거친 새로운 배열을 만들고 싶을 때 사용하는 함수이다.위의 배열의 제곱근을 가진 배열을 만들고 싶다면 아래처럼 하면 된다. const array = [1, 2, 3]; const square = n => n * n;const squared = array.map(square);console.log(squared);=>[1, 4, 9] 더 간단하게 화살표 함수 문법의 익명 함수를 사용해도 된다. const squared = array.map(n => n * n;);console.log(squared);=>[1, 4, 9] 심화예제 const items = [{id: 1,text: "hello"},{id: 2,text: "bye"}]; const texts = i.. 더보기
[JAVASCRIPT] 배열 내장 함수 forEach 배열 내장 함수 forEach를 사용하면 for문을 사용하지 않고 간단하게 반복문을 배열을 조회할 수 있다. const wordArray = ["가", "나", "다"]; 가,나,다로 구성된 wordArray 배열을 출력해보자. function print(word) {console.log(word);};wordArray.forEach(print); (let i = 0; i {console.log(word);}); 더더 간단하게 화살표 함수로도 사용할 수 있다. 지금까지 배열을 조회할 때마다 for문을 사용한게 너무 허탈하다...역시 사람은 배워야한다! 앞으로는 forEach 함수를 적극적으로 활용해야겠다. 더보기
[ES6] 비구조화 할당(객체 구조 분해) 아래의 코드를 보면 info로 받아오는 person의 값을 조회하기 위해 info.key를 반복하고 있다. 비구조화 할당은 이런 코드를 좀 더 편하게 쓸 수 있는 문법이다. 객체 구조 분해라고도 부른다. const person = {name : "홍길동",age : 1500,job : "도적"} function print(info) {const text = `${info.name}은 ${info.age}살이고 직업은${info.job}이다.`;console.log(text);} 비구조화 할당의 사용 방법은 간단하다. function print(info) {const { name, age, job } = info;const text = `${name}은 ${age}살이고 직업은${job}이다.`;conso.. 더보기
[ES6] 화살표 함수 화살표 함수 사용 방법(문법)function 키워드로 만드는 함수를 간결하게 사용할 수 있는 화살표 함수 문법이 생겼다.사용방법은 간단하다. 아래와 같이 함수명을 선언하고 ()괄호 사이에 매개변수를 넣고 =>화살표를 입력, {}중괄호 사이에 실행문을 넣어주면 된다. const add = (a, b) => {return a + b;} 위의 구문은 아래처럼 더 간결하게 사용할 수 있다. const add = (a, b) => a + b; function 함수와 화살표 함수의 차이점함수와 화살표함수로 만드는 함수와 function 키워드로 만드는 함수의 주요 차이점은 화살표 함수에서 this가 가르키는 값과 function키워드의 this가 가르키는 값이 다르다는 것이다. 화살표 함수가 생기기 전까지의 thi.. 더보기

티스토리툴바