본문 바로가기
반응형

Javascript/Javascript중급

날짜 표시와 변환 2 2020. 5. 23. 자바스크립트에서 날짜는 날짜 객체를 생성해서 얻습니다.생성한 날짜 객체의 메서드를 이용해 현재 시간에 대한 다양한 타입의 정보를 얻을 수 있습니다. 날짜 객체를 생성할 때 파라메터로 날짜 정보를 넘기면 파라메터로 넘긴 날짜 정보값으로 객체가 생성됩니다.날짜 객체는 1970년 1월 1일 UTC(국제표준시) 00:00 부터 경과한 시간을 밀리세컨드로 나타내는 유닉스 타임스템프를 사용합니다.날짜 객체에 들어있는 실제 값은 정수값이며, 메서드를 이용해 다양하게 변형된 날짜 포맷을 얻게됩니다. 파라메터 없이 객체를 생성하면 현재 시각을 가져옵니다. 날짜 객체 생성은 let today = new Date(); let date1 = new Date('2020-05-21T09:27:15');let date2 = new..
배열의 기초 0 2020. 5. 22. 자바스크립트는 내장 배열 타입을 지원합니다.배열 관련 메서드와 속성이 방대하기 때문에 자바스크립트를 잘 쓰려면 기본적인 속성과 메서드 정도는 알고 있어야 합니다. 배열의 생성 let arr = []; 배열은 꺽쇠 괄호 2개로 빈 배열을 정의합니다.리터럴 대입으로 arr 변수는 배열이 되며, 배열 속성과 메서드를 사용할 수 있게 됩니다. console.log(arr.length); 로 길이를 확인하면 길이가 0 이라고 표시가 되면서 배열임을 알 수 있습니다. 자바스크립트의 배열은 다른 언어의 배열과 달리 배열 안에 다양한 타입의 데이터를 넣을 수 있는 차이가 있습니다. 예를 들어 let arr = [3, '프로도', [2,3,4,'5'], {name: '라이언'}]; 과 같이 숫자, 문자열, 배열, 객체를..
2차원 배열과 다차원 배열 그리고 중첩 배열 0 2020. 5. 22. 자바스크립트는 내장된 데이터 타입으로 다차원 배열을 제공하지 않습니다. 모든 배열은 1차원 배열입니다. 자바스크립트에서는 모든 것이 객체이기 때문에, 배열의 각 요소를 다시 배열로 정의해 중첩하는 식으로 다차원 배열을 구현하게 됩니다. 배열 안에 다시 배열이 들어있는 경우 중첩 배열이 되고, 2차원 배열은 배열 안에 배열이 1번만 더 나오는 경우가 됩니다. 배열 안의 배열 요소에 대한 접근은 Array[1][2]; 와 같이 사용합니다.최외곽 배열부터 안쪽 배열로 단계를 내려가면서 인덱스 위치를 찾게 됩니다.자바스크립트에서 3차원 이상의 배열은 거의 사용하지 않습니다.중첩 배열 형태이기 때문에, 다차원이 되면 배열 탐색 속도가 느려지기도 하고, 언어적인 특성상 배열 요소 자체가 객체이기 때문에 대량의 데이..
배열의 누적 합을 구하기 0 2020. 5. 21. forEach() 같은 배열 순환 메서드를 이용해 콜백 함수를 작성하면 배열 요소의 합계를 구할 수 있지만자바스크립트에는 배열의 누적 합계를 간편하게 구할 수 있도록 내장 메서드인 reduce() 를 제공합니다. 콜백 함수를 이용해 원하는 계산식, 또는 원하는 처리 로직을 추가로 적용할 수 있기 때문에 다양한 누적 합(또는 다른 누적 결과)을 얻을 수 있습니다. 누적합 구하기 누적 합을 구하는 메서드는 reduce()를 사용합니다.콜백합수에는 누적을 위한 여러개의 인자를 필요로 하므로 사용법을 잘 알고 사용해야 합니다.숫자 배열인 경우에는 배열 요소의 전체 합을 구하는 용도로 사용할 수 있고, 문자열인 경우에는 배열 요소의 문자열을 하나로 붙이는(join()과 같은) 용도로 사용할 수도 있습니다. Arr..
배열의 조건 체크와 조건을 만족하는 요소만 얻기 0 2020. 5. 21. 배열에서 원하는 조건에 맞는 배열 요소만을 추출해서 가져오는 방법은 여러가지가 있습니다. forEach(), map() 메서드를 이용해 콜백함수 안에서 조건 체크를 해서 배열을 생성, 또는 반환할 수 있습니다. 자바스크립트에는 조건문을 콜백함수로 작성해 원하는 요소들만 배열로 반환받을 수 있는 some() 메서드가 아얘 제공됩니다.이 메서드를 사용하면 map() 메서드를 사용해 조건절 체크 및 조건에 맞는 요소를 반환하는 코딩을 생략할 수 있습니다. 콜백 함수는 익명함수(function(){})로 작성해도 되지만, 코드의 간결함과 가독성을 위해 화살표 함수를 사용하는 것을 권장합니다. 익명함수의 조건식은 반드시 true/false 조건을 만족하는 조건식이어야 합니다. 조건을 만족하는 첫전째 요소를 얻기 ..
null, 빈 배열 그리고 배열의 길이 0 2020. 5. 21. null과 빈배열 자바스크립트에서 null, 또는 널이라는 것은 값이 지정되어 초기화되지 않은 객체를 말합니다. 정확히는 널객체라고 해야 합니다. 아래와 같이 null을 대입해 초기화를 합니다. var data = null;console.log(typeof(data)); 그와 달리 빈배열은 배열 오브젝트로 초기화 되어 있으며, 배열 메서드를 사용할 수 있고, 길이 값이 0인 배열 객체를 말합니다. 빈 배열과 널은 완전히 다르며, 코딩 습관에 따라 다르겠지만, 배열을 사용하기 위해 변수를 생성할 경우 반드시 빈 배열로 초기화를 하는 것을 추천합니다. 빈 배열의 초기화는 var data2 = [];console.log(typeof(data2)); 와 같이 배열 리터럴로 간단하게 표시를 하는 것으로 완료됩니다..
JSON 데이터를 배열로 만들기 0 2020. 5. 21. 서버 API를 이용해 RESTFul 서비스를 제공하는 방식의 개발이 일반화되면서 JSON(Javascript Object Notation)은 API를 통한 데이터 교환의 사실상 표준이 되었습니다.자바스크립트는 JSON 데이터 요소에 객체 참조 방식으로 접근이 가능하기 때문에 데이터를 UI에 적용하는데 직관적인 환경을 제공합니다.UI에 JSON 데이터를 가져와 적용할 때는 편리하지만, 데이터를 재가공하거나, 계산 결과를 얻어야 하는 경우 번거롭기 때문에 필요한 부분은 별도로 배열로 변형해 사용해야 할 필요가 있습니다. 값만 배열로 추출 JSON 데이터가 "이름:값"의 가장 단순한 형태인 경우, 값만 배열로 추출할 수 있습니다. json1 = {value1:13, value2:10, value3:5, val..
문자열을 배열로 만들기 0 2020. 5. 20. 문자열과 배열은 자바스크립트에서 밀접한 관련을 가지고 있습니다.웹에서 입력 받는 모든 입력 값들은 기본적으로 문자열이기 때문에 문자열 입력을 배열 데이터로 변경해 여러가지 처리를 편리하게 할 수 있기 때문에 문자열 데이터는 많은 경우에 내부적으로 배열로 변경해 처리하게 됩니다. 자바스크립트에서는 split() 메서드가 이 역할을 담당하며, 강력한 기능을 제공합니다.split() 메서드를 활용해 배열을 제어하는 다양한 방법들을 알아봅니다. 문자열을 배열로 만들때는 문자열 안의 내용이 무엇인가가 중요합니다.문자열의 문자 1개씩을 단순히 배열로 변환해서 반환받을 건지, 별도의 구분자로 문자열을 나누어서 반환받을 건지를 정해야 합니다. 문자열을 문자 배열로 만들기 배열 메서드 from() 을 사용합니다.문자열 ..
배열 요소의 추가 0 2020. 5. 20. 배열에 요소를 삽입하는 방법은 배열 앞과 뒤에 배열 요소를 추가하는 방법과, 배열 사이에 배열 요소를 추가하는 방법으로 나누어집니다.배열의 추가, 삭제 시 가장 빠른 방법은 배열의 맨 앞에나 뒤에서 추가, 삭제를 하는 방법입니다.배열 중간에 요소를 추가, 삭제하는 경우 내부적으로 추가 처리가 필요해지기 때문에 배열 맨 앞에 요소를 추가하기 shift(), unshift() 메서드는 쌍을 이뤄 배열의 맨 앞에 요소를 추가(unshift), 삭제(shift) 하는 메서드입니다.먼저 추가한 요소가 높은 인덱스를 가집니다. Array.unshift(요소); 와 같이 사용합니다. const arr1 = []; arr1.unshift('라이언');arr1.unshift('어피치');arr1.unshift('콘');..
배열의 순환(forEach, map) 0 2020. 5. 20. 배열의 많은 메서드들은 원시타입에 적합하도록 설계 되어 있습니다.객체가 요소인 배열에는 이런 메서드를 사용할 수 없기 때문에 배열 전체를 순환해서 원하는 값을 찾거나, 추출해야 합니다. 원시 타입에도 사용할 수 있지만, 순환 메서드인 forEach(), map() 을 활용하면 객체 배열을 원시 배열처럼 사용할 수 있습니다. 배열을 순환해 요소를 탐색하기(forEach()) 배열 요소들을 탐색해 콜백 함수로 배열 요소를 처리합니다.필요할 경우 부분 배열을 만들 수 있습니다. 객체 배열에서 age가 19 이상인 배열 요소에는 adult 값을 true로 아니면 false 로 추가합니다. const arr1 = [{name: '라이언', age:5}, {name: '어피치', age:4}, {name:'콘', ..
배열 정렬하기 0 2020. 5. 19. 배열 요소값이 순차적으로 되어있지 않은 경우 비교함수를 인자로 넣어 오름차순, 또는 내림차순으로 정렬할 수 있습니다.배열의 정렬은 배열 자체를 정렬하며, 별도의 반환 값은 없습니다. 사용방법은 아래와 같습니다. Array.sort(function(a,b){return 비교값;}); 비교값에 따른 정렬 기준은 다음과 같습니다. 반환하는 비교 결과값은 반드시 정수여야 하며, 양수, 음수에 따라 정렬 여부가 결정됩니다. 비교결과 값 정렬 방법 비교값 > 0 a가 b보다 앞(작은인덱스)에 위치합니다. 비교값 = 0 a와 b의 위치를 변경하지 않음 비교값 < 0 b가 a보다 앞(작은인덱스)에 위치합니다. 비교값은 넘어온 인자 a, b 두 값을 비교하는 식이 됩니다.비교 기준에 따라 오름차순, 또는 내림차순 정렬이..
배열 검색하기 0 2020. 5. 19. 배열 요소에 인자와 일치하는 값이 있으면, 해당 위치의 인덱스를 얻을 수 있습니다.검색은 앞에서 부터 순차적으로 진행됩니다.되며, 검색해야할 범위를 알 경우, 검색 시작 위치를 지정하거나, 끝에서 부터 역순으로 검색할 수도 있습니다. Array.indexOf(검색값, 시작인덱스);Array.lastIndexOf(검색값, 시작인덱스); 검색값 위치를 얻기 const arr1 = ['펭수', '라이언', '어피치', '콘', '브라운', '무지'];const index = arr1.indexOf('라이언'); // 1 리턴됨 console.log(index);console.log(arr1.indexOf('라이언', index+1)); // 위치 2부터 검색하므로 -1 리턴됨console.log(arr1.la..
반응형
닫기

티스토리툴바