자바스크립트 - 클래스의 활용
·
Language/JavaScript
es6부터 class라는 개념이 도입되면서, 기존의 객체 생성자로 구현했던 코드들을 깔끔하게 구현할 수 있게 되었다. class Food { constructor(name){ this.name = name; this.brands = []; } addBrand(brand){ this.brands.push(brand); } print(){ console.log(`${this.name}을 파는 음식점들:`); console.log(this.brands.join(', ')); } } const pizza = new Food("피자"); pizza.addBrand('피자헛'); pizza.addBrand('도미노 피자'); const chicken = new Food('치킨'); chicken.addBrand('..
자바스크립트-shift,pop,unshift,push함수
·
Language/JavaScript
배열.shift()함수는 맨 앞에 있는 원소부터 하나씩 꺼내주고, 배열.pop()함수는 맨 뒤에 있는 요소부터 하나씩 꺼내준다. const numbers = [10, 20, 30, 40]; //맨 앞에 있는 원소부터 하나씩 꺼내는 shift()함수 const value = numbers.shift(); console.log(value); // 10 console.log(numbers); // [20,30,40] const nums = [10,20,30,40]; //맨 뒤에 있는 원소부터 하나식 빠지는 pop()함수 const val = nums.pop(); console.log(val); //40 console.log(nums); // [10,20,30] 배열.unshift()함수는 맨 앞에 요소를 추가..
자바스크립트-splice함수와 slice함수
·
Language/JavaScript
splice함수로 기존 원본 배열의 요소를 제거할 수 있다. const numbers = [10, 20, 30, 40]; const index = numbers.indexOf(30); // index부터 시작해서 하나 제거하겠다. numbers.splice(index,1); console.log(numbers); //결과는 [10,20,40] 또는 제거한 요소를 변수에도 담을 수 있다. const numbers = [10, 20, 30, 40]; const index = numbers.indexOf(30); const spliced = numbers.splice(index,2) console.log(spliced); //결과는 [30,40] 기존의 배열을 변경하지 않고 해당 인덱스부터의 요소를 꺼내오는 ..
자바스크립트- filter함수
·
Language/JavaScript
filter함수는 특정조건에 맞는 원소를 추출해서 새로운 배열을 반환해줍니다. const todos = [ { id: 1, text: '자바스크립트 입문', done: true, }, { id: 2, text: '함수 배우기', done: true, }, { id: 3, text: '객체와 배열 배우기', done: true, }, { id: 4, text: '배열 내장함수 배우기', done: false } ] //특정 조건에 맞는 원소를 추출해서 새로운 배열을 반환해주는 함수 filter() //const tasksNotDone = todos.filter(todo => todo.done === false); const tasksNotDone = todos.filter(todo => !todo.done..
자바스크립트 그 외 배열 내장함수들
·
Language/JavaScript
배열.indexOf(배열의 요소); 로 해당 배열의 인덱스 값을 알아낼 수 있다. const superheroes = ['아이언맨','캡틴 아메리카','토르','닥터 스트레인지']; const index = superheroes.indexOf('토르'); console.log(index); // 결과로 2 find()는 찾은 값 자체를 반환하고 findIndex()는 찾은 값의 인덱스 번호를 반환한다. const todos = [ { id: 1, text: '자바스크립트 입문', done: true, }, { id: 2, text: '함수 배우기', done: true, }, { id: 3, text: '객체와 배열 배우기', done: true, }, { id: 4, text: '배열 내장함수 배우기'..
자바스크립트- Map함수 이용하기
·
Language/JavaScript
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]; // 1번 방법 // const squared = []; // array.forEach(n=>{ // squared.push(n * n); // }) // 2번 방법: map 함수 사용하기 // const square = n => n * n; // const squared = array.map(square); // 더 간결해진 3번 방법 const squared = array.map(n => n * n); console.log(squared); 다음은 map함수로 특정 속성의 값을 꺼내오는 방법이다. const items = [ { id: 1, text : 'hello' }, { id: 2, text: 'bye' } ]; con..
자바스크립트 - 객체의 속성과 값 표현하는 법
·
Language/JavaScript
const numbers = [10,20,30,40,50]; const doggy = { name: '멍멍이', sound: '멍멍', age : 2 }; console.log(Object.keys(doggy)); console.log(Object.values(doggy)); console.log(Object.entries(doggy)); Object.keys(doggy)메소드 호출의 결과로 doggy의 속성을 나열해주고, Object.values(doggy)메소드 호출의 결과로 doggy의 값을 나열해준다. Object.entries(doggy)는 key와 value값을 배열형태로 반환해준다. 벨로퍼트님의 자바스크립트 강의를 듣고 작성하였습니다.
takoyummy
'자바스크립트' 태그의 글 목록