본문 바로가기

FrontEnd/JavaScript

(25)

#24. 자바스크립트(javascript) - 내장함수(concat, join, reduce) 1. concat concat은 두 배열을 합치고, 기존의 배열은 건드리지 않습니다. const arr1 = [1, 2, 3] const arr2 = [4, 5, 6] const concated = arr1.concat(arr2); console.log('concated: ', concated); console.log('arr1: ', arr1); console.log('arr2: ', arr2); 2. join join은 배열 안에 있는 원소를 문자열로 합쳐주는 기능을 합니다. join 함수의 파라미터는 문자열 사이에 배치됩니다. const array = [1, 2, 3, 4, 5] console.log('join: ', array.join()); console.log('join parameter: '..

#23. 자바스크립트(javascript) - 내장함수(filter, splice, slice, pop, unshift, push) 1. filter filter는 특정 조건을 만족하는 원소를 찾아서 반환하는 역할을 합니다. const blood_type = [ { id: 1, type: 'A', donation: true, }, { id: 2, text: 'B', donation: true, }, { id: 3, text: 'AB', donation: true, }, { id: 4, text: 'O', donation: false, } ] const need_donation = blood_type.filter(blood => blood.donation); console.log(need_donation); const need_donation = blood_type.filter(blood => blood.type === 'B'); co..

#22. 자바스크립트(javascript) - 내장함수(forEach, map, index, findindex, find) 내장함수 내장함수란 자바스크립트에서 자체적으로 제공하는 함수를 내장 함수라고 합니다. 내장 함수는 이미 시스템에 정의되어 있기 때문에 사용자가 별도로 정의하지 않고 주어진 원칙에 따라 사용하면 되는 함수입니다. forEach forEach 함수는 for문과 마찬가지로 반복적인 기능을 수행할 때 사용합니다. 하지만 for문처럼 index와 조건식, 증감 등을 정의하지 않아도 callback 함수를 통해 기능을 수행할 수 있습니다. const superHeros = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지']; 아래 방법은 forEach 함수를 이용해 원소를 hero라는 파라미터로 받아 출력하는 방법입니다. function print(hero) { console.log(hero); }..

#21. 자바스크립트(javascript) - 객체 다루는 방법 객체 다루는 방법 객체의 내부 요소를 출력하는 방법은 3가지로 볼 수 있습니다. 1. key, value를 한 쌍으로 묶어 배열로 출력하는 방법 2. key만을 배열로 출력하는 방법 3. value만을 배열로 출력하는 방법 const IronMan = { name: 'Tony Stark', alias: 'IronMan', actor: 'Robert Downey Jr.' } // key, value를 한 쌍으로 묶어 배열로 출력 console.log(Object.entries(IronMan)); // key만을 배열로 출력 console.log(Object.keys(IronMan)); // value만을 배열로 출력 console.log(Object.values(IronMan)); for .. in 함수를..

#20. 자바스크립트(javascript) - 배열(array) 배열 배열은 여러 원소를 담고(나열하고) 있습니다. 자바스크립트에서의 배열은 배열 안에 있는 모든 원소들이 같은 타입일 필요가 없습니다. 배열 선언 방식 const array_name = [] 즉, 대괄호 안에 있는 원소들이 문자열이든, 숫자이든, 객체이든 또 다른 배열이든 상관없이 작성될 수 있습니다. const array = ['a', 'B', 1004, ['c', 'D'], 3.99]; 조회방법 배열을 조회할 때, 0번부터 시작합니다. const array = ['a', 'B', 1004, ['c', 'D'], 3.99]; console.log('array[0]:', array[0]); console.log('array[1]:', array[1]); console.log('array[2]:', ar..

#19. 자바스크립트(javascript) - 객체 안에 함수 넣기 객체 안에 함수 넣기 이번에는 객체 안에 함수를 넣어보도록 하겠습니다. const dog = { name: '멍멍이', sound: '멍멍!', say: function say() { console.log(this.sound); // 여기서 this는 객체 자체를 의미한다. // 따라서 this.sound는 dog.sound 라고 볼 수 있다. } }; 먼저 dog라는 객체를 만들어 줍니다. 객체 내부에서 함수를 정의할 때는 아래와 같이 정의합니다. key: function function_name() { } 이 부분은 간소화가 가능합니다. 간소화 방법은 아래와 같습니다. 1. say: function say() {} 2. say: function() {} 3. say() {} 위의 dog라는 객체의 s..

#18. 자바스크립트(javascript) - 비구조화 할당 비구조화 할당 사용자의 정보를 간단히 보여주는 함수를 만들어보도록 하겠습니다. 객체 및 함수에 대해 잘 모르시는 분들은 클릭해서 읽어보시기 바랍니다. const AXCE = { name: 'Sudon Noh', age: 30, birth: '1992.10.16', alias: 'AXCE' }; function print(main) { const text = `'${main.alias}'의 이름은 '${main.name}'입니다. 나이는 ${main.age}이고, 생일은 ${main.birth} 입니다.`; console.log(text); } print(AXCE); 새로 만든 print라는 함수는 파라미터(main)을 받아 정보들(name, age, birth, alias)을 출력해주는 함수입니다. 이 ..

#17. 자바스크립트(javascript) - for ... in & for ... of // cloning object # for ... in 과 for ... of 의 차이점을 설명하도록 하겠습니다. # 또한 Object를 cloning 하는 방법에 대해서도 설명하도록 하겠습니다. # Object.assign(dest, [obj1, obj2, obj3...]) # 비전공자가 이해한 Javascript 1) for ... in VS for ... of 1) for ... in key 값을 for문으로 출력합니다. for (key in axce) { console.log(key); } for (key in axce) { console.log(axce[key]); } 2) for ... of array의 value 값을 for문으로 출력합니다. // for (value of iterable) const array = [1, ..

#16. 자바스크립트(javascript) - 객체(Object, 오브젝트) # 객체는 자바스크립트의 타입들 중 한 종류입니다. # Object는 연관성 있는 데이터 또는 함수들을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입입니다. # 속성을 추가하거나 삭제하는 방법에 대해 알아보도록 하겠습니다. # 비전공자가 이해한 Javascript Object(오브젝트) - 객체 Object는 자바스크립트의 타입들 중 하나입니다. 자바스크립트에서 거의 모든 객체들은 Object의 인스턴스들입니다. 연관성 있는 데이터 또는 함수들을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입입니다. Object는 key와 value 들의 집합체입니다. object = { key : value, key : value }; 1) 선언 방법 일반적으로 변수를 선언할 때는 하나씩 선언합니다. 이런 방..

#15. 자바스크립트(javascript) - 상속(Inheritance)과 오버라이딩(Overriding) # 상속은 자식 클래스(서브 클래스)에서 부모클래스의 속성과 동작 등의 기능을 사용할 수 있도록 해줍니다. # 부모 클래스에서 이미 정의된 함수 등을 자식 클래스에서 같은 이름으로 사용하되 안에 들어가는 내용(기능, 속성 등)을 바꿔서 사용할 수 있는데, 이를 Overriding이라고 합니다. # 비전공자가 이해한 Javascript 상속(Inheritance) 객체 지향 프로그래밍에서 크게 3요소로 꼽는 캡슐화, 상속, 다형성 세 가지 중 상속을 말합니다. 상속은 객체들 간의 관계를 구축하는 방법입니다. 클래스로 객체가 정의되고 고전 상속에서, 클래스는 기반 클래스, 수퍼 클래스 또는 부모 클래스 등의 기존 클래스로부터 속성과 동작을 상속받을 수 있습니다. 그 결과로 생기는 클래스를 파생 클래스, 서브..

이전 1 2 3 다음

티스토리툴바