개발감성

number, undefined, string등의 변수 타입을 원시형 타입이라 한다. es6에서는 새로운 원시형 타입인 symbol타입이 추가되었다. 심볼은 객체의 속성으로 사용됨 심볼이 사용된 값은 유니크한 값을 가짐 심볼값은 선언 후 변경이 불가능함 선언과 출력 형태 testSb이란 변수를 심볼형으로 만들어주었다. 괄호 속 인자에는 심볼변수에 대한 설명만이 담긴다. 변수의 출력 형태는 심볼로 그대로 나온다. 심볼 사용이유 - 충돌방지 배열의 길이가 3인 배열의 length값에 10을 넣어준다면 배열의 길이가 10으로 변경이 된다. 그렇다면 배열에 length라는 이름의 속성을 넣어주면서도 내장된 length와 충돌이 일어나지 않으려면 어떻게 해야 될까 length라는 변수를 심볼형으로 정의하고 arr..

ES6부터 JS에 새로운 자료구조인 map과 set이 추가되었다. set은 일반적인 배열구조에서 중복값이 없는 집합구조라는 것이 가장 큰 특징이다. 배열(array)과 집합(set)의 차이 배열 배열은 3의 값을 가지는 인자가 두개 이상 있어도 모두 출력된다. 집합 집합은 3의 값을 가지는 인자가 여러개라면 중복이 제거되어서 1,2,3만 저장된다. (첫 인자로 보이는 size:3은 크기를 나타냄) Set생성 및 추가 - new, add 방법 1. 아무 인자도 주지 않고 정의된다. 후에 인자를 추가해줘야 함 방법 2. 정의하면셔 add를 사용해 인자를 추가하여 생성한 뒤 후에 인자를 추가했다. 또한 콘솔창을 보면 눈치챌 수 있듯이 set은 arr의 length대신 size를 사용해 크기를 표현한다. 방법 ..

상속의 개념에 이어서 메소드 오버로딩과 오버라이딩에 대해 알아본다. [JS] 자바스크립트에서 상속 상속 여기 하나의 클래스가 있고 속성1개와 메서드1개를 가지고 있다. 또 하나의 클래스를 정의하는데 아무 내용도 없는 클래스로 만든다. 빈 클래스 MyChild에 new를 사용해 아까 만든 클래스 MyPare developefeel.tistory.com Constructor 상속 관계에 있는 두 클래스의 인스턴스를 각각 생성해본다. 생성한 인스턴스들의 constructor가 각각 어떤 클래스를 가르키는지 확인해본다. 첫번째 조건문은 실행되는 것으로 보아 par인스턴스의 constructor에는 부모클래스의 인스턴스가 담겨있는 것을 볼 수 있다. 하지만 자식인스턴스인 ch에는 Child가 담겨있지 않아서 두번..

상속 여기 하나의 클래스가 있고 속성1개와 메서드1개를 가지고 있다. 또 하나의 클래스를 정의하는데 아무 내용도 없는 클래스로 만든다. 빈 클래스 MyChild에 new를 사용해 아까 만든 클래스 MyParent를 상속받는다. 빈 클래스를 child의 이름으로 인스턴스 생성을 한 뒤 부모클래스의 메소드인 method1을 호출해본다. 빈 클래스의 인스턴스인 child가 상속이 되어서 부모클래스의 메소드를 호출할 수 있다. 상속 - 확장 CellPhone을 부모 클래스로 생성하고 DmbCellPhone클래스에 상속을 시킨다. 이번엔 자식클래스를 빈 클래스로 만들지 말고 프로퍼티와 메서드를 함께 생성한다. 상속받은 자식클래스의 인스턴스를 생성하고 부모클래스의 메서드와 자신의 메서드를 모두 호출해본다. 상속은 ..

프로퍼티와 메서드 위와 같이 클래스에는 this로 가르키는 클래스내에 속하는 속성과 메소드가 존재할 수 있다. 클래스 내의 멤버들에 접근하기 위해서는 인스턴스를 생성해서 해당 메소드나 변수에 접근할 수 있다. 클래스 프로퍼티와 메서드 일반 프로퍼티와 다르게 클래스 프로퍼티는 클래스 명에 바로 프로퍼티를 추가하고 인스턴스 생성없이 접근할 수 있다. 인스턴스 생성이 없어도 해당 내용이 출력된다. 메소드 또한 마찬가지로 생성하고 리터럴 형태의 info를 리턴했을 때, info중 desc속성에 접근해본다. 이처럼 인스턴스 생성없이도 호출되는 것을 클래스프로퍼티와 메소드라 한다. Math.max등의 사용법을 생각해보면 인스턴스 생성없이 사용했던 것을 생각해보면 된다.

함수의 이름과 기능이 동일한 함수와 클래스를 설계하여 비교한다. 정의 클래스의 this는 자기자신을 가르키며 this.변수 는 자신의 클래스에 속하는 속성을 정의한다. 함수의 속성은 지역변수를 정의하여 사용한다. 또한 클래스의 첫 글자는 대문자로 적는다. 메소드 클래스의 메소드는 프로토타입 형태로 외부로 빼더라도 해당 메소드에 속하며 공간을 공유할 수 있다. 클래스 자기자신을 가르키는 this를 통해 클래스 내의 속성에 접근할 수 있다. 반면 함수는 자신에게 속하는 함수를 외부에 정의할 수 없어 함수 안에 중첩함수를 정의한다. 함수 내에 있으니 당연히 속성과 공간을 공유한다. 내부 접근 클래스 내의 모든것은 인스턴스 생성을 통해 접근이 가능하다. 함수내의 중첩함수는 함수 내에서 init()을 마지막에 호..

프로토타입 클래스의 정의는 함수형 클래스의 정의와 유사하다. [JS] 함수형 클래스 함수 선언 함수 선언을 위해서 function을 명시하고 사용할 함수 이름과 ()를 넣어주며 {}안에 내용을 넣는다. 여기서 this란 {}의 내용이 적힌 곳, 즉 Person의 주소가 들어가며 this.name은 Person의 name변 developefeel.tistory.com 프로토타입 클래스 정의 위의 글에서 사용했던 함수형 클래스의 정의다. 프로토타입의 정의는 여기서 메소드만 바깥으로 빼서 클래스의 이름과 메소드의 이름사이에 prototype을 적어준다. 인스턴스 두개를 생성하고 출력메소드를 사용해본다. 결과 또한 함수형 클래스와 같게 나온다. 함수형과 프로토타입의 차이점 함수형의 메소드는 인스턴스가 생성될 때..

함수 선언 함수 선언을 위해서 function을 명시하고 사용할 함수 이름과 ()를 넣어주며 {}안에 내용을 넣는다. 여기서 this란 {}의 내용이 적힌 곳, 즉 Person의 주소가 들어가며 this.name은 Person의 name변수를 뜻한다. 인스턴스 생성과 접근 선언된 함수형 클래스를 사용하기 위해서 인스턴스 이름인 person을 부르고싶은대로 적고 new를 사용하여 Person클래스를 가져온다. 앞으로 person이라는 이름의 인스턴스는 Person함수의 기능을 사용할 수 있다. 생성된 인스턴스의 age를 15로 변경했다. 여기서 기존의 Person의 age값인 10은 변하지 않는다. 인스턴스는 Person의 초기값을 가져올 뿐 인스턴스가 생성됬다면 해당 인스턴스는 Person을 복사해 온다..

리터럴 변수는 값을 저장하고 이용한다. 그런데 이 변수는 여러개의 값 또한 저장할 수 있다. 중괄호로 묶고 각 속성을 , 로 구분지어 명시하면 개개의 속성들은 해당 개체가 가지는 멤버가 된다. 변수 뿐 아니라 함수까지 멤버로 넣을 수 있다. 이렇게 중괄호로 여러 속성과 함수를 묶어서 , 로 구분지어서 사용하는 방식을 리터럴이라고 한다. 리터럴 클래스 멤버 접근 리터럴 클래스 내의 멤버들에 접근하기 위해서는 해당 클래스의 이름과 닷 ( . ) 연산자로 클래스 내의 멤버를 적어서 접근한다. user클래스 내의 showInfo 멤버메소드를 호출했다. user의 age속성에 접근하기 위해서 user.age로 적어준다. 리터럴의 데이터포장 만약 한 사람의 인적사항을 일반 함수로 출력하고 싶다면 속성만큼의 인자를 ..

일반 애니메이션 - show( ), hide( ) show와 hide 메소드는 기본 제공되는 애니메이션 효과로 각각 대상을 나타내고 숨기는 기능을 한다. 6초동안 애니메이션이 일어나고 완료되었을 시 알림창이 나타나도록 했다. hide를 실행했을 시 사진이 6초간 감춰지며 알림창이 나타난다. show를 실행했을 시 사진이 다시 나타나며 알림창이 나타난다. jQuery easing - 애니메이션에 효과주기 jQuery easing의 재밌는 효과 - codeJS jQuery의 easing를 사용하면 시각적으로 한층 더 풍부한 재미를 제공할 수 있습니다. www.codejs.co.kr jQuery에서 애니메이션에 다양한 효과를 주고자 easing기능을 제공한다. jQuery Easing Plugin Please..