자바랑 자바스크립트랑 뭐가 달라요?
자바랑 자바스크립트...
둘은 아주 다르대여 이름만 비슷하지
사슴 vs 사슴벌레
인도 vs 인도네시아
자바 vs 자바스크립트
정도의 차이래여,
근데, 사슴 - 사슴벌레 는 둘 다 동물이고,
인도 - 인도네시아는 둘 다 국가인데,
자바 - 자바스크립트도 뭔가 공통점이 있지 않을까여?
네 있어여,
둘 다 객체 지향 프로그래밍 언어 입니다.
그게 머에여?
쉽게 말해서,
우리가 현실에서 사물을 인지하는 방식을 프로그래밍에 접목하려는 사상을 의미합니다
그래서 객체가 뭔데요
쉽게 말해서 자바스크립트의 자료형 중 한 종류임
근데 자바스크립트 언제 씁니까
웹 페이지 만들 때,
정확히는 웹페이지를 동작하게 하려고 쓰는거 아닌가여
웹 브라우저는 DOM을 만들어서 자바스크립트로 동작할 수 있는디
이 DOM도 객체라서 좀 중요해여
이름부터 Document Object Model 이잔슴
넘 어려운데 자료형부터 알려주삼
여기 뽀식이 라고 하는 애기고양이가 있어요
허걱스~ 너무 귀여워~
이름은 뽀식이,
나이는 1살,
종류는 코리아숏헤어
몸무게는 300그램이래요 ㅠㅠ근데 객체 지향 프로그래밍 언어는
우리가 현실에서 사물을 인지하는 방식으로 프로그래밍 한다고 했자나여
var cat = {name: "뽀식이", age: 1, family: "코리안 숏 헤어", weight: 300}이 뽀식이라는 고양이를 컴퓨터는 이렇게 이해한대요
꽤 비슷하죠?
자바스크립트의 기본 타입(data type)은 객체(object)입니다.
객체란 키(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합인데요
var cat = {name: "뽀식이", age: 1, family: "코리안 숏 헤어", weight: 300}이거 보면, 키 : 값으로 구성되어 있죠?
우리가 배열에서 값들을 요소라고 부르잖아요
근데 객체에서는 내부의 값들을 속성이라고 부릅니다.
배열에서 요소에 모든 형태의 자료형을 넣을 수 있듯,
객체에서도 속성에는 모든 형태의 자료형을 넣을 수 있읍니다.
문자열, 숫자, 배열, 객체에 객체를 넣을 수 있어용
객체의 값으로는 숫자랑 문자열만 쓸 수 있나요?
ㄴㄴ 함수도 넣을 수 있음,
근데 함수 넣으면 메서드(method) 라고 부르기로 약속했음
const sungho = { name: "sungho", age: 27, gender: "male", smoke: true, interest: ['game', 'music', 'movie'], eat: function(food) { console.log(this.name + "는 오늘 " + food + " 을(를) 먹었습니다") } } sungho.eat("마라탕") // sungho는 오늘 마라탕 을(를) 먹었습니다
다 알겠는데 저기 this 는 뭥미?
객체에서 자기 자신이 가진 속성을 출력할 때 씀
이거 밑에서 다시 설명해드림
고양이 이름 뭐야?
cat.name
그게 뭔데
cat["name"]
그거 어떻게 하는건데
자바스크립트에서 객체의 프로퍼티를 참조는 이렇게 할 수 있음
객체 나도 만들어 볼래
암튼, 자바스크립트에서 객체를 생성하는 방법은
// 객체 리터럴
var obj1 = {};
obj1.name = "Kim";
// object 생성자 함수
var obj2 = new Object();
obj2.name = "Kim";
// 생성자 함수
function F() {
var obj3 = new F();
obj3.name = "Kim"
}이렇게 3개 정도 있음
자료형과 프로토타입
자바스크립트에서 사용하는 기본 자료형과 객체 자료형이 있음
근데 객체 자료형부터 알아볼거임
속성과 메소드를 가질 수 있으면 다 객체입니다.
배열도 객체임, 함수도 객체임
그리고, 기본 자료형은
실체가 있는 것 (undefined, null 말구) 객체가 아닌 것은 다 기본 자료형임다
숫자, 문자형, boolean 얘네들일 듯
엥 근데 문자열에 메소드 사용 가능하던데요?
객체 자료형만 메소드 갖는다는거 다 구라인듯 ㅡㅡ
ㄴㄴ 아님 자바스크립트는 멍청한 사용자를 최대한 용인해줌
기본 자료형의 속성과 메소드를 호출할 때 일시적으로 객체로 승급시켜줌.
헐랭 그럼 자료형을 왜 나눈거임? ㅡㅡ
그럼 자료형이 승급할 때,
그 객체 전체에 속성과 메소드를 추가할 수 있다면?!
여기서 등장하는게 프로토 타입 이라는 속성인데,
이게 객체 전용 와꾸임
최상단 프로토타입 객체에 속성과 메소드를 추가하면, 해당 객체를 상속받은 모든 객체와 기본 자료형에서 해당 속성과 메소드를 사용할 수 있음
클래스 기반 언어의 상속 개념과 비슷함
프로토타입이 뭐냐면 다른 객체를 가리키는 내부 링크 같은건데
자바스크립트는 객체 지향 언어라고 했는데,
정확히는 멀티-패러다임 언어래요
명령형, 함수형, 프로토타입 기반 객체지향 언어
라는데 그냥 프로토타입 기반의 객체지향 언어라고 생각하세여,
자바스크립트는 이미 생성된 인스턴스의 자료구조랑 기능을 동적으로 변경할 수 있음
객체 지향의 상속, 캡슐화(정보 은닉)과 같은 개념은 프로토타입 체인과 클로저 등으로 구현할 수 있는데,
클래스에 익숙한 사람들은 좀 혼란스러울 듯
개어렵네요 쉽게 알려주세요 ㅠ
저 위에서 this 잠깐 나왔는데, 자기 자신의 프로퍼티를 참조한다고 했잖아여
이거 가지고 오브젝트 찍어내는 기계를 하나 만들어볼게요
function 기계() {
this.price = 3000;
this.amout = 5;
}
var pencil = new 기계()이게 뭐냐면 3000원 짜리 5개 만드는 공장입니다.
위 예시에선 3000원 짜리 연필 5개 만들었어요
이제 저 문법으로 object 대량 생산이 가능해요
실제로
console.log(pencil)찍어보면 {price: 3000, amount: 5} 나올걸요
이게 보통 부모가 자식 낳는 것 같아서 부모-자식 관계라고 부릅니다
근데 javascript에서는 프로토타입이라는거 써도 자식 object에게 데이터 물려줄 수 있음
기계.prototype이라고 찍어보면,
{constructor: f}
라고 나옵니다.
엥 저는 저딴거 만든적도 없는뎁쇼
네 아무도 모르게 은밀하게 몰래 생성된 비밀공간입니다
쉽게 말하면 유전자임
우리가 왜 코딩 잘합니까 부모님 덕분이에요
부모님이 코딩 잘하는 유전자를 물려줘서
우리가 뚝딱뚝딱 웹싸이트도 만들고 API 설계도 하고 그런거에요
근데 저 위에서 기계()가 부모이고, pencil이 자식이라고 했잖아요
기계.prototype.name = "kim"
이렇게 부모한테 유전자를 박아두면, 해당 부모로부터 생성된 자식들은 전부
.name을 갖다 쓸 수 있읍니다.
이게 class 기반 언어로 치면 상속 기능을 구현한 장치라고 보면 될 듯
.name은 벌루 안 와닿는데 우리가 좀 써봤을법 한 걸로 예시를 들어줘요
ㅇㅋ
array = [1,3,2];
array.sort();array 자료에 .sort()붙일 수 있는 이유가 뭐게요
어레이는 객체 자료형이니까요..
근데 기본 자료형에도 기능을 추가해주는게 프로토타입이라고 생각하시면 간단할 듯
(숫자, 문자, boolean)
