JavaScript만 사용하며 개발을 진행하던 나날이 이어졌는데TypeScript를 쓰시는 분을 보고, TypeScript와 JavaScript와의 차이점이 궁금해졌다.따라서 둘의 차이점을 작성하고,앞으로 상황에 맞는 언어를 쓰기 위해 이 글을 작성한다. 차이점가장 큰 차이는 이름에서도 유추할 수 있듯이 type의 유무이다.Java를 예로 들자면 변수 선언 시 변수 앞에 붙는 char int long String 같은 게JavaScript는 없고, TypeScript는 있다는 것이다.코드를 보면서 이해해보자. // JavaScriptvar a = 1var b = 2var c = a + b위처럼 JavaScript는 변수를 선언할 때 자료형을 명시하지 않는다.// TypeScriptvar a: numbe..
Language/JavaScript + TypeScript
1. 문서 객체 선택이란? 문서 객체를 선택한다는 것은? 👉 이미 존재하는 HTML 태그를 자바스크립트에서 문서 객체로 변환하는 것 2. 문서 객체 선택 메서드 종류 🩶 1개를 선택하는 메서드 🩶 document.getElementyById(아이디) : 아이디로 1개 선택 document.querySelector(선택자) : 선택자로 1개 선택 👉 이름이 같은 선택자가 여러 개라면 가장 먼저 등장하는 것을 선택함 🩶 여러 개를 선택하는 메서드 🩶 document.getElementyByName(이름) : name 속성으로 여러 개 선택 document.getElementByClassName(클래스) : class 속성으로 여러 개 선택 document.querySelectorAll(선택자) : 선택자로 ..
1. 문서 객체 모델 기본 용어 문서 객체란? 👉 HTML 태그를 자바스크립트에서 사용할 수 있는 객체로 만든 것. 문서 객체를 조작한다 = 태그를 조작한다 웹 브라우저는 HTML 페이지를 읽으면서 태그의 포함 관계에 따라 문서 객체를 트리 형태로 만든다. 노드: 각 트리의 각 요소 요소 노드: 요소를 생성하는 노드 예) h1 태그, script 태그 텍스트 노드: 화면에 출력되는 문자열 더보기 텍스트 노드를 갖지 않는 태그들 문서 객체 생성 방법 정적 생성: 웹 페이지를 처음 실행할 때 HTML 태그로 적힌 문서 객체를 생성하는 것 동적 생성: 웹 페이지 실행 중에 자바스크립트를 사용해 문서 객체를 생성하는 것 문서 객체 모델이란? 👉 DOM(Document Object Model). 웹 브라우저가 H..
객체는 자료형 여러 개를 한 번에 저장한다. 1. 객체 개요 💚 배열과 객체의 차이점 💚 👉 배열은 요소에 접근할 때 인덱스를 사용하지만, 객체는 키를 사용한다. 💚 객체 생성 예 💚 키 속성 제품명 7D 건조 망고 유형 당절임 성분 망고, 설탕, 메타중아황산나트륨, 치자황색소 원산지 필리핀 💚 객체 속성 접근 방법 💚 1) 대괄호 사용 product['제품명']//7D 건조 망고 product['유형']//당절임 product['성분']//망고, 설탕, 메타중아황산나트륨, 치자황색소 product['원산지']//필리핀 2) Object.속성 👈 사용 빈도 높음 product.제품명 product.유형 product.성분 product.원산지 💚 객체 순환 방법 💚 for (var 키 in 객체) { 문..
1. 선언과 호출 방법 정의 표현 익명 함수 이름을 입력하지 않고 만드는 함수 function ( ) { } 선언적 함수 이름을 입력해서 만드는 함수 function 함수( ) { } 함수 실행을 함수를 호출한다고 표현한다. 호출방법은 아래와 같다. 함수(); 2. 실행 우선순위 함수도 변수이므로 가장 마지막에 입력된 값이 저장된다. 선언적 함수와 익명 함수를 함께 사용할 때는 실행 순서가 다르다. 자바스크립트는 모든 코드를 읽기 전에 선언적 함수를 먼저 읽는다. 👉 선언적 함수가 익명 함수 뒤에 있지만 먼저 읽으므로 아래 코드를 실행하면 나중에 읽은 익명 함수를 실행한다.
1. 정의 함수에 파라미터로 들어가는 함수 2. 용도 순차적으로 실행하고 싶을 때 쓴다. 3. 특징 다른 데에서 만든 함수도 콜백함수로 넣을 수 있다. 콜백함수에 함수명을 작명할 수도 있다. 콜백함수가 필요한 함수들에만 콜백함수를 사용할 수 있다. 4. 원리 first() 함수 다음에 second() 함수 실행하고 싶으면? Q. first(); second(); 이렇게 코드를 작성해도 first 함수가 실행된 후에 second 함수가 실행되는데, 콜백함수는 의미가 없는 거 아닌가요? A. 👉 내가 first라는 함수를 만들었는데, 팀원들이 이것을 자주 쓴다면 콜백함수가 의미가 있다. 예) 팀원1: first() 후에 console.log(2) 바로 하고 싶은데요? 팀원2: 저도 first() 후에 con..
사칙연산 증감연산 비교연산 논리연산
1. Primitive type 1-1. Number type Number : typeof instance === 'number' Number 타입은 모두 실수로 처리됨 1-2. String type String: typeof instance == 'string' 템플릿 문자열이란? : 문자열에 변수를 포함시킬 때 좀 더 직관적이고 편하게 사용하기 위한 기능 - 문자열을 만들 때 큰따옴표(") 대신 백틱(`) 사용 - 변수를 넣고자 하는 부분에 ${} 키워드를 사용해 변수 넣기 - 장점: 문자열을 나눠서 더하기 기호를 통해 연결할 필요가 없음 👉 가독성이 좋음 1-3. Boolean type Boolean: typeof instance === 'boolean' 1-4. undefined undefined..
언어는 크게 정적 타입 언어와 동적 타입 언어로 나뉘는데, 자바스크립트는 동적 타입 언어이다. 정적 타입 언어와 동적 타입 언어를 구분하자면 아래와 같다. 정적 타입 언어 vs 동적 타입 언어 정적 타입 언어 동적 타입 언어 정의 정해진 자료형에 정확한 값이 전달되어야 하는 언어 값이 전달될 때 자료형이 결정되는 언어 종류 C, C++, Java, C# JavaScript, Python 특징 규칙을 중요시 함, 설계, 규약, 규격 프레임워크에서 상속의 비중이 큼 규칙보다 사용 중심적, 진보적, 인간중심 상속의 비중 낮고 함수의 비중 높음 시대의 요구사항을 빠르게 적용하는 데에서 중요 장점 안정적 문법의 규약이 상대적으로 적음, 간단함 단점 보수적, 기계적, 과업지향적 문법 에러가 많이 생겨도 발견하기 어..
