본문 바로가기

자바 스크립트26

자바스크립트 나머지 매개변수와 전개 문법 상당수의 자바스크립트 내장 함수는 인수의 개수에 제약을 두지 않는다 예) - Math.max(arg1,arg2,...,argN) - 인수 중 가장 큰수를 반환한다. - Object.assign(dest, src1 ..., srcN) - src1..N의 프로퍼티를 dest로 복사한다. 나머지 매개변수 ... 함수 정의 방법과 상관없이 함수에 넘겨주는 인수의 개수에는 제약이 없다. function sum(a, b) { return a + b; } alert( sum(1, 2, 3, 4, 5) ); 함수를 정의할 떄 인수를 두 개만 받도록하고 실제 함수를 호출할때는 이보다 더 많은 여분의 인수를 전달했지만 에러가 발생하지 않았다. 다만 반환값은 처음 두개의 인수만을 사용해 계산된다. 여분의 매개변수는 그 값들.. 2020. 12. 16.
JSON과 메서드 네트워크를 통해 객체를 어딘가에 보내거나 로깅 목적으로 객체를 출력해야 한다면 객체를 문자열로 전환해야 한다. let user = { name: "John", age: 30, toString() { return `{name: "${this.name}", age: ${this.age}}`; } }; alert(user); // {name: "John", age: 30} 개발 과정에서 프로퍼티가 추가되거나 삭제, 수정되면 toString을 매번 수정해야하기 때문에 문제가 생긴다. 자바스크립트에는 이런 문제를 해결할 수 있는 방법이 있다. JSON.stringfy JSON(JavaScript Object Notation)은 값이나 객체를 나타내주는 범용 포맷으로,RFC 4627 표준에 정의되어 있다. 자바스크.. 2020. 12. 14.
자바스크립트 iterable iterable 객체는 배열을 일반화한 객체이다 이터러블 이라는 개념을 사용하면 어떤 객체에든 for ... of qksqhransdmf wjrdydgkf tn dlTek. Symbol.iterator let range = { from: 1, to: 5 }; // 아래와 같이 for..of가 동작할 수 있도록 하는 게 목표입니다. // for(let num of range) ... num=1,2,3,4,5 range를 이터러블로 만드려면(for..of)가 동작하도록) 객체에 Symbol.iterator(특수 내장 심볼) 이라는 메서드를 추가해야한다. 1. for...of 가 시작되자마다 for...of는 Symbol.iterator를 호출(Symbol.iterator가 없으면 에러가 발생) Symbol... 2020. 12. 14.
자바스크립트 배열 배열 - 순서가 있는 컬렉션을 저장할 때 쓰는 자료구조 배열 선언 let arr = new Array(); let arr = []; 각 배열 요소에는 0부터 시작하는 숫자(인덱스) 가 매겨져 있다. 이 숫자는 순서를 나타낸다. 배열 내 특정요소를 얻고싶다면 대괄호 안에 순서를 나타내는 순자인 인덱스를 넣어주면 된다. let fruits = ["사과", "오렌지", "자두"]; alert( fruits[0] ); // 사과 alert( fruits[1] ); // 오렌지 alert( fruits[2] ); // 자두 # 자바스크립트의 배열은 Java의 배열과 다르게 크기를 미리 정하지 않는다(배열의 크기는 동적으로 변경이 가능하다. 배열 내부의 데이터 타입이 서로 다를 수 있다.(자료형의 제약이 없다. /.. 2020. 12. 13.
자바스크립트 문자열 자바스크립트에서 문자열은 페이지 인코딩 방식과 상관없이 항상 UTF-16 형식을 따른다. 따옴표 따옴표의 종류가 무엇이 있었는지 상기해보자 문자열은 작은 따옴표나 큰따옴표,백틱으로 감쌀 수 있다. let single = '작은따옴표'; let double = "큰따옴표"; let backticks = `백틱`; 작은따옴표와 큰 따옴표는 기능상 차이가 없다. 하지만 백틱엔 특별한 기능이 있다. 표현식을 ${...}으로 감싸고 이를 백틱으로 감싼 문자열 중간에 넣으면 문자열 중간에 쉽게 삽입할 수 있다. -> 이러한 방식을 템플릿 리터럴 이라고 부른다. function sum(a, b) { return a + b; } alert(`1 + 2 = ${sum(1, 2)}.`); // 1 + 2 = 3. let .. 2020. 12. 12.
자바스크립트 숫자형 모던 자바스크립트는 숫자를 나타내는 두 가지 자료형을 지원한다. 1. 일반적인 숫자는 '배정밀도 부동소수점 숫자'로 알려진 64비트 형식의 IEEE-754에 저장된다. 2. 임의이 길이를 가정 정수는 Bigint 숫자로 나타낼 수 있다. 일반적인 숫자는 2의53승 이상이거나 -2의 53승 이하일 수 없다는 제약 때문에 BigInt라는 새로운 자료형이 만들어 졌다. BigInt는 아주 특별한 경우에만 사용된다. 숫자를 입력하는 다양한 방법 일반적인 숫자는 253이상이거나 -253이하일 수 없다는 제약 때문에 BigInt라는 새로운 자료형이 만들어졌다. 10억을 입력한다고 가정했을때 가장 분명한 방법은 10억 을 써주는 것 이다. let billion = 1000000000; 하지만 0을 많이 사용해 숫자를.. 2020. 12. 11.
자바스크립트 원시값의 메서드 자바스크립트는 원시값(문자열,숫자)를 마치 객체처럼 다룰 수 있게 해준다. 원시값에도 객체에서처럼 메서드를 호출할 수 있다. 원시값은 객체가 아님 원시값과 객체는 다음과 같은 차이점이 있다. - 원시형 값이다. - 원시형의 종류는 문자(String),숫자(number),bigint,불린(boolean),심볼(symbol),null,undefined형으로 총 일곱가지 객체 - 프로퍼티에 다양한 종류의 값을 저장한 수 이싿. - {name : "John", age : 30}와 같이 대괄호 {}를 사용해 만들 수 있다. 자바스크립트에는 여러 종류의 객체가 있는데 함수도 객체의 일종이다. 객체의 장점중 하나는 함수를 프로퍼티로 저장할 수 있다는 것. let john = { name: "John", sayHi: .. 2020. 12. 8.
자바 스크립트 심볼형 자바 스크립트는 객체 프로퍼티 키로 오직 문자형과 심볼형만을 허용한다. 숫자형,불린형 모두 불가능하고 오직 문자형과 심볼형만 가능하다. 심볼 '심볼(symbol)'은 유일한 식별자를 만들고 싶을 때 사용한다. Symbol()을 사용하면 심볼값을 만들 수 있다. // id는 새로운 심볼이 됩니다. let id = Symbol(); 심볼을 만들 때 심볼 이름이라 불리는 설명을 붙일 수도 있다. 심볼 이름은 디버깅 시 아주 유용하다. // 심볼 id에는 "id"라는 설명이 붙습니다. let id = Symbol("id"); 심볼은 유일성이 보장되는 자료형이기 때문에 설명이 동일한 심볼을 여러 개 만들어도 각 심볼값은 다르다. 심볼에 붙이는 설명(심볼 이름)은 어떤 것에도 영향을 주지 않는 이름표 역할만을 한다.. 2020. 12. 8.
자바스크립트 옵셔널 체이닝 '?.' 옵셔널 체이닝(optional chaining) ?. 을사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다. 옵셔널 체이닝 이 필요한 이유 사용자가 여러명 있는데 그중 몇 명은 주소 정보를 가지고 있지 않다고 가정 이때 user.address.street 를 사용해 주소 정보에 접근하면 에러가 발생할 수 있다. let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined 또 브라우저에서 동작하는 코드를 개발할 때 발생할 수 있는 문제로 페이지에 존재하지 않는 요소에 접근해 요소의 정보를 가져오려 할 때 발생한다. // querySelec.. 2020. 12. 8.

티스토리툴바