[프론트앤드 공부기록] Javascript 기초 4

16. 객체와 메소드의 관계

const user = {
  name : 'Mike',
  sayHello : function(){
    console.log(`Hello, I'm ${user.name}`);
// 이렇게 user.name을 넣을 수는 있지만 문제가 발생할 수 있음. 그럴 때에는 this라는 키워드를 쓰면 된다.
  }
}
user.sayHello();
//로 호출하면 이 user가 sayHello 메소드의this가 된다
//
"Hello, I’m Mike"

 

 

 

예제

sayHello = function(){
  console.log(`Hello, I'm ${this.name}`);
}

let boy = {
  name : 'Mike',
  sayHello,
}
let girl = {
  name : 'Jane',
  sayHello,
}

boy.sayHello();
girl.sayHello();
//
"Hello, I'm Mike"
"Hello, I'm Jane"

여기서 this는 아직 결정되지 않았다.

어떻게 호출하느냐에 따라서 달라짐.

그런데 이 함수를 각 개체의 메소드로 넣어준다.

this는 실행하는 시점 즉 런타임에 결정된다.

sayHello의 this는 점 앞에 있는 객체 // boy, girl

그래서 boy.sayHello 메소드의 this.name은 Mike고 girl은 Jane이 된다.

중요한 것은 이 함수를 화살표 함수로 선언하면 동작이 달라진다는 것이다.

sayHello : () => {
  console.log(`Hello, I'm ${this.name}`);
}

let boy = {
  name : 'Mike',
  sayHello,
}
let girl = {
  name : 'Jane',
  sayHello,
}

boy.sayHello();
girl.sayHello();

이렇게 선언하면 나오지 않는다. 

 

이유

화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않음.

화살표 함수 내부에서 this를 사용하면 그 this는 함수의 값이 아닌 외부의 값이다.

그러니까

let boy = {
  name : 'Mike',
  sayHello : () => {
    console.log(this);
  }
}
boy.sayHello();

에서 this는 전역객체를 가리킨다.

이 전역객체는 브라우저 환경에서는 window

Node js 환경에서는 global이 된다.

 

 

연습 1)

let boy = {
  name: 'Mike',
  showName : function (){
    console.log(boy.name)
  }
};
boy.showName();
// "Mike"

 

연습 2)

let boy = {
  name : 'Mike',
  showName : function() {
    console.log(boy.name)
  }
};
let man = boy;
console.log(man.name); // "Mike"
man.showName(); // "Mike"

이 말은 객체가 하나 있는데 boy로도 man으로도 접근할 수 있는 것.

사람은 Mike 한 명인데 명령이 두 개

 

 

연습 3)

let boy = {
  name : 'Mike',
  showName : function(){
    console.log(boy.name)
  },
};
let man = boy;
man.name = 'Tom';

console.log(boy.name)
// "Tom"

뒤에 선언한걸로 덮어쓰기되었다.

 

 

연습 4)

let boy = {
  name : 'Mike',
  showName: function(){
    console.log(boy.name);
  }
};
let man = boy;
man.showName();
// “Mike”

 

 

연습 5)

let boy = {
  name : 'Mike',
  showName: function(){
    console.log(boy.name);
  },
};
let man = boy;
boy = null; // boy를 null로 만들어서 이제 man으로만 접근이 가능하다.
man.showName();

이렇게하면 오류가 나온다

let boy 안에 있는 것들이 다 사라졌으니까(null)

이럴 때는 boy를 this로 바꾸면 된다

이 메소드의 this는 해당 객체를 밝히기 때문.

 

 

연습 6)

let boy = {
  name : 'Mike',
  showName : function(){
    console.log(this.name)
  },
};
let man = boy;
boy = null;
man.showName();
//
"Mike"

 

 

 

화살표함수

let boy = {
  name : 'Mike',
  sayThis : function(){
    console.log(this);
  },
};
boy.sayThis();
//
“name” : “Mike”

이걸 화살표 함수로 바꾸면

let boy = {
  name : 'Mike',
  sayThis : () =>{
    console.log(this)
  },
};
boy.sayThis();

에러가 나오고 window가 나온다.

 

화살표함수로 메소드를 작성하면 전역객체를 가리키게 된다.

따라서 객체의 메소드를 작성할 때는 화살표 함수를 쓰지 않는 것이 좋다

 

 

 

---

17. 배열(Array)

순서가 있는 리스트

1번에 철수 2변에 영희... 30번에 영수

let students= [‘철수’, ‘영희’, ... ‘영수’];

배열은 대괄호'[]'로 묶어주고, 쉼표','로 구분해서 만들 수 있다.

배열을 탐색할 대는 고유번호(index)를 사용. 0부터 시작한다

let students=['철수','영희','영수'];
console.log(students[0]);
// "철수"

배열명 뒤에 대괄호와 인덱스를 이용해서 읽거나 수정할 수 있다.

let students=['철수','영희','영수'];
students[0] = '민정';
console.log(students[0]);
// "민정"

이 코드를 사용하면 첫 번째 학생이 철수에서 민정으로 바뀐다.

 

 

---

18. 배열의 특징

 

• 배열은 문자 뿐만 아니라 숫자, 객체, 함수 등도 포함할 수 있다.

let arr = [
  '민수', // 문자
  3, // 숫자
  false, // 불린
  {name : 'Mike',
  age : 30,
  }, // 객체
  function(){
    console.log('TEST')
  }, // 함수
];

 

length : 배열의 길이를 구할 수 있다.

students.length // 30. 이런식으로

그 배열이 가지고 있는 요소의 개수를 반환

 

 

• 배열 뒤에서 추가 / 제거

추가

push는 배열 제일 뒤에 요소를 추가해주는 메소드

let days = ['월','화','수'];
days.push('목')
console.log(days);
//
[‘월’, ‘화', ‘수’, ‘목’]

제거

pop은 배열 제일 뒤 요소를 제거

let days = ['월','화','수'];
days.pop();
console.log(days)
//
[‘월’, ‘화’]

 

 

• 배열 맨 앞에서 동작하는 추가 / 제거

추가

let days = ['월','화','수'];
days.unshift('일');
console.log(days);
//
[‘일’, ‘월’, ‘화’, ‘수’];

 

제거

let days = ['월','화','수'];
days.shift();
console.log(days);
//
[‘화’, ‘수’];

 

** push와 unshift는 여러 요소를 한 번에 추가할 수 있다.

 

 

■ 반복문 for

배열을 쓰는 가장 큰 이유 중 하나는 반복을 위해서.

length를 통해서 배열의 길이를 알고 있으므로 for문을 쓸 수 있다.

let days = ['월','화','수'];
for(let index = 0; index < days.length; index++){
  console.log(days[index])
}
//
"월"
"화"
"수"

 

 

■ 반복문 for ... of

let days = ['월','화','수'];
for(let day of days){
  console.log(day)
//
"월"
"화"
"수"

 

배열에 for ... of를 쓰는건 장점보다 단점이 많아 권장하지는 않는다.

배열 days를 돌면서 요소를 day라는 이름으로 접근할 수 있다는 말.

for문보다는 간단하지만 index를 얻지 못한다는 단점이 있다.

 

 

연습 1)

let days = ['mon','tue','wed'];
days[1] ='화요일'
console.log(days);
//
["mon","화요일","wed"]

이렇게 index를 이용해서 수정이 가능하다

 

 

연습 2)

let days = ['mon','tue','wed'];
days[1] ='화요일'
days.push('목요일');
console.log(days);
//
["mon","화요일","wed","목요일"]

 

 

연습 3)

let days = ['mon','tue','wed'];
days[1] ='화요일'
days.push('목요일');
days.unshift('sun');
console.log(days);
//
["sun","mon","화요일","wed","목요일"]

 

 

연습 4)

let days = ['mon','tue','wed'];
days[1] ='화요일'
days.push('목요일');
days.unshift('sun');

for(let index = 0; index<days.length; index++){
  console.log(days[index]);
}
//
"sun"
"mon"
"화요일"
"wed"
"목요일"

※ 여기서 모든 index자리에 i가 올 수 있음. index를 i로 쓴다.

 

 

연습 4-1)

 

for ... of로

let days = ['mon','tue','wed'];
days[1] ='화요일'
days.push('목요일');
days.unshift('sun');
for(let day of days){
  console.log(day);}
//
"sun"
"mon"
"화요일"
"wed"
"목요일"

※ day는 변수라 다른 아무 이름이나 적어도 된다

 

 

 

---

정리

const name = 'Mike';
let age = 30;

같은 변수를 만들 수 있고

 

Boolean
Null
Undefined
Number
String
Object

자료를 이해할 수 있다.

 

console.log(name);
alert(age);

등을 이용해 값을 확인할 수 있고

 

prompt(`생년월일을 입력하세요.`);
confirm(`삭제하시겠습니까?`);

이를 통해 사용자들이 원하는 값을 입력받을 수 있다

 

const user={
  name : '주현',
  age : 24
}

if(user.age>19 && user.age < 60){
  console.log('접종대상입니다.');
} else {
  console.log( '접종대상을 확인해주세요');
}
// "접종대상입니다."

연산자와 조건문을 이용해 각기 다른 상황에 대응할 수 있고

 

const age = prompt('나이를 입력하세요.')
const name = prompt('이름을 입력하세요.')

if(age > 19 && age < 60){
  console.log(`접종대상입니다 ${name}님.`);
} else {
  console.log(`${name}님, 접종대상을 확인해주세요`);
}

이런식으로 응용도 가능하다.

 

for(let i = 0; i <10 i++){
  console.log(i);
}

반복문으로 힘들이지 않고 동일한 작업을 반복할 수 있다.

 

function add(num1, num2){
  console.log(num1+num2);
}

함수와

const user = {
  name : 'Mike',
  age : 30,
}

객체

const users=['Mike','Jane']

배열에 대해 배웠다

 

 

이거 올리고 바로 중급 공부해야지

화이팅!!