Study/JavaScript
-
자바스크립트란?Study/JavaScript 2021. 8. 22. 22:32
자바스크립트란? 2-1. 자바스크립트의 탄생 1995년, 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하며 탄생한 것이 Brendan Eich가 개발한 자바스크립트이다. 2-2. 자바스크립트의 표준화 1996년, 넷스케이프 커뮤니케이션즈는 컴퓨터 시스템의 표준을 관리하는 비영리 표준화 기구인 ECMA 인터내셔널에 자바스크립트의 표준화를 요청한다. 1997년, 표준화된 자바스크립트 초판 사양이 완성되었고 자바스크립트는 ECMAScript로 명명된다. 2015년, ECMAScript 6 (ES6)는 let/const 키워드, 화살표 함수, 클래스, 모듈 등과 같은 범용 프로그래밍 언어로서 갖춰야 할 기능들을 대거 도입하는 큰 변화가 있었다. 2-3. 자바스크립트 성장의 역사 2-3-1. Ajax 1999..
-
[Data Structure] SetStudy/JavaScript 2020. 7. 13. 14:44
Set set은 array나 list 처럼 순열 자료구조 (collection)이다. 하지만 set은 '순서'라는 개념이 존재하지 않다. set의 특징은 다음과 같다. 데이터를 비순차적(unordered)로 저장할 수 있는 순열 자료구조(collection) 삽입 순서대로 저장되지 않는다. 즉, 특정한 순서를 기대할 수 없는 자료구조 수정 가능함.(mutable) 동일한 값을 여러번 삽입 불가능. 동일한 값이 여러번 삽입되면 하나의 값만 저장된다. Fast Lookup이 필요할 때 주로 쓰인다. set의 구조 Array와 달리 set은 요소들을 순차적으로 저장하지 않습니다. Set에서 요소들이 저장될 때 순서는 다음과 같습니다. 저장할 요소의 값의 hash 값을 구한다. 해쉬값에 해당하는 공간(bucke..
-
splice 와 split :: 활용예제Study/JavaScript 2020. 7. 12. 17:07
splice 자바스크립트의 배열(Array) 객체에서 제공되는 함수인 splice를 이용하면 원하는 위치에 요소를 추가하거나 삭제할 수 있다. 즉, splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다. 먼저 splice 함수를 사용해 원하는 위치에 요소를 추가하는 것을 정리해보자. 예를 들어, 먼저 a라는 배열 객체가 다음과 같은 상태라고 해보자. a.splice(2, 0, "7"); 우리는 a 라는 배열의 '2'인덱스를 가진 위치에 0개를 삭제하고 7을 대입했다. 그럼 다시 a의 처음 상태로 돌아가 다음 코드를 실행하면 다음의 상태가 된다. a.splice(0, 0, "7"); 우리는 a라는 변수명을 가진 배열의 0번째 인덱스에 0개의 요소를 삭..
-
Object 프로퍼티 접근, 할당, 중첩Study/JavaScript 2020. 6. 25. 16:27
프로퍼티 접근 let difficult = { 33: '숫자 형식도 되네', 'my name': '스페이스 포함 가능', color: 'silver', 키: '한글인 키는 따옴표가 없어도 되는군!!', '!키': '느낌표 있는 키는 따옴표가 필요하군', $special: '$는 없어도 되는군' }; console.log(difficult.color); 1. dot(.)으로 접근하는 방법 - 따옴표 없이 키를 바로 써 주어야 함. console.log(difficult['color']); 2. [] 대괄호로 접근하는 방법 - 키 이름을 따옴표로 감싸서 작성해주어야함. console.log(difficult.my name); console.log(difficult.33); 이렇게 스페이스가 포함된 키, 숫자..
-
클래스 생성자와 메소드Study/JavaScript 2020. 6. 25. 13:27
자바스크립트의 class에 관해서는 이전 피드에서 다루어 생략합니다.:) https://dream-frontend.tistory.com/334 클래스와 기본 문법 클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다. -위키백과 실무에선 dream-frontend.tistory.com 생성자 (Constructor) 객체(Object)의 설계도인 클래스(class)는 문법이 비슷하다. 둘의 가장 큰 차이는 constructor라는 생성자 함수이다. 아래의 class를 살펴보자. class Car { constructor(name, price) { this.name = name; this.pri..
-
function 함수의 형태와 구성Study/JavaScript 2020. 6. 25. 10:37
함수를 왜 사용하는가? 스크립트를 작성하다보면 유사한 동작을 하는 코드가 여러 곳에서 필요할 때가 많다. 사용자가 로그인이나 로그아웃을 했을 때 메시지를 보여주는 동작 같은 경우 말이다. 함수는 프로그램을 구성하는 주요 '구성요소(building block)'이다. 다시말하면, 하나의 특정한 작업을 수행하도록 설계된 독립적인 블록이다. 함수를 이용하면 중복없이 유사한 동작을 하는 코드를 여러번 호출 할 수 있다. 혹시, alert(message)를 사용해본 적이 있는가? 이것은 명령만 내려도 alert기능을 사용할 수 있는 내장함수이다. 이번에는 함수를 직접 만드는 방법에 대해 알아보자:) 함수의 기본 형태 function checkCorrect () { let hi = "안녕하세요"; return hi..
-
날짜와 시간Study/JavaScript 2020. 6. 24. 17:37
new Date() 날짜 객체 우리는 new Date() 날짜 객체를 이용해서 현재 날짜와 시간을 받아올 수 있다. 자세히 하나하나 뜯어보면 아래와 같다. let rightNow = new Date(); let year = rightNow.getFullYear(); let month = rightNow.getMonth()+1; // getMonth 함수로 값을 받을 때, 현재 달보다 1 작은 값이 반환되므로 주의 let date = rightNow.getDate(); let day = rightNow.getDay(); let currentHour = rightNow.getHours(); let currentMin = rightNow.getMinutes(); console.log(rightNow); // ..
-
string, Number 변환Study/JavaScript 2020. 6. 24. 16:22
JS 언어의 특징 중 하나가 데이터 타입을 신경쓰지 않는다는 것이다. 이것은 양날의 검이라고 할 수 있다. let a = '900'; let b = 350; let c = Math.random(); let d = '5' + 5; console.log(typeof a); // string console.log(typeof b); // number console.log(typeof c);; // number console.log(typeof a); //string 위와 같은 코드에서 우리는 당황할 것이다 string인 '5'와 숫자인 5가 서로 더해질 수 있따고??? 😵 자바스크립트에서는 가능하다. 자바스크립트는 스스로 타입을 변동시켜 연산을 하기 때문이다. 심지어 아래의 상황은 프로그램을 잘 못 짜면 날 ..