Tech/Javascript 29

[Javascript] constructor 생성자 함수

1. constructor의 필요성 예를 들어, 아래와 같이 'dongle' 이라는 이름을 가진 객체를 만들었고, 이 객체는 어떤 평가 점수들이 담겨 있고 그 합을 구하는 객체라고 하자. 이와 똑같은 형식으로 'dongri' 라는 이름을 가진 객체를 만들었다. 이 두 객체에 third 라는 세 번째 score를 넣고 싶으면 아래와 같이 두 객체에 다 적용해주면 될 것이다. 객체의 기본적인 동작방법이 바뀌면, 같은 취지의 객체는 다 바꾸어주어야 하기 때문에 이번엔 두번만 하면 된다. 하지만 만약에 객체가 수억 개가 있다면? 아마도 인간이 하기에는 너무나도 벅찬 일 일 것이다. 때문에 'constructor' 가 필요한 것이다. 2. contructor : 객체를 찍어내는 공장 위의 코드를 바탕으로 Pers..

Tech/Javascript 2021.01.01

[Javascript] 객체 지향 - 'this'

1. Javascript 에서 'this 다음은 dongle이라는 객체를 만든 것이다. 'dongle' 이라는 이름을 가진 사람이 어떤 평가를 받았는데 첫 번째 첨수를 10점, 두 번째 점수를 20점 받았고, 이 두 점수의 합계를 구하는 method를 정의한 것이다. 이 코드에서 두 점수의 합계를 출력하기 위해서 아래와 같은 코드를 통해 실행할 수 있다. dongle 이라는 객체에 있는 sum이라는 method를 불러오고, 그 객체 안의 인자를 불러와서 대입하는 식이다. 하지만 여기서, dongle 이라는 객체 안에 first와 second 값이 있다는 것을 알고 있는데, 굳이 dongle.first, dongle.second 두 번씩이나 언급할 필요가 있을까? 물론 두번정도는 괜찮을 수 있겠지만 평가 ..

Tech/Javascript 2020.12.31

[Javascript] 객체의 기본

1. 배열과 객체의 입출력 출력 값 앞의 text는 어떤 값이 출력되는지를 터미널 상에서 확인하기 위해 사용하였다. 배열에서는 값에 접근할 때 [ ](대괄호) 를 사용한다. 객체에서는 값에 접근 할때 . (점)을 사용한다. 물론 객체에서도 마치 배열처럼 [ ](대괄호) 를 통해서도 값에 접근할 수 있다. 2. 객체의 수정과 삭제 1) 만약 데이터를 수정하고 싶다면? 아래와 같이 .을 통해 호출하고, 수정할 값을 넣어주면 위의 출력 값에서 알 수 있듯이, donghyun 에서 kdh로 바뀐 것을 볼 수 있다. 2) 만약 데이터를 삭제를 하고 싶다면? delete를 사용해주면 된다. 삭제 되었기 때문에, 정의 되지 않았다고 출력되는 것을 볼 수 있다.

Tech/Javascript 2020.12.30

[Javascript]Javascript Immutability -2

1. 중첩된 객체 (Nested Object) String은 위치와 값이 같이 저장되지만, Array는 각각 별도의 공간에 독립적으로 저장된다. 여기서 Object.assign을 통해 복제를 하게 되면, 그 객체의 property 만 복제가 되는 것이다. 그리고 property의 value 값이 객체인 경우에는 값을 복제하는 것이 아니라 위치(reference)를 복제하게 된다. 잘 복제가 되었다고 생각을 하게 되어 o2를 수정해도 이제 o1인 원본 데이터에 영향이 가지 않을 것이라고 생각을 해서, o2.score.push(3)의 명령을 내린다면? 아래와 같이 원본 데이터에 변화를 초래한다. 따라서, property의 값이 객체인 경우에 객체를 수정할 때 원본 데이터에 영향을 주지 않으려면 별도로 할당되..

Tech/Javascript 2020.12.27

[Javascript] Javascript immutability

immutability : 무질서한 수정과 삭제 속에서 데이터의 원본이 훼손되는 것을 막는 것 1. 변수 할당 방식 ① case에서, primitive data type은 선언된 p1과 p2가 같은 곳을 가리키기 때문에 p1과 p2의 비교 연산자 ==의 값은 True가 나오게 된다. ② case에서, object data type은 같은 객체라고 하더라도 별도로 생성을 해서 따로따로 보관하는 특성으로 인해 다른 공간으로 할당되기 때문에, o1과 o2의 비교 연산자 ==의 값는 false가 나오게 된다. ③ case에서, primitive data type은 처음에 p3는 p3 = p1에 의해 '1' 쪽에 할당되어 있다가, p3 = 2를 선언하면서 다른 곳을 할당시키게 된다. ④ case에서, object..

Tech/Javascript 2020.12.24

[Javascript] 객체

1. 객체를 사용하는 이유? 첫번째 이유는 정리정돈의 수단으로서의 사용이다. 다양한 함수들을 사용하게 되고, 변수들이 많아지면 복잡해진다. 이때 복잡도의 한계에 도달하게 된다. 이러한 한계 상황에서 서로 연관된 함수와, 서로 연관된 변수를 같은 이름으로 grouping 해서 잘 정리정돈 하기 위한 도구를 객체라고 한다. 폴더, 디렉토리라고 생각하면 된다. 객체에 속해있는 함수는 메소드 라고 부른다. 2. 객체 생성 3. 객체의 데이터 순회 names 가 method 에 박혀있기 때문에, 만약에 객체의 변수 이름이 바뀌는 경우, 데이터를 못가져오는 현상이 생길 수 있다. 이런 경우에는 showAll 이라고 하는 함수 안에서, 이 함수가 소속되어 있는 객체를 가리키는는 약속된 기호를 사용한다. 바로 this..

Tech/Javascript 2020.12.22

[Javascript] 함수

1. Functin Basic 위와 같이 같은 내용을 출력하고 싶을 때, 기존의 우리는 1 -1과 1-2 를 두번 입력해서 코드를 짜게 된다. 하지만 1-1 과 1-2가 수천만개가 있다면? 얘기가 달라진다. 이러한 불편함을 줄여주기 위해서 등장한 기능이 함수이다. 1-1과 1-2를 출력해주는 함수를 정의하고 그 함수를 호출해서 사용하면 중복을 줄여줄 수 있다. 함수의 호출은 위의 코드와 같이 함수의 이름(); 로 호출하게 된다. 2. function parameter & argument 함수에서 입력을 받기 위해 선언하는 변수를 매개 변수(parameter) 라고 하고, 그 매개 변수에 넣는 값을 인자(argument) 라고 한다. 3. Function return 함수에서 입력 받은 값을 출력하는 것을..

Tech/Javascript 2020.12.22

[Javascript] Javascript 기본 정리

Javascript 는 동적인 언어이다. 이벤트(event) : 웹 브라우저 위에서 발생되는 모든 일들을 뜻한다. 어떤 이벤트가 일어났을 때, 자바스크립트 코드가 실행되는 것도 포함된다. ex ) onlick, onkeydown 자바스크립트에서 주로 쓰이는 데이터 타입은 문자열, 숫자가 있다. 자바스크립트에서 변수(variable)은 var로 표현한다. 리팩토링 : 자바스크립트에서 중복을 제거하는 등의 행위를 리팩토링이라고 부르는데, 비효율적인 코드를 효율적으로 만들어서 가독성을 높이고, 유지보수 하기에 편하게 만드는 것을 말한다.

Tech/Javascript 2020.12.21

[Javascript] JSON?

JSON (Javascript Object Notation) : - 데이터를 저장하거나 전송할 때 주로 사용되는 경량의 Data 교환 형식을 뜻하고, Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다. - JSON은 사람과 기계 모두 이해하기 쉽고, 용량이 작다는 장점을 지닌다. 하지만 JSON은 데이터 포맷일 뿐, 어떠한 통신 방법도, 프로그래밍 문법도 아니다. 단순히 데이터를 표시하는 표현 방법일 뿐이다. 1. JSON 특징 서버와 클라이언트 간의 교류에서 일반적으로 많이 사용된다. 자바스크립트 객체 표기법과 아주 유사하다. 자바스크립트를 이용하여 JSON 형식의 문서를 쉽게 자바스크립트 객체로 변환할 수 있는 이점이 있다. JSON 문서 형식은 자바스크립트 객체의 형식을 기반으로 만..

Tech/Javascript 2020.12.05