Frontend 80

자료구조와 자료형 - 문자열

자바스크립트에서는 텍스트 형식의 데이터는 길이에 상관없이 문자열 형태로 저장됩니다. 문자열은 페이지 인코딩 방식과 상관없이 항상 UTF-16 형식을 따릅니다. 특수 기호 js에는 특수 문자들이 많습니다. \n 줄 바꿈 문자 를 사용하면 작은,큰 따옴표로도 여러 줄의 문자열을 만들 수 있습니다. 따옴표를 이용해 만든 문자열과 백틱을 이용해 만든 문자열은 서로 같습니다. 백틱을 사용하면 여러 줄 나타내기, 문자열 중간에 따옴표 넣기 전부 해결되니 백틱을 쓰세요!! 역슬레쉬는 문자열을 정확하게 읽기 위한 용도로 만들어졌으므로 문자열로 보여주고 싶다면 2개를 연달아 사용하면 됩니다. console.log(`이것이 역슬레쉬 표현법 \\`) 이것이 역슬레쉬 표현법 \ 문자열의 길이 length 프로퍼티에는 문자열의..

자료구조와 자료형 - 문자열

자바스크립트에서는 텍스트 형식의 데이터는 길이에 상관없이 문자열 형태로 저장됩니다. 문자열은 페이지 인코딩 방식과 상관없이 항상 UTF-16 형식을 따릅니다. 특수 기호 js에는 특수 문자들이 많습니다. \n 줄 바꿈 문자 를 사용하면 작은,큰 따옴표로도 여러 줄의 문자열을 만들 수 있습니다. 따옴표를 이용해 만든 문자열과 백틱을 이용해 만든 문자열은 서로 같습니다. 백틱을 사용하면 여러 줄 나타내기, 문자열 중간에 따옴표 넣기 전부 해결되니 백틱을 쓰세요!! 역슬레쉬는 문자열을 정확하게 읽기 위한 용도로 만들어졌으므로 문자열로 보여주고 싶다면 2개를 연달아 사용하면 됩니다. console.log(`이것이 역슬레쉬 표현법 \\`) 이것이 역슬레쉬 표현법 \ 문자열의 길이 length 프로퍼티에는 문자열의..

자료구조와 자료형 - 숫자형

모던 자바스크립트는 숫자를 두 가지 자료형으로 나타냅니다. 1. 일반적인 숫자는 배정밀도 부동소수점 숫자 로 알려진 64비트 형식의 IEEE-754에 저장됩니다. 2. 일반적인 숫자는 2의 53제곱 이상이거나 -2의 53제곱 이하일 수 없다는 제약 때문에 Bigint 라는 자료형이 만들어졌습니다. 숫자를 입력하는 다양한 방법 0이 연속해서 많이 들어가는 숫자를 표현할 때 다음과 같은 방법을 사용합니다. 큰 수를 표현할 때 console.log(1e10) // 10000000000 1 * 10의 10제곱 e 왼쪽의 수에 10에 e 오른쪽의 수로 거듭제곱한 수를 곱합니다. 작은 수를 표현할 때 console.log(1e-5) // 0.00001 1 / 10의 5제곱 e 왼쪽의 수에 10에 e 오른쪽 음수의 ..

자료구조와 자료형 - 원시값의 메소드

자바스크립트는 원시값을 객체처럼 다룰 수 있게 해줍니다! 원시값에도 메서드를 호출할 수 있다는 말이쥬~ 원시값을 객체처럼 하용하게 된 배경 자바스크립트 객체의 장점 중 하나는 프로퍼티의 값으로 함수를 저장할 수 있다는 것입니다. 자바스크립트는 날짜,에러,HTML 요소 등을 다룰 수 있게 해주는 다양한 내장객체를 제공합니다. 고유한 프로퍼티와 메서드를 가지죠. 하 지 만 이런 기능을 사용하기 위해선 시스템 자원이 많이 필요합니다. 객체는 원시값보다 무겁고, 내부 구조 유지를 위한 자원을 필요로 하기 때문입니다. 때문에 아래와 같은 딜레마가 생겨버립니다. 1. 문자열이나 숫자와 같은 원시값을 다루는 작업이 많다. 2. 메서드를 사용하면 작업을 수월하게 할 수 있을 것 같다. 3. 하지만 원시값은 빠르고 가벼..

객체: 기본 - 객체를 원시형으로 변환하기

객체의 자동 형 변환 객체끼리 서로 더하거나, 빼거나 , alert으로 객체를 출력하거나 할 때 객체는 자동 형 변환을 합니다. 예는 다음과 같습니다! 1. 객체는 논리 평가 시 true를 반환합니다. 고로 객체는 숫자형, 문자형 2개로만 변환이 일어납니다! 2. 객체끼리 빼는 연산을 하거나, 수학 관련 함수를 적용할 때 객체는 숫자형으로 형 변환 합니다. ex) Date객체끼리 빼는 연산을 하면 두 날짜의 시간차이가 반환 됩니다. ( 숫자형 형 변환 ) 3. 객체를 출력하려고 할 때 문자형으로 형 변환 합니다. 객체 자동 형 변환의 기준 hint 객체 형 변환은 세 종류로 구분되고 hint라 불리는 값이 구분 기준입니다. hint == 목표로 하는 자료형 정도로 이해하고 넘어갑니다. 1. alert 함..

객체: 기본 - 심볼 ( Symbol )

자바스크립트는 객체의 프로퍼티 키로 문자형과 심볼형만을 허용합니다. Symbol ? 심볼은 유일한 식별자를 만들고 싶을 때 사용합니다. let test = Symbol('테스트 심볼') console.log(test) // Symbol(테스트 심볼) 심볼은 Symbol() 로 만들 수 있고, 괄호안에 '심볼 이름' 이라고 불리는 심볼의 대한 설명을 붙일 수 있습니다. 심볼은 유일성이 보장되는 자료형입니다. 때문에 심볼 설명이 동일한 여러 개의 심볼을 만들어도 각 심볼값은 다릅니다. let test1 = Symbol('테스트 심볼') let test2 = Symbol('테스트 심볼') console.log(test1 == test2) // false console.log(test1 === test2) //..

객체: 기본 - optional chaining ( ?. )

옵셔널 체이닝( ?. )은 프로퍼티가 없는 중첩객체에 에러 없이 접근하고 싶을 때 사용합니다! let user1 = { name:{ firstName: 'John', lastName: 'Lee' } } let user2 = {} console.log(user2.name.firstName) // Cannot read properties of undefined 위 코드에서는 아직 이름 정보가 없는 객체에서 값을 가져오려 했기 때문에 에러가 발생했습니다. 옵셔널 체이닝이 등장하기 전에는 이런 에러를 막기위해 &&연산자를 사용했습니다. let user1 = { name:{ firstName: 'John', lastName: 'Lee' } } let user2 = {} console.log(user2 && use..

객체: 기본 - new , constructor

개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 합니다. 이럴 때 사용하는 것이 new연산자와 constructor함수 입니다. constructor ( 생성자 함수 ) 생성자 함수와 일반 함수에 기술적인 차이는 없습니다. 대신 생성자 함수에는 2가지 관례가 있습니다. 1. 함수 이름의 첫 글자는 대문자로 시작합니다. 2. 반드시 'new' 연산자를 붙여 실행합니다. function User(name){ this.name = name; this.isGood = false; } let user1 = new User("Lee"); console.log(user1.name)// Lee console.log(user1.isGood)// false new 함수명( ... ) 을 사용해서 함수를 ..

객체: 기본 - method 와 this

객체는 실존하는 개체를 표현하고자 할 때 사용합니다! * 개체(entity)란? 현실 세계에서 조직을 운영하는 데 꼭 필요한 사람이나 사물과 같이 구별되는 모든 것을 의미한다. * 메서드(method)란? 객체의 프로퍼티에 함수를 할당할 수 있습니다. 객체 프로퍼티에 할당된 함수를 method 라고 부릅니다! method 만들기 1. 객체 밖에서 함수 표현식으로 생성 let user = { name : 'Lee', age : '26' } user.hi = function(){ console.log(`hi! ${user.name}`) } user.hi(); // hi! Lee 2. 이미 정의된 함수를 사용해서 생성 let user = { name : 'Lee', age : '26' } function hi..

객체 : 기본 - 가비지 컬렉션

자바스크립트에서 우리가 만든 모든 것 ( 원시값, 객체 , 함수 등 ) 들은 메모리를 차지합니다. 자바스크립트 엔진 안에서는 우리가 만든 것중 더 이상 쓸모 없어진 것 들을 처리하는 가비지 컬렉터 ( garbage collector ) 가 끊임없이 동작합니다 ! 가비지 컬렉션 기준 자바스크립트는 도달 가능성 이라는 개념을 통해 메모리 관리를 합니다. 도달 가능한 값은 어떻게든 접근,사용이 가능한 값을 의미하는데, 도달 가능한 값이라면 메모리에서 삭제되지 않습니다. root( 루트 ) root라고 불리는 값들은 태생부터 도달 가능한 값 이기 때문에 명백한 이유 없이 삭제되지 않습니다. root 의 예시 1. 현재 함수의 지역 변수와 매개변수 2. 중첩 함수의 체인에 있는 함수에서 사용되는 변수와 매개변수 ..