kiki-dev

자바스크립트 숫자형

숫자를 입력하는 다양한 방법 1e3 = 1 * 1000 1.23e6 = 1.23 * 1000000 'e'는 e왼쪽의 수에 e 오른쪽에 있는 수만큼의 10의 거듭제곱을 곱하는 효과가 있다. let ms = 1e-6; // 1에서 왼쪽으로 6번 소수점 이동 // 10을 세 번 거듭제곱한 수로 나눔 1e-3 = 1 / 1000 (=0.001) // 10을 여섯 번 거듭제곱한 수로 나눔 1.23e-6 = 1.23 / 1000000 (=0.00000123) 'e' 우측에 음수가 있으면, 이 음수의 절댓값만큼 10을 거듭제곱한 수로 나누는 것을 의미한다. toString(base) let num = 255; alert( num.toString(16) ); // ff alert( num.toString(2) ); /..

자바스크립트 원시값의 메서드

원시값의 메소드 자바스크립트는 원시값(문자열,숫자 등)을 마치 객체처럼 다룰 수 있게 해 준다. 객체에서처럼 메서드를 호출할 수 있는데 그렇다고 원시값이 객체는 아니란 것을 상기하도록 하자! 원시값과 객체의 차이점 원시값 원시형의 종류는 문자(string), 숫자(number), bigint, 불린(boolean), 심볼(symbol), null, undefined형으로 총 일곱 가지 이다. 객체 프로퍼티에 다양한 종류의 값을 저장할 수 있다. {} 중괄호를 사용해 만들 수 있으며, 자바스크립트에는 여러 종류의 객체가 있는데 함수도 객체의 일종이다. 객체의 장점 중 하나는 함수를 프로퍼티로 저장할 수 있다는 것이다. 원시 래퍼 객체 원시값에 메서드를 호출하려 하면 임시 객체(원시 래퍼 객체)가 만들어진다..

자바스크립트 객체를 원시형으로 변환하기

hint 객체 형 변환은 세 종류로 구분되는데, 'hint'라 불리는 값이 구분 기준이 된다. hint는 목표로 하는 자료형 정도로 이해하면 된다. // 객체를 출력하려고 함 alert(obj); // 객체를 프로퍼티 키로 사용하고 있음 anotherObj[obj] = 123; alert 함수같이 문자열을 기대하는 연산을 수행할 때는(객체-문자형 변환),hint가 string이 된다. // 명시적 형 변환 let num = Number(obj); // (이항 덧셈 연산을 제외한) 수학 연산 let n = +obj; // 단항 덧셈 연산 let delta = date1 - date2; // 크고 작음 비교하기 let greater = user1 > user2; 수학 연산을 적용하려 할 때(객체-숫자형 변환..

자바스크립트 심볼형

심볼형 자바스크립트는 객체 프로퍼티 키로 오직 문자형과 심볼형만을 허용한다. (숫자형, 불린형 불가능) 심볼 '심볼(symbol)'은 유일한 식별자(unique identifier)를 만들고 싶을 때 사용한다. // id는 새로운 심볼이 됩니다. let id = Symbol(); Symbol() 을 사용하면 심볼값을 만들 수 있다. // 심볼 id에는 "id"라는 설명이 붙습니다. let id = Symbol("id"); 심볼을 만들 때 심볼 이름이라 불리는 설명을 붙일 수도 있다.(디버깅 시 유용) let id1 = Symbol("id"); let id2 = Symbol("id"); alert(id1 == id2); // false 심볼은 유일성이 보장되는 자료형이기 때문에, 설명이 동일한 심볼을 여러..

자바스크립트 옵셔널 체이닝

옵셔널 체이닝 최근에 추가된 문법으로 구식 브라우저는 폴리필이 필요하다. 옵셔널 체이닝(optional chaining) ?. 을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다. 옵셔널 체이닝이 필요한 이유 옵셔널 체이닝이 등장한 배경을 알아보자! 사용자가 여러 명이 있는데 그중 몇 명은 주소 정보를 가지고 있지 않다고 가정해보자 let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined 이럴 때 유저 주소 정보에 접근하면 에러가 발생할 수 있다. 또 다른 사례로는 브라우저에서 동작하는 코드를 개발할 때 발생할 수 있는 문제가 있..

자바스크립트 new 연산자와 생성자 함수

new 연산자와 생성자 함수 유사한 객체를 여러 개 만들어야 할 땐 new 연산자와 생성자 함수를 사용하면 쉽게 만들 수 있다. 생성자 함수의 관례 function User(name) { this.name = name; this.isAdmin = false; } let user = new User("보라"); alert(user.name); // 보라 alert(user.isAdmin); // false 함수 이름의 첫 글자는 대문자로 시작한다. 반드시 new 연산자를 붙여 실행한다. new User(...)의 알고리즘 function User(name) { // this = {}; (빈 객체가 암시적으로 만들어짐) // 새로운 프로퍼티를 this에 추가함 this.name = name; this.isA..

자바스크립트 메서드와 this

개체 객체는 사용자(user), 주문(order) 등과 같이 실제 존재하는 개체(entity)를 표현하고자 할 때 생성된다. let user = { name: "John", age: 30 }; 사용자는 현실에서 장바구니에서 물건 선택하기, 로그인하기 등의 행동을 하는데 이와 마찬가지로 사용자를 나타내는 객체user도 특정한 행동을 할 수 있다. 메서드 객체 프로퍼티에 저장된 함수를 '메소드'라고 부른다. let user = { name: "John", age: 30 }; user.sayHi = function() { alert("안녕하세요!"); }; user.sayHi(); // 안녕하세요! 함수 표현식으로 함수를 만들고, 객체 프로퍼티 user.sayhi에 함수를 할당 객체에 할당된 함수를 호출하면 ..

자바스크립트 가비지 컬렉션

가비지 컬렉션(Garbage Collection) 자바스크립트는 객체가 생성되었을 때 자동으로 메모리를 할당하고 더 이상 필요하지 않을 때 자동으로 해제한다. 가비지 컬렉션은 엔진이 자동으로 수행하므로 개발자는 이를 억지로 실행하거나 막을 수 없다. 가비지 컬렉션 기준 자바스크립트는 도달 가능성(reachability) 이라는 개념을 사용해 메모리 관리를 수행한다. '도달 가능한' 값은 쉽게 말해 어떻게든 접근하거나 사용할 수 있는 값을 의미한다. 도달 가능한 값은 메모리에서 삭제되지 않는다. 참조된다고 해서 도달 가능한 것은 아니고, 서로 연결된 객체들도 도달 불가능할 수 있다. 현재 함수의 지역 변수와 매개변수 중첩 함수의 체인에 있는 함수에서 사용되는 변수와 매개변수 전역 변수, 기타 등등 이런 값..

자바스크립트 참조에 의한 객체 복사

참조에 의한 객체 복사 객체와 원시 타입의 근본적인 차이 중 하나는 객체는 '참초에 의해(by reference)' 저장되고 복사된다는 것이다. 원시 값(문자열, 숫자, 불린 값)은 '값 그대로' 저장, 할당된다. let message = "Hello!"; let phrase = message; 두 개의 독립된 변수에 각각 문자열 "Hello!"가 저장된다. 객체의 동작 방식은 이와 다르다. 변수엔 객체가 그대로 저장되는 것이 아니라, 객체가 저장되어있는 '메모리 주소'인 객체에 대한 '참조 값'이 저장된다. let user = { name: "John" }; 객체는 메모리 내 어딘가에 저장되고, 변수 user엔 객체를 '참조'할 수 있는 값이 저장된다. 따라서 객체가 할당된 변수를 복사할 땐 객체의 참..

자바스크립트 객체

객체 자바스크립트에서 객체란 이름(name)과 값(value)로 구성된 프로퍼티의 정렬되지 않은 집합이다. 프로퍼티의 값으로 함수가 올 수도 있는데, 이러한 프로퍼티를 메소드라고한다. let user = new Object(); // '객체 생성자' 문법 let user = {}; // '객체 리터럴' 문법 객체를 선언할 땐 주로 객체 리터럴 방법을 사용한다. 리터럴과 프로퍼티 let user = { // 객체 name: "John", // 키: "name", 값: "John" age: 30 // 키: "age", 값: 30 }; 콜론 : 을 기준으로 왼쪽엔 키가, 오른쪽엔 값이 위치한다. 프로퍼티 키는 프로퍼티 '이름' 혹은 '식별자'라고도 부른다. // 프로퍼티 값 얻기 alert( user.name..

자바스크립트 크롬으로 디버깅하기

디버깅(debugging) 스크립트 내 에러를 검출해 제거하는 일련의 과정을 의미한다. Sources 패널 크롬에서 F12, 컨트롤+쉬프트+I를 눌러 개발자 도구를 연다. 토글 버튼을 누르면 네비게이터가 열리면서 현재 사이트와 관련된 파일들이 나열된다. 1. 파일탐색영역 : 페이지를 구성하는데 쓰인 모든 리소스를 트리 형태로 보여준다. 크롬 익스텐션이 여기에 나타날 때도 있다. 2. 코드에디터영역 : 선택한 파일의 소스 코드를 보여준다. 여기서 코드 편집도 할 수 있다. 3. 디버깅영역 : 디버깅에 관련된 기능을 제공한다. 콘솔(Console) 개발자 도구에서 ESC를 누르면 하단에 콘솔 창이 열린다. 여기에 명령어를 입력하고 엔터를 누르면 입력한 명령어가 실행된다. 중단점(Breakpoints) 자바스..

자바스크립트 기본문법 요약

기본 문법 요약 외우기 쉽지 않아 자칫하면 실수할 수 있는 부분을 중심으로 요약 엄격 모드 모던 자바스크립트에서 지원하는 모든 기능을 활성화하려면 스크립트 맨 위에 use strict를 적어줘야한다. 'use strict'; ... use strict는 스크립트 최상단이나 함수 본문 최상단에 있어야 한다. use strict가 없어도 코드는 정상적으로 동작하지만 모던한 방식이 아닌 옛날 방식으로 하위 호환성을 지키며 동작한다. 될 수 있으면 모던한 방식을 사용하는 걸 추천 변수 let const : 한 번 값을 할당하면 더는 값을 바꿀 수 없는 상수 정의 var : 과거에 쓰이던 키워드 변수의 명명 규칙 숫자와 문자는 첫 글자가 될 수 없다. 특수기호는 $와 _만 사용할 수 있다. 비 라틴계 언어의 문자..