컴퓨터 공부하는 블로그 컴퓨터 공부하는 블로그

자바 스크립트에서 'this'란 'this'를 포함하고 있는 함수가 어느 'context' 즉 어느 문맥에서 호출됐느냐를 가리키는 말이다. 사실 자바의 'this'와 달리 자바 스크립트의 'this'는 애매한 점이 많다. 자바는 함수 안에 있는 'this'라면 그 'this'는 함수 안에서만 작동했다. 하지만 자바 스크립트의 'this'는 조금 다르다. 해당 함수가 호출되는 객체가 어떤 것이냐에 this가 매번 바뀐다. ※ 참고로 렉시컬 스코프와 햇갈리지 않도록 한다. 렉시컬 스코프는 정적, 즉 함수의 선언 할 시점에서 스코프가 정해진다. 하지만 this는 객체에 종속된 개념이므로 자신이 어디서 어떻게 호출하느냐에 따라서 this는 동적으로 바뀐다. 모든 함수, 객체는 모두 전역 변수 'window' 객..

자바 스크립트의 객체(Object)란? 보통 자바(java)를 생각하면 객체는 클래스와 함께 짝지어 다닌다고 생각할 수 있다. 하지만 자바스크립트의 클래스는 최근 도입된 개념이다. 그래서 그 전에는 클래스 없이 객체를 클래스처럼 이용했다. 자바 스크립트 객체는 'key'와 'value'로 이뤄진 프로퍼티(property) 그리고 메서드의 집합이다. 일반적으로 한 개의 변수는 한 개의 값만 저장이 가능하다. 이럴 경우 변수가 가진 데이터를 명확히 알 수 있으나 여러 면에서 불편함이 생긴다. 또한 필요에 따라 변수 한개에도 여러 자료를 담아야할 경우가 생긴다. 그래서 생겨난 것이 객체(Object)다. 아래 예시를 보면 더 쉽게 이해할 수 있다. 객체(Object)의 구성 자바 스크립트 객체는 크게 둘로 나..

자바 스크립트의 클래스 활용 자바 스크립트도 자바처럼 클래스(class)와 객체(Obejct)를 갖는다. 하지만 자바스크립트의 클래스는 ES6에 새로 추가된 개념이다. 클래스가 있기전 클래스를 통해 객체를 사용하지 않고 직접 객체를 만들어서 사용했다. 그리고 이런 객체를 복제하여 사용하며 이것을 상속의 개념으로 사용했다. 하지만 자바 스크립트에서도 클래스 사용이 가능해지면 자바의 문법과 비슷하게 구현이 가능하다. 자바 스크립트의 클래스 작성 자바 스크립트의 경우 자바와 비슷하게 대부분이 진행된다. 아래는 자바 스크립트에서 클래스를 선언하고 생성자로 객체를 생성하는 과정이다. 자바 스크립트 클래스의 상속과 다형성, 오버라이딩 자바스크립트의 클래스도 이제 상속이 가능하고 이를 통해 자바의 기능을 그대로 구현..

자바(java)의 클래스(class)와 오브젝트(Object) 기존에 자바를 공부했다면 클래스에 대해 알고 있을 것이다. 자바에서 클래스는 연관된 메서드 및 변수들을 모아놓은 집합이다. 간단하게 예시를 보면 다음과 같다. class student { String name; int age; int number; } 위의 'student'라는 클래스는 'name', 'age', 'number'를 갖는다. 클래스는 위와 같이 연관된 메서드, 변수들을 모아놓은 집합이다. 이러한 클래스를 이용하면 코드의 양을 줄일 뿐 아니라 대형 프로젝트도 훨씬 쉽게 진행할 수 있다. 그리고 이러한 클래스를 활용하기 위해선 자바에선 객체(Object)를 이용했다. 클래스가 원본이라면 객체는 클래스의 복사본과 같은 것이다. 그래서..

배열(Array)이란? 자바스크립트에서 배열(Array)는 이름과 인덱스로 참조되는 정렬된 값의 집함. 배열을 구성하는 각각 값을 요소(element)라고 하며, 배열에서 위치를 가리키는 숫자는 인덱스(index)라고 함 자바스크립트 배열의 특징 1. 요소들의 타입이 고정되지 않아, 같은 배열에 있는 요소끼리 타입이 서로 다를 수 있다. 2. 배열 요소의 인덱스는 연속적이지 않아도 된다. 따라서 특정 요소는 비어있을 수 있다. 3. 배열은 Array객체로 다뤄진다. 배열의 생성 배열 생성하는 방법은 총 세가지다. 1. 배열 리터럴을 이용하는 방법 (예시의 arr1) 2. Array 객체의 생성자를 이용하는 방법 (예시의 arr2) 3. new 연산자를 이용한 Array 객체 생성 방법 (예시의 arr3)..

C, 자바와 달리 자바 스크립트의 경우 타입 변경이 자유롭다. var, let을 써주며 별도의 타입을 지정하지 않아도 엔진에서 알아서 판단해서 적절한 자료형을 부여한다. 그래서 위와 같은 변수에 다른 타입의 값을 재할당할 수도 있는 등 자유로운 형변환이 이뤄진다. 이러한 자료형 변환은 크게 두 가지로 나뉜다. 묵시적 타입 변환(implicit type conversion) 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면, 자동으로 타입을 변경한다. 명시적 타입 변환(explicit type conversion) 묵시적 타입 이외에도 사용자가 직접 원하는 방식으로 타입을 변환할 방법도 있다. 이를 명시적 타입 변환이라 한다. 1. Number() / 숫자로 형변환 Number()의 괄호 안에 들어간..

자바 스크립트의 자료형 자바스크립트에는 '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 타입 자바스..

자바스크립트 HTML 문서에 적용하기 자바 스크립트의 경우 HTML 문서를 동적으로 작동하도록 도와주기 때문에 기본적으로 HTML 문서 내에 위치한다. 하지만 필요에 따라 그 위치를 변경할 수 있다. 스크립트 적용 위치 자바 스크립트는 아래와 같이 크게 세가지로 적용 위치를 변경해줄 수 있다. 1. 테스트입니다. 2. 태그 내에 3. HTML 문서 밖에 스크립트 파일 생성 후 삽입 테스트입니다. 스크립트 적용 위치가 다른 이유 일반적으로 간단히 학습용 페이지를 만들경우 스크립트 파일이 간단하고 내용이 길지 않다. 그래서 어디 위치하나 스크립트 실행에 있어 크게 시간 차이가 없다. 하지만 프로젝트가 커지고 스크립트 파일이 방대해지면 위치에 따른 시간 차가 난다. 즉 페이지 로딩의 효율화를 위해 필요게 맞게..