프론트엔드/JavaScript
-
자료, 객체의 복사에 대해서프론트엔드/JavaScript 2020. 9. 19. 06:07
자바스크립트의 복사 자바 스크립트를 이용하다보면 복사를 할 일이 많다. 이때 주의할 것이 자료형에 따라 복사의 형태가 달라진다는 것이다. 우선 기본 자료형인 Number의 복사를 보면 다음과 같다. 그 다음은 String의 복사를 보자. Number, String의 경우 자료를 복사하고 자료가 본사된 변수를 수정해도 원본에 문제가 없다. 어떻게 보면 당연한 것 처럼 보이기도 하다. 하지만 기본 자료형을 제외한 객체는 다르다. 배열 객체의 경우 복사를 시행하고 복사된 배열 객체를 수정했더니 원본이 변했다. 왜 그런것일까? 기본 자료형과 객체의 차이 자바스크립트에선 기본 자료형(primitive)과 객체(object)로 나눠진다. 그럼 이건 무슨 기준으로 나눠진걸까? 간단히 말하면 변수가 저장하고 있는 값의..
-
자바스크립트의 클로저(Closure)프론트엔드/JavaScript 2020. 9. 15. 05:07
클로저(closure)란? 클로저란 함수를 일급객체로 취급하는 함수형 언어(하스켈, 스칼라 등)에서 쓰이는 일종의 테크닉이다. "클로저는 함수와 그 함수가 선언됐을 때 렉시컬 환경과의 조합이다"라는 유명한 말이 있다. 그런데 해당 내용으론 이해하기가 힘들고, 중첩된 함수에서 외부 함수는 이미 종료됐지만, 외부 함수에 있는 내부 함수는 그대로 살아있는 상황을 말한다. 이해하기 쉬우면 코드를 보면 더 편하다. 위 코드는 외부 함수에서 반환값으로 내부 함수를 반환하거나, 외부 함수에서 내부 함수를 호출해준 경우다. 이때 잘 보면 내부함수 inner()를 호출했는데 10이 출력됐다. 근데 잘 생각해보면 좀 이상하다. 왜냐면 외부 함수는 내부 함수를 리턴하면서 종료됐다. 근데 내부 함수는 이때 외부 함수가 가진 ..
-
자바스크립트 Object 객체프론트엔드/JavaScript 2020. 9. 14. 15:04
Object 객체의 정체 자바 스크립트에는 'Object'라는 'Object'가 있다. 즉 객체라는 이름의 객체가 있다. 자바 스크립트는 자바가 클래스를 상속받으며 프로그램을 구성하듯 객체를 상속받으며 구성된다. 그리고 자바스크립트 객체의 가장 맨 위에 'Object'라는 이름을 가진 객체가 있다. Object의 상속 자바 스크립트 객체의 가장 맨 위에는 'Object' 객체가 존재한다. 그래서 자바 스크립트 내에서 생성되는 모든 객체는 별도의 표시가 없어도 'Object'의 프로퍼티와 메소드를 사용할 수 있게 된다.
-
자바스크립트의 상속 (inheritance)프론트엔드/JavaScript 2020. 9. 14. 14:35
상속이란? 자바에서 상속은 클래스 단위로 이루어졌다. 자손 클래스는 'extend'를 통해 부모 클래스의 속성값을 물려 받았다. 자바 스크립트에서도 상속은 비슷한 의미로 쓰인다. 하지만 그 대상이 다르다. 자바 스크립트에서 상속은 클래스가 아닌 객체를 기준으로 이뤄진다. 왜 객체? 자바 스크립트는 과거 클래스가 없을 때부터 객체를 중심으로 프로그램을 짰다. 그래서 클래스 대신 객체를 상속하는 것으로 클래스를 대신했다. 그리고 이 중심에는 'prototype'이라는 속성이 있다. 프로토타입(proto type) 프로토타입(proto type)이란 자바 스크립트에 존재하는 모든 객체가 가지는 속성값을 말한다. 이 속성은 객체로서 상속 과정에 필요한 다양한 정보를 담고 있고 사용자가 추가, 수정할 수 있다. ..
-
자바스크립트 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에 새로 추가된 개념이다. 클래스가 있기전 클래스를 통해 객체를 사용하지 않고 직접 객체를 만들어서 사용했다. 그리고 이런 객체를 복제하여 사용하며 이것을 상속의 개념으로 사용했다. 하지만 자바 스크립트에서도 클래스 사용이 가능해지면 자바의 문법과 비슷하게 구현이 가능하다. 자바 스크립트의 클래스 작성 자바 스크립트의 경우 자바와 비슷하게 대부분이 진행된다. 아래는 자바 스크립트에서 클래스를 선언하고 생성자로 객체를 생성하는 과정이다. 자바 스크립트 클래스의 상속과 다형성, 오버라이딩 자바스크립트의 클래스도 이제 상속이 가능하고 이를 통해 자바의 기능을 그대로 구현..