프론트엔드/JavaScript
-
자바와 자바스크립트 클래스와 오브젝트프론트엔드/JavaScript 2020. 9. 11. 03:58
자바(java)의 클래스(class)와 오브젝트(Object) 기존에 자바를 공부했다면 클래스에 대해 알고 있을 것이다. 자바에서 클래스는 연관된 메서드 및 변수들을 모아놓은 집합이다. 간단하게 예시를 보면 다음과 같다. class student { String name; int age; int number; } 위의 'student'라는 클래스는 'name', 'age', 'number'를 갖는다. 클래스는 위와 같이 연관된 메서드, 변수들을 모아놓은 집합이다. 이러한 클래스를 이용하면 코드의 양을 줄일 뿐 아니라 대형 프로젝트도 훨씬 쉽게 진행할 수 있다. 그리고 이러한 클래스를 활용하기 위해선 자바에선 객체(Object)를 이용했다. 클래스가 원본이라면 객체는 클래스의 복사본과 같은 것이다. 그래서..
-
자바스크립트 함수와 매개변수, 인수프론트엔드/JavaScript 2020. 9. 10. 02:09
매개변수의 타입 자바 스크립트에서 함수를 정의할 때 매개 변수의 타입은 따로 명시하지 않는다. 어차피 변수 자체도 타입을 명시하지 않기 때문에 전달되는 파라미터 값도 데이터를 가려받진 않는다. 다만 그와 별개로 함수에서 처리가 되지 않는 값을 줬을 경우 함수 내부에서 처리가 불가능해서 오류가 난다. 자바 스크립트의 인수(argument) 자바 스크립트에선 매개 변수로 전달되는 인수가 기본 자료형(primitive)일 경우에는 기본 자료형 데이터가 바로 전달되고, 기본 자료형 이외의 객체가 전달될 경우는 객체의 참조값이 전달된다. 추가로 인수의 경우 다른 언어와 달리 원하는 숫자보다 적게 전달되더라도 오류가 나지 않는다. 그저 인수가 배정되지 않는 매개변수는 'undefined'값을 갖게 될 뿐이다. 위와..
-
자바스크립트의 함수(function)프론트엔드/JavaScript 2020. 9. 10. 01:32
자바 스크립트의 함수 (function) 자바 스크립트의 함수란 하나의 특별한 목적을 수행하도록 만들어진 독립적인 블록을 말한다. 한번 지정해놓으면 필요할때마다 불러서 사용할 수 있어 코드 절약에 큰 도움이 된다. 그리고 이러한 자바스크립트의 함수는 자바, C언어의 그것보다 훨씬 더 발전된 형태를 가진다. 그리고 이러한 기능 덕분에 함수를 여러 면에서 활용할 수 있다. 함수의 선언 함수 선언의 가장 기본 형태는 'function'을 이용하는 것이다. 참고로 이러한 함수를 만들때는 가급적 한 가지 함수는 한 가지 기능만 하도록 만든다. 함수 하나로 여러개를 한 번에 처리할 경우 유지보수에 문제가 생길 수 있다. function 함수명 ( 파라미터 삽입 ) { 함수 실행부 } 변수에 함수 저장 자바스크립트에..
-
자바스크립트의 배열(Array)프론트엔드/JavaScript 2020. 9. 10. 00:18
배열(Array)이란? 자바스크립트에서 배열(Array)는 이름과 인덱스로 참조되는 정렬된 값의 집함. 배열을 구성하는 각각 값을 요소(element)라고 하며, 배열에서 위치를 가리키는 숫자는 인덱스(index)라고 함 자바스크립트 배열의 특징 1. 요소들의 타입이 고정되지 않아, 같은 배열에 있는 요소끼리 타입이 서로 다를 수 있다. 2. 배열 요소의 인덱스는 연속적이지 않아도 된다. 따라서 특정 요소는 비어있을 수 있다. 3. 배열은 Array객체로 다뤄진다. 배열의 생성 배열 생성하는 방법은 총 세가지다. 1. 배열 리터럴을 이용하는 방법 (예시의 arr1) 2. Array 객체의 생성자를 이용하는 방법 (예시의 arr2) 3. new 연산자를 이용한 Array 객체 생성 방법 (예시의 arr3)..
-
for...of / for...in 에 대해서프론트엔드/JavaScript 2020. 9. 9. 23:09
자바 스크립트 for문에는 'for...in'과 'for...of'가 있다. 이 둘을 쓰면 일반 for문을 쓰는 것보다 편하게 for문 작성이 가능하다. 1. for...of / iterable 객체 순회 가능(주로 배열을 위해) 'for...of'문은 반복할 수 있는 객체(iterable objects)를 순회할 수 있도록 해주는 반복문. 자바스크립트에서 반복 가능한 객체는 Array, Map, Set, arguments 등이 있다. 이 반복문은 루프마다 객체의 열거할 수 있는 프로퍼티의 값을 지정된 변수에 대입한다. 즉 배열을 기준으로 순회하며 배열의 값을 돌려준다. 'for...of'는 iterable하지 못한 객체를 순회할 수 없다.(리터럴 객체) 에러난다. 간단히 이야기하면 배열의 경우 배열 안..
-
자료형 변환(type conversion)프론트엔드/JavaScript 2020. 9. 9. 22:20
C, 자바와 달리 자바 스크립트의 경우 타입 변경이 자유롭다. var, let을 써주며 별도의 타입을 지정하지 않아도 엔진에서 알아서 판단해서 적절한 자료형을 부여한다. 그래서 위와 같은 변수에 다른 타입의 값을 재할당할 수도 있는 등 자유로운 형변환이 이뤄진다. 이러한 자료형 변환은 크게 두 가지로 나뉜다. 묵시적 타입 변환(implicit type conversion) 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면, 자동으로 타입을 변경한다. 명시적 타입 변환(explicit type conversion) 묵시적 타입 이외에도 사용자가 직접 원하는 방식으로 타입을 변환할 방법도 있다. 이를 명시적 타입 변환이라 한다. 1. Number() / 숫자로 형변환 Number()의 괄호 안에 들어간..
-
Var vs let vs Const프론트엔드/JavaScript 2020. 9. 9. 15:39
자바스크립트에선 변수를 선언할 땐 'Var', 'let', 'Const' 이 세가지를 이용하게 된다. 하지만 이 셋은 비슷해보이지만 약간의 차이가 있다. 우선 'Var', 'let'은 'Const'와는 조금 많은 차이가 있고 'Var'와 'let'은 약간의 차이가 있다. 1. Var (변수 재선언 가능, 재할당 가능) 'Varibale'의 약자로 메모리상에서 읽고 쓰기가 가능하다. 자바스크립트에서 변수를 나타내는 Var는 C언어, 자바와 달리 엄격하지 않다. 'Var'에는 다양한 자료가 들어갈 수 있고 중복 선언을 하더라도 큰 문제가 없다. 하지만 이러한 성격 덕분에 코드가 길어지는 등의 상황에선 변수가 중복 재선언 되는 등의 문제가 발생했다. 이에 새로 생긴 것이 바로 let이다. 2. let (변수 ..
-
자바 스크립트의 데이터 타입프론트엔드/JavaScript 2020. 9. 5. 11:43
자바 스크립트의 자료형 자바스크립트에는 'Number', 'String', 'Boolean', 'Object' 등 다양한 데이터 타입이 있다. 이러한 데이터 타입은 크게 기본자료형(primitive)와 객체(Object)로 나뉜다. 기본자료형(Primitive value) 오브젝트를 제외한 모든 값은 변경 불가능한 값(immutable value)다. 그리고 이러한 값들을 "primitive values"라고 말한다. 1. Boolean 타입 'Boolean'은 논리적 요소를 나타내며, 'true'와 'false' 두 개의 값을 갖는다. 일반적으로 '0', 'null', 'undifiend', 'NaN'은 false 그 외 값은 true. 테스트입니다. 테스트용 문장입니다. 2. Number 타입 자바스..