22.11.17 수
DAY 3 - javascript (기초다지기)
📌 참조에 의한 객체 복사
변수의 복사와 객체의 복사는 다르다.
let message = 'hello';
let pharse = message;
// message와 pharse는 각각의 서랍에서 hello를 꺼내온다.
let user = {
name : 'John'
};
let admin = user;
// user는 서랍에 객체를 담아놓았고,
// admin은 나의 서랍에서 객체를 꺼내놓는 것이 아니고, user서랍에 있는 것을 보여준다.
// 객체 그대로 저장되는 것이 아니고, 메모리 주소인 객체에 대한 참조 값이 저장되는것
// 얉은 복사📌가비지 컬렉션?
자바스크립트는 눈에 보이지 않는 곳에서 메모리관리를 수행한다.
https://ko.javascript.info/garbage-collection
💬 읽었지만 아직 이해가 부족해 더 학습이 필요
deep dive에서는 간단하게 설명되어있었다.
변수의 값이 변해 이전 값이 불필요해질 때, 가비지 콜렉터에 의해 메모리에서 자동 해제된다고 한다.
메모리에서 언제 해제될지는 예측할 수 없다고 한다.
가비지 콜렉터(garbage collecrot) : 애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더 이상 사용되진 않는 메모리를 해제하는 기능
🗣 강사님 feedback!
가비지 컬랙팅 : 메모리를 직접 제어할 수 있는 컴파일언어(C, C++)는 메모리 누수(memory leak)를 방지하기 위한 일련의 정리 로직이나 변수 메모리 최적화 작업이 필요한데, 자바스크립트는 생산성에 중점을 두어 메모리를 직접관리하지 않는 언어(언매니지드 랭귀지)라고 부릅니다.
자바스크립트 엔진 내부에 자동청소로봇과 같은 역할로 메모리를 일정주기로 정리해주는데, 이것을 가비지 컬렉터라고 부릅니다.
다른 많은 언어에서도 자주 채택되는 기능중 하나입니다.
📌 매서드와 this
객체 지향 프로그래밍 : 객체를 사용하여 개체를 표현하는 방식
(object-oriented programming, OPP)
1. 메서드 만들기
- 객체
user에게 인사할 수 있는 능력을 부여해 주자!
let user = {
name : 'john',
age : 30
};
user.sayHi = function() {
alert('안녕하세요!');
}
user.sayHi();
// 안녕하세요!
// 이름 없는 함수를 만들고, 객체 프로퍼티에 함수를 할당
// user.sayHi()를 호출하면, user가 인사를 해준다.
// 객체 프로퍼티에 할당된 함수를 메서드(method)라고 부른다.
// sayHi - 메서드
🗣 강사님 feedback!
객체 리터럴에는 '선언'하지 않았지만, 동적(dynamic)으로 메서드를 만들어준 형태입니다.
- 이미 정의된 함수를 이용해 만들 수 도 있다.
let user = {
// ...
};
// 함수 선언
function sayHi() {
alert("안녕하세요!");
};
// 선언된 함수를 메서드로 등록
user.sayHi = sayHi;
user.sayHi(); // 안녕하세요!2. 매서드 단축 구문
// 아래 두 객체는 동일하게 동작합니다.
user = {
sayHi: function() {
alert("Hello");
}
};
// 단축 구문을 사용하니 더 깔끔해 보이네요.
user = {
sayHi() { // "sayHi: function()"과 동일합니다.
alert("Hello");
}
};function 을 생략해도 메서드를 정의 할 수 있다.
3. 메서드와 this
매서드는 객체에 저장된 정보에 접근할 수 있어야 제 역할을 한다.
매서드 내부에서 this 키워드를 사용하면 객체에 접근 할 수 있다.
let user = {
name: "John",
age: 30,
sayHi() {
// 'this'는 '현재 객체'를 나타냅니다.
alert(this.name);
// alert(user.name) 과 같은 뜻
}
};
user.sayHi(); // John주의!
let admin = user;
user = null;
admin.sayHi(); // 오류발생
4. 자유로운 this
let user = { name: "John" };
let admin = { name: "Admin" };
function sayHi() {
alert( this.name );
}
// 별개의 객체에서 동일한 함수를 사용함
user.f = sayHi;
admin.f = sayHi;
// 'this'는 '점(.) 앞의' 객체를 참조하기 때문에
// this 값이 달라짐
user.f(); // John (this == user)
admin.f(); // Admin (this == admin)
admin['f'](); // Admin (점과 대괄호는 동일하게 동작함)sayHi() 는 각 객체에서 사용할 때에는, 각각의 객체의 name프로퍼티를 나타낸다.
5.this가 없는 화살표 함수
let user = {
firstName: "보라",
sayHi() {
let arrow = () => alert(this.firstName);
arrow();
}
};
user.sayHi(); // 보라화살표 함수는 this를 가지지 않는다.
this를 참조 하면, 평범한 외부 함수에서 this를 가져온다.
📖 풀어보기
✏️객체 리터럴에서 'this' 사용하기
함수 makeUser는 객체를 반환합니다.
이 객체의 ref에 접근하면 어떤 결과가 발생하고, 그 이유는 뭘까요?
function makeUser() {
return {
name: "John",
ref: this
};
};
let user = makeUser();
alert( user.ref.name ); // 결과가 어떻게 될까요?➡️ ref 값이 this인데 this는 아무거도 가르키고 있지 않다.
✏️ 계산기 만들기
- calculator라는 객체를 만들고 세 메서드를 구현해 봅시다.
-read()에선 프롬프트 창을 띄우고 더할 값 두 개를 입력받습니다. 입력받은 값은 객체의 프로퍼티에 저장합니다.
-sum()은 저장된 두 값의 합을 반환합니다.
-mul()은 저장된 두 값의 곱을 반환합니다.
let calculator = {
// ... 여기에 답안 작성 ...
};
calculator.read();
alert( calculator.sum() );
alert( calculator.mul() );➡️
let calculator = {
read() {
let a = prompt('첫번째 값을 입력하세요')
let b = prompt('두번째 값을 입력하세요')
}
sum () {
return a + b
}
mul () {
return a * b
}
}
read() =
sum a + b
mul a * b❌ 오답
prompt 창만 나오고, 결과 값이 실행되지 않았음
let calculator = {
read() {
let a = prompt('첫번째 값을 입력하세요')
let b = prompt('두번째 값을 입력하세요')
},
sum () {
return a + b
},
mul () {
return a * b
}
}
calculator.read();
alert( calculator.sum() );
alert( calculator.mul() );문제점
calculator.sum()의 a와 b는 받아온 값이 없으니까 실행이 안되는 것이 맞다.
prompt를 숫자형으로 받아오지 않아서, sum()은 받아온 값을 문자열로 인식해서 숫자를 더하는게 아니라 합쳐주고,
mul()은 자동으로 숫자형으로 바뀐 후, 곱하기를 해준다.
아래 정답과 같이 this로 받아와야하고, prompt으로 받은 값을 숫자형으로 바꿔 가져올 수 있게 해준다.
⭕️ 정답
let calculator = {
sum() {
return this.a + this.b;
},
mul() {
return this.a * this.b;
},
read() {
this.a = +prompt('첫 번째 값:', 0);
this.b = +prompt('두 번째 값:', 0);
// +를 붙이는 이유는 prompt로 받는 값은 문자열인데
// +를 붙임으로써, number형으로 받아 준다.
}
};
calculator.read();
alert( calculator.sum() );
alert( calculator.mul() );💬 학습할 당시에도 this는 알듯말듯 했는데 알지 못한 것이였던가
계산기 만드는 함수에서 this를 잘 사용하지 못 하였다.
💬 오늘의 느낀점
부족했던 부분을 확실히 잡고 갈 수 있던거 같다.
챕터로 따지면 몇 챕터 못 한거 같은데, 중요한 내용이니까 시간이 걸리더라고 개념을 잡고 가는 게 맞는거 같다..
조급하게 생각하지 말고 하나하나 해보자!!!!!
++
🗣 강사님 feedback!
연주씨는 하리보를 1분간 10개를 먹을 수 있습니다. 5분간 먹었다면 몇개를 먹었는지 객체 리터럴과 메서드 구현으로 실습해보세요.
✍🏼 실습 코드
let yeonju = {
haribo : 10,
jelly(minute) {
return alert(this.haribo * minute)
}
}
yeonju.jelly(5)
// 50yeonju라는 객체에 haribo : 10 이라는 프로퍼티를 선언해주고,
jelly()라는 메서드를 만들었다.
jelly()메서드는 this.haribo 가 10 이니까, 5분간 먹었으니 minute에 5를 받아 5분간 몇개를 먹었는지 출력해준다.
🗣 feedback code
let yeonju = {}
yeonju.jelly =function(min, haribo) {
let result = min * haribo;
return alert(result);
}
yeonju.jelly(5, 10);yeonju 객체가 "초기화" 되었고,
동적으로 메서드가 생성되어 마지막엔 "메서드"가 호출된 형태가 됩니다.
