프론트엔드
-
자바스크립트 this의 정의프론트엔드/JavaScript 2020. 9. 14. 05:54
자바 스크립트에서 'this'란 'this'를 포함하고 있는 함수가 어느 'context' 즉 어느 문맥에서 호출됐느냐를 가리키는 말이다. 사실 자바의 'this'와 달리 자바 스크립트의 'this'는 애매한 점이 많다. 자바는 함수 안에 있는 'this'라면 그 'this'는 함수 안에서만 작동했다. 하지만 자바 스크립트의 'this'는 조금 다르다. 해당 함수가 호출되는 객체가 어떤 것이냐에 this가 매번 바뀐다. ※ 참고로 렉시컬 스코프와 햇갈리지 않도록 한다. 렉시컬 스코프는 정적, 즉 함수의 선언 할 시점에서 스코프가 정해진다. 하지만 this는 객체에 종속된 개념이므로 자신이 어디서 어떻게 호출하느냐에 따라서 this는 동적으로 바뀐다. 모든 함수, 객체는 모두 전역 변수 'window' 객..
-
자바스크립트의 전역 객체(Global object)프론트엔드/JavaScript 2020. 9. 14. 01:45
위와 같은 예시를 보면 전역 변수, 전역 함수를 선언하고 실행까지 하는 것을 볼 수 있다. 일반적으로 함수명, 변수명을 이용하면 해당 함수와 변수에 설정된 데이터를 이용할 수 있다. 그렇다면 다음은 어떨까? 변수와 함수를 호출할 때 앞에 window라는 단어가 붙었다. 그러나 실행은 똑같이 된다. 이게 무슨 뜻일까? 자세히 보면 그것을 알 수 있다. 우리는 지금까지 객체를 만들고 그 안에 프로퍼티를 불러올 때 점 ( . )을 찍었던 것을 기억할 것이다. 위의 예시를 봐도 그렇다. 즉 함수나 변수를 점을 찍어서 불러올 수 있다는 것은 window의 정체는 객체란 것을 알 수 있다. window란 자바스크립트가 브라우저에서 돌아갈 때 모든 객체들의 최상위 객체로서 전역객체라(Global Object)라고도 ..
-
자바 스크립트의 객체(Object)프론트엔드/JavaScript 2020. 9. 11. 06:57
자바 스크립트의 객체(Object)란? 보통 자바(java)를 생각하면 객체는 클래스와 함께 짝지어 다닌다고 생각할 수 있다. 하지만 자바스크립트의 클래스는 최근 도입된 개념이다. 그래서 그 전에는 클래스 없이 객체를 클래스처럼 이용했다. 자바 스크립트 객체는 'key'와 'value'로 이뤄진 프로퍼티(property) 그리고 메서드의 집합이다. 일반적으로 한 개의 변수는 한 개의 값만 저장이 가능하다. 이럴 경우 변수가 가진 데이터를 명확히 알 수 있으나 여러 면에서 불편함이 생긴다. 또한 필요에 따라 변수 한개에도 여러 자료를 담아야할 경우가 생긴다. 그래서 생겨난 것이 객체(Object)다. 아래 예시를 보면 더 쉽게 이해할 수 있다. 객체(Object)의 구성 자바 스크립트 객체는 크게 둘로 나..
-
자바 스크립트의 클래스(class)와 객체(Object) 활용프론트엔드/JavaScript 2020. 9. 11. 04:51
자바 스크립트의 클래스 활용 자바 스크립트도 자바처럼 클래스(class)와 객체(Obejct)를 갖는다. 하지만 자바스크립트의 클래스는 ES6에 새로 추가된 개념이다. 클래스가 있기전 클래스를 통해 객체를 사용하지 않고 직접 객체를 만들어서 사용했다. 그리고 이런 객체를 복제하여 사용하며 이것을 상속의 개념으로 사용했다. 하지만 자바 스크립트에서도 클래스 사용이 가능해지면 자바의 문법과 비슷하게 구현이 가능하다. 자바 스크립트의 클래스 작성 자바 스크립트의 경우 자바와 비슷하게 대부분이 진행된다. 아래는 자바 스크립트에서 클래스를 선언하고 생성자로 객체를 생성하는 과정이다. 자바 스크립트 클래스의 상속과 다형성, 오버라이딩 자바스크립트의 클래스도 이제 상속이 가능하고 이를 통해 자바의 기능을 그대로 구현..
-
자바와 자바스크립트 클래스와 오브젝트프론트엔드/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)..