본문 바로가기

Language/JavaScript

 (47)
<자바스크립트> 프로토타입 1. 프로토타입 상속 - 개발에서 기존의 객체가 가지고 있는 기능을 확장해서 비슷한 객체를 만들어야 하는 일이 흔하다. 이 때 사용할 수 있는 것이 프로토타입 상속이다. * [[Prototype]] - 자바스크립트 객체는 [[Prototype]] 이라는 숨김 프로퍼티를 갖는다. 이는 null 또는 다른 객체에 대한 참조가 되며, 다른 객체를 참조할 경우 그 대상을 프로토타입이라 부른다. - 객체에서 프로퍼티를 읽으려고 할 때, 해당 프로퍼티가 없으면 자동으로 프로토타입에서 그 프로퍼티를 찾는데, 이를 '프로토타입 상속'이라 부른다. - __proto__를 통해 값을 설정할 수 있다. __proto__는 [[Prototype]] 그 자체는 아니며, [[Prototype]]의 getter이자 setter이다..
<자바스크립트> JSON과 메서드 1. JSON - 복잡한 객체를 다룰 때, 객체를 보내거나 출력하는 상황에서 객체는 문자열로 전환되어야 한다. 이러한 상황을 유연하게 대처하기위해 JSON이 등장했다. - JSON(JavaScript Object Notation)은 값이나 객체를 나타내주는 범용 포맷이다. - 현재에는 라이브러리를 이용하여 다른 언어에서도 사용하게 되어 JSON을 데이터 교환 목적으로 많이 사용한다. - 대표적인 메서드로 .stringfy(객체를 JSON으로 변경)와 .JSON.parse(JSON을 객체로 변경)이 있다. 2. JSON.stringfy * stringfy - stringfy메서드는 말 그대로 객체를 문자열인 JSON으로 변경하는 메서드이다. let student = { name: 'Harry', age: ..
<자바스크립트> 구조 분해 할당 * 배열 분해 - 개발을 하다보면 객체나 배열의 원소들을 변수로 받아야 할 상황이 있다. 이 때 유용하게 쓰이는 것이 구조 분해 할당이다. - 배열의 원소가 변수로 각각 할당되는 예시를 보자. let arr = ["Harry", "Yoon"] let [firstName, lastName] = arr; console.log(firstName) // Harry console.log(lastName) // Yoon - 배열의 원소가 각각 firstName과 lastName에 순서대로 할당되었음을 알 수 있다. - 이렇게 하면 배열의 요소를 인덱스로 이용해서 하나하나 할당하는 것보다 훨씬 효율적이다. - 위의 경우 배열 대신 "Harry Yoon".split(' ') 을 넣더라도 동일하게 동작할 것이다. - 배..
<자바스크립트> 맵과 셋 1. 맵 * 기본 메서드 - 맵은 키가 있는 컬랙션을 저장한 '객체'나 순서가 있는 컬랙션을 저장한 '배열'과 다른 좀 더 현실적인 자료구조이다. - 맵에서의 기본적인 메서드와 프로퍼티는 다음과 같다. - new Map() : 맵을 만든다. - map.set(key, value) : key를 이용하여 value를 저장한다. - map.get(key) : key에 해당하는 value를 반환한다. - map.has(key) : key가 존재하는지 불리언 값을 반환한다. - map.delete(key) : key에 있는 값을 삭제한다. - map.clear() : 맵 내의 요소들을 모두 삭제한다. - map.size : 요소의 갯수를 반환한다. - 코드로써 맵을 좀 더 알아보자. let map = new Ma..
<자바스크립트> 배열 (2) 반복, 탐색, 정렬 메서드 4. 반복 메서드 * forEach - forEach는 배열 요소 각각에 원하는 함수를 실행하도록 한다. - arr.forEach(function(itme, index, array) { } ); 와 같이 사용한다. let arr = ["HARRY", "IU", "SUZY"]; arr.forEach(alert); // 원소 각각의 알럿창을 보여줍니다. arr.forEach( (item, index, array) => { alert(`${item}은 ${index + 1} 번째에 있으며, ${array}에 속합니다.`); } ); // HARRY // IU // SUZY // HARRY은 1 번째에 있으며, HARRY,IU,SUZY에 속합니다. // IU은 2 번째에 있으며, HARRY,IU,SUZY에 속합..
<자바스크립트> 배열 (1) 데큐, 추가, 삭제 메서드 - 이번 장에서는 배열에서 사용하는 다양한 메서드들을 알아보자. 1. 데큐 메서드 * 데큐 메서드 - 자바스크립트는 데큐 자료구조형의 메서드를 기본적으로 제공한다. - arr.push(...items) - 마지막 요소 추가 - arr.pop() - 마지막 요소 제거 - arr.shift() - 처음 요소 제거 - arr.unshift(...items) = 처음 요소 추가 2. 제거 메서드 * delete - 먼저 객체의 프로퍼티를 지우는 연산자 delete를 사용해보자. let arr = ["HARRY", "IU", "SUZY"] delete arr[1]; console.log(arr); // ["HARRY", empty, "SUZY"] - delete는 원하는 요소를 지울 수 있다. 그러나 key를 이..
<자바스크립트> 숫자형 자료 이번 장에서는 자바스크립트에서 다루는 일반적인 숫자형 자료에 대해서 공부해보자. * toString - toString 메서드는 숫자를 원하는 진법으로 변환한다. let num = 21; console.log(num.toString(16)); // 15 console.log(num.toString(2)); // 10101 console.log(21..toString(36)); // 1 - 위는 21이라는 숫자를 각 16진법과 2진법으로 나타낸 것이다. - 숫자에 직접 toString을 사용하려면 소수부로 인식되지않도록 두 개의 점을 사용해야한다. * 수학 함수 - 자바스크립트 내장 객체인 Math에는 유용한 수학관련 함수들이 많다. 그 중 먼저 어림수를 구하는 함수들을 알아보자. - Math.floor ..
<자바스크립트> ? 연산자와 ?? 연산자 * 조건부 연산자 '?' - 조건에 따라 다른 값을 변수에 할당해줄 때, if문 대신 조건부 연산자 '?'를 사용할 수 있다. let sojuAllowed; let age = prompt('나이는? : '); if (age > 18) { sojuAllowed = true; } else { sojuAllowed = false; } - 나이가 19세 이상이어야 소주를 허용하는 코드를 작성했다. 위를 조건부 연산자를 사용하여 표현하면 다음과 같다. let sojuAllowed = (age > 18) ? true : false; - 코드가 매우 간결해 졌음을 알 수 있다. 물음표 연산자의 사용법은 다음과 같다. 변수 = 조건 ? 값1 : 값2; - 사실 위는 비교 연산자 자체가 true와 false를 반환하므로..
<자바스크립트> 화살표 함수와 콜백 함수 * 함수 표현식 - 함수를 표현하는 방식에 대해서는 이미 예전에 다뤘다. 다시 살펴보자면 다음과 같다. function showHi() { alert("Hello"); } - 위는 함수 선언문 방식이다. let showHi = function() { alert("Hello"); }; - 위는 함수 표현식 방법이다. 변수에 함수를 할당하는 것처럼 사용하였다. - 함수 선언문 방식은 if {...}, for {...} 과 같이 중괄호로 만든 방식이므로 ;(세미콜론)이 없더라도 구문의 끝임이 내장되어 있다. 이와 달리 함수 표현식 방식은 변수를 사용했으므로 구문의 끝을 나타내야한다. 따라서 ; 를 사용하였다. - 함수 선언문과 함수 표현식의 가장 큰 차이는 호출이다. 선언문은 어디에 작성하더라도, 심지어 호출..
<자바스크립트 기초> 18. 스크롤 이벤트 (2) * 지속적인 스크롤 이벤트 - 스크롤이 움직일 때마다 캐릭터가 움직이고 스크롤이 멈추면 캐릭터도 멈추는 이벤트를 만든다고 가정하자. - 이 때 스크롤 때마다 빈번히 일어나는 작업은 자칫하면 메모리를 엄청나게 잡아먹을 수 있다. 즉 스크롤이 움직일때마다 if문이 실행되고 멈추면 다른 if문이 실행되고, 계속 스크롤의 움직임을 확인한다든지 여러 경우가 있다. - 우리는 효율적인 작업을 위해 Timeout을 사용할 것이다. - 상태를 나타내기위해 scrollState라는 변수에 미리 false값을 담아두었다. 멈춘 것을 false로 표현하기 위함이다. - 캐릭터가 움직이는 것은 'moving'이라는 클래스를 추가하여 실행할 것이고, 스크롤이 멈추면 'moving'클래스를 제거하여 캐릭터를 멈출 것이다. Cha..

티스토리툴바