본문 바로가기

JAVASCRIPT

(13)
Object(객체) 1.객채의 정의 primitive type 자바스크립트 자료형의 기본 타입으로 변경 불가능 한 값이다. 변수 하나당 하나의 값을 원칙으로 한다. const name = 'yurim'; const gender = 'female'; const age = 29; yurim이라는 사람에 대한 정보를 각각의 변수에 담아서 console창에 출력하는 함수를 만들고자 한다면 아래와 같이 각각의 변수들을 다 입력해주어야 할 것이다. const print = (name,gender,age) => { console.log(name, gender, age); } print(name, gender, age); 이러한 방법은 인자의 값이 적을때면 큰 문제가 없지만 인자의 값이 많아질 경우 파라미터가 너무 많이 생기고, 결국 관..
DOM EVENT DOM이란? DOM이란 Document Object Model의 약자로 문서 객체 모델을 의미한다. 쉽게 말해 HTML안의 내용물들을 node(html을 구성하는 최소 단위?정도로 이해하면 될 것 같다)의 형태로 변화시켜서 script문서 내에서 관리 할 수 있도록 만들어주는것이다. 즉 웹을 구성하는 html의 내용물(text, img, elemet등)을 DOM을 이용해서 조작 할 수 있다. 그런데 왜 우리는 간편한 html문서를 두고 dom을 이용하여 문서를 조작하는것일까? 그 이유는 html은 정적인 요소만을 마크업 할 수 있지만 우리의 웹페이지는 정적이지 않다. 사용자가 어떻게 페이지를 사용하느냐에 따라 화면의 변화가 일어나야 한다. 그렇기때문에 dom을 이용하여 사용자가 페이지를 조작할 때 화면을..
배열 내장함수 총 정리 앞서 자주쓰이는 배열함수들을 포스팅했다 이번 게시물은 복습겸 그 배열 내장함수을 모아서 간단하게 정리를 해보고자 한다. 각 내장함수에 대한 예시코드들은 따로 게시물을 작성해두었다 :) 1. forEach - 반복적인 기능을 수행하여 for문과 유사한 함수로, 배열 안에서 주어진 요소들을 하나씩 호출한다. 2. map - 배열 안에 있는 원소들을 주어진 조건에 맞추어 변환 후, 새로운 배열로 만들어낸다. 3. indexOf - 배열 안에서 특정 문자열의 위치를 확인하여 그 index번호를 반환한다. 문자열이 여러번 등장하는 경우 첫번째 요소의 index를 반환한다. 4. findIndex - 배열 안의 객체, 혹은 특정 조건에 맞는 값을 찾아서 그 index를 반환한다. 5. find - findIndex..
배열내장함수 - reduce reduce함수는 잘 사용할 수 있으면 정말 유용한 함수(라고한)다..ㅋㅋ 이 함수는 배열이 주어졌을때 배열 안에 있는 모든 값들을 사용하여 어떠한 값을 연산해야 할 때 사용된다 이해를 돕기 위해서 배열이 주어졌을때 배열의 내부 값들을 모두 더해야 된다고 가정해보자 여러가지 방법이 있겠지만 나는 forEach문으로 예시를 들어보고자 한다 const numbers = [1,2,3,4,5,6,7,8]; let sum = 0; numbers.forEach(n => { sum += n; }) console.log(sum); //36 위의 식을 사용해서 numbers의 합을 구할수도 있지만 reduce를 사용한다면 좀더 간결하게 식을 짤수가 있다. 일단 reduce함수의 사용 방법은 다음과 같다 배열.reduce..
배열내장함수 - concat / join 1.concat -인자로 주어진 요소를 기존 배열값에 합쳐서 새로운 배열을 반환하는 함수 (기존의 배열을 건드리지 않음) const fruit = ['사과','바나나','수박'] const bread = ['피자빵','케이크'] const foods = fruit.concat(bread); console.log(foods); //["사과", "바나나", "수박", "피자빵", "케이크"] console.log(fruit); //["사과", "바나나", "수박"] 2. join -배열의 모든 요소를 연결해 하나의 문자로 만듬, 기본값은 ,이며 요소 사이사이 원하는 요소를 넣어 커스텀하고싶다면 ('' )내부에 원하는 글자를 넣어주면 된다 const fruit = ['사과','바나나','수박'] console..
배열 내장함수 - shift / pop / unshift / push 1. shift -배열 안에서 첫번째 원소를 추출하는 함수 ( 기존의 배열을 건드린다) const myHobby = ['넷플릭스','맛집탐방','노래듣기','코딩하기']; const first = myHobby.shift(); console.log(first); //넷플릭스 console.log(myHobby) //맛집탐방, 노래듣기, 코딩하기 2. pop -shift와 비슷하지만, 배열의 첫번째가 아니라 마지막 요소를 빼낸다 const myHobby = ['넷플릭스','맛집탐방','노래듣기','코딩하기']; const first = myHobby.pop(); console.log(first); //코딩하기 console.log(myHobby); //"넷플릭스", "맛집탐방", "노래듣기" 3. unsh..
배열 내장함수 - filter / splice / slice 1. filter -배열 안에서 특정 조건을 확인 한 후, 조건에 맞는 인자로 새로운 배열을 만드는 함수 예제) 아래 JS 배열의 내장함수 키워드를 객체로 포함하는 todos 배열을 확인 한 후 done값이 'clear'인 내장함수키워드를 새로운 배열로 만들어라 정답) const todos = [ { id: 'map', text: '자바스크립트 내장함수', done: 'clear', }, { id: 'indexOf', text: '자바스크립트 내장함수', done: 'clear', }, { id: 'filter', text: '자바스크립트 내장함수', done: 'doing', } ] const index = todos.filter(todo => todo.done === 'clear'); console...
배열 내장함수 - indexOf / findIndex / find 1. indexOf -배열 안에서 특정 문자열의 위치를 반환하는 함수, 여러번 나올 경우 첫번째 위치를 반환한다. 예제) avengers 배열 속에서 '토르'의 순서를 찾아라 (컴퓨터 언어에서 순서는 0부터 시작한다) 정답) const avengers = ['아이언맨', '캡틴아메리카', '토르', '닥터스트레인지', '토르']; const index = avengers.indexOf('토르'); console.log(index); //정답 : 2 2. findIndex - indexOf와 마찬가지로 배열 안에서 특정 문자열의 위치를 반환하지만, 단순한 문자가 아닌 객채 혹은 특정 조건의 맞는 값의 위치를 반환할 때 사용된다 예제) 객체로 이루어진 배열을 작성한 후, done값을 false로 가지고 있는..