본문 바로가기

Web/Javascript

 (29)
'new' 연산자와 생성자 함수 객체 리터럴 {...} 을 사용하면 객체를 쉽게 만들 수 있다. 그런데 개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 한다. 생성자 함수 생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없다. 다만 생성자 함수는 아래 두 관례를 따른다. 함수 이름의 첫 글자는 대문자로 시작한다. 반드시 "new" 연산자를 붙여 실행한다. function User(name) { this.name = name; this.isAdmin = false; } let user = new User("Jack"); alert(user.name); // Jack alert(user.isAdmin); // false new User(...)를 써서 함수를 실행하면 아래와 같은 알고리즘..
메서드와 'this' 메서드 만들기 let user = { name: "John", age: 30 }; user.sayHi = function() { alert("안녕하세요!"); }; user.sayHi(); // 안녕하세요! 이렇게 객체 프로퍼티에 할당된 함수를 메서드(method) 라고 부른다. 메서드 단축 구문 (method shorthand) // 아래 두 객체는 동일하게 동작한다 user = { sayHi: function() { alert("Hello"); } }; // 단축 구문을 사용하니 더 깔끔해 보인다 user = { sayHi() { // "sayHi: function()"과 동일하다 alert("Hello"); } }; 위처럼 function을 생략해도 메서드를 정의할 수 있다. 메서드와 'this' ..
참조에 의한 객체 복사 객체와 원시 타입의 근본적인 차이 중 하나는 객체는 '참조에 의해(by reference)' 저장되고 복사된다는 것이다. 변수엔 객체가 그대로 저장되는 것이 아니라, 객체가 저장되어있는 '메모리 주소'인 객체에 대한 '참조 값'이 저장된다. let user = { name: "John" }; 객체가 할당된 변수를 복사할 땐 객체의 참조 값이 복사되고 객체는 복사되지 않는다. let user = { name: "John" }; let admin = user; // 참조값을 복사함 객체에 접근하거나 객체를 조작할 땐 여러 변수를 사용할 수 있다. let user = { name: 'John' }; let admin = user; admin.name = 'Pete'; // 'admin' 참조 값에 의해 변경됨..
객체 기초 객체 중괄호 {...}를 이용해 객체를 선언하는 것을 객체 리터럴(object literal) 이라고 부른다. 객체를 선언할 땐 주로 이 방법을 사용한다. let user = { // 객체 name: "John", // 키: "name", 값: "John" age: 30 // 키: "age", 값: 30 }; 객체는 몇 가지 특수한 기능을 가진 연관 배열(associative array)이다. 객체는 프로퍼티(키-값 쌍)를 저장한다. 프로퍼티 키는 문자열이나 심볼이어야 한다. 보통은 문자열이다. 값은 어떤 자료형도 가능하다. 아래와 같은 방법을 사용하면 프로퍼티에 접근할 수 있다. 점 표기법: obj.property 대괄호 표기법 obj["property"]. 대괄호 표기법을 사용하면 obj[varWit..
자바스크립트 기초 Hello, world! 웹 페이지에 자바스크립트 코드를 추가하기 위해 와 같이 삽입한다. 코드 구조 세미콜론은 생략할 수 있다. 하지만 세미콜론을 사용하는 것이 더 안전하므로 이를 기억하고 따르도록 한다. 주석 달기를 두려워하지 말라. 엄격 모드 자바스크립트는 꽤 오랫동안 호환성 이슈 없이 발전해왔다. 기존의 기능을 변경하지 않으면서 새로운 기능이 추가되었다. 하위 호환성 문제 때문에 변경사항 대부분은 ES5의 기본모드에선 활성화되지 않도록 설계되었다. ‘use strict’ 가 스크립트 최상단에 오면 스크립트 전체가 모던한 방식으로 동작한다. 코드를 클래스와 모듈을 사용해 구성한다면 "use strict"를 생략해도 된다. 변수와 상수 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 ..
객체지향(OOP) 프로그래밍 객체지향 프로그래밍이란 캡슐화, 다형성, 상속 등을 이용하여 코드 재사용을 증가시키고유지보수를 감소시키는 장점을 얻기 위해서 객체들을 연결 시켜 프로그래밍 하는 것 1. 추상화(Abstraction)공통의 속성이나 기능을 묶어 이름을 붙이는 것 2. 캡슐화(Encapsulation)데이터 구조와 데이터를 다루는 방법들을 결합 시켜 묶는 것객체가 맡은 역할을 수행하기 위한 하나의 목적을 한데 묶는다외부에서 직접 접근을 하면 안되고 오로지 함수를 통해서만 접근 3. 상속성, 재사용(Inheritance)상위 개념의 특징을 하위 개념을 물려받는 것 4. 다형성(Polymorphism)부모클래스에서 물려받은 가상 함수를 자식 클래스 내에서 오버라이딩 되어 사용하는 것
CLASS Class : 공통적인 속성을 모아 한데 묶은 덩어리 또는 명세 Instance : 해당 클래스의 속성을 지닌 구체적인 객체 예시(실생활) 과일을 예로 들면 배, 사과, 바나나, 감, 오렌지 등은 과일이라는 분류, 집합, 집단에 속함 여기서 과일은 클래스이고 배, 사과, 바나나 등은 과일이라는 클래스에 속한 인스턴스 이다 또한 과일은 음식이라는 범주에 속하기 때문에 과일 클래스는 음식클래스의 하위클래스가 된다 배, 사과, 바나나 등은 과일이면서 음식이기도 한데 과일과 음식은 추상적이고 배, 사과, 바나나 등은 눈으로 볼 수 있고 만질 수 있는 구체적인 물체이다 이렇게 공통된 속성을 지닌 구체적인 대상을 인스턴스라고 한다 이 인스턴스들의 공통속성을 모은 추상적인 개념이 클래스이다 음식 : super cla..
PROTOTYPE 메소드 상속 및 동작원리 prototype으로 메소드 작성시 new연산자로 인스턴스를 생성하면 각 인스턴스에서 __proto__라는 프로퍼티를 통해 메소드로 접근할 수 있다 function Person(n, a) { this.name = n; this.age = a; } Person.prototype.setOlder = function() { this.age += 1; } Person.prototype.getAge = function() { return this.age; } var jiwon = new Person('지원', 30); var suji = new Person('수지', 25); 이 때 __proto__는 생략이 가능하기 때문에 마치 자신의 것처럼 메소드를 호출할 수 있게 해준다 jiwon...

티스토리툴바