220727.review

내용

function = 같거나 비슷한 동작들을 자주 사용한다면 묶어준다
함수
한번에 한 작업에 집중
읽기 쉽고 어떤 동작인지 알 수 있게 네이밍

 함수      함수명    매개변수 (여러개면 쉼표로 구분)
function sayHello(name){
  console.log(`hello, ${name}`};
}

변수?

const 로 선언하는 습관을 들이되
값이 자주 바뀐다면 let

지역변수, 전역변수 완벽하게 이해하기

let msg = 'hello'
console.log('함수 호출전')
console.log(msg);

function sayHello(name){
  if(name){
    msg += `, ${name}`;
  }
  console.log('함수내부')
  console.log(msg);
}

sayHello('Mike');
console.log('함수 호출 후')
console.log(msg);

함수 호출전
hello

함수내부
hello, Mike

함수 호출 후
hello, Mike

우선순위는 어떻게 될까?

let msg = 'welcome';
console.log(msg);

function sayHello(name){
  let msg = 'hello';
  console.log(`${msg} ${name}`);
}

sayHello('Mike')
console.log(msg);

welcome

hello mike // 함수 안에서는 지역번수가 사용된다
undefined

welcome


// 전역변수가 많으면 관리가 힘드니
// 지역변수 위주로 사용하는 습관을 들이면 좋다

&&, || 연산자를 활용해보자

function sayHello(name){
  let newName = name || 'friend'; // name 값이 없으면 friend 를 넣어주세요
  let msg = `hello, ${newName}`
  console.log(msg)
}

sayHello();
sayHello('Jane');

hello, friend
hello, Jane

// 이렇게도 쓸 수 있다

function sayHello(name = 'friend'){
  let msg = `hello, ${name}` // name 이 없을때 default 값 지정
  console.log(msg)
}

함수 선언문 vs 함수 표현식

함수표현식
let seyHello = function(){
  console.log('Hello')
}

둘의 차이 ?
호출 타이밍
함수 선언문은 어디서든 호출 가능
자바스크립트는 위에서 순차적으로 해석하면서 읽어내려오는 인터프리터 언어

Q 어? 그러면 위에서 순차적으로 호출되는데 왜 어디서든 호출할 수 있어요 ?
자바스크립트 내부알고리즘 때문
자바스크립트는 초기화단계에서 코드의 모든 함수선언문을 찾아서 생성해둔다 = 호이스팅

Q 그래서 함수표현식, 함수선언문 뭘 사용하는게 좋아요 ?
별로 상관은 없는데 에러나서 위치 옮기는게 귀찮다고 하면 함수선언문 위주로 사용하는게 좋음

화살표함수 (arrow function)

let add = function(num1, num2) {
  return num1 + num2;
}

===

let add = (num1, num2) => { return num1 + num2 }

===

let add = (num1, num2) => num1 + num2

인수가 하나면 괄호도 생략가능
let sayHello = name => `hello, ${name}`;

인수가 없는 함수라면 괄호 생략불가
let showError = () => {alert('error!')}

객체(Object)

const superman = {
  name : 'clerk',
  age : 33,
  // key : value,
}

// 객체의 접근
superman.name
superman['age']

// 추가
superman.gender = 'male';
superman['hair'] = 'black';

// 삭제
delete superman.hair;

// 프로퍼티 존재 여부 확인
'birthDay' in superman; // false
'age' in superman; // true

// for ... in 반복문
for(let key in superman) {
  console.log(key)
  console.log(superman[key])
}

in 을 사용한 함수예제

// 객체를 받아 나이가 20 이상인 사람이면 true, 그렇지 않다면 false 를 반환하는 함수 ?

function isAdult(user) {
  if(user.age < 20){
	return false;
	}
  return true;
}

const Mike = {
  name : "Mike",
  age : 30
};

const Jane = {
  name : "jane",
};

console.log(isAdult(Mike));  // true
console.log(isAdult(Jane));  // true ?
// why? Jane.age 에 항목이 없어 undefined 를 반환하기때문

  if(!('age' in user) || user.age < 20) // user에 age가 없거나 20살 미만이거나
// 이렇게 바꾸면 됨

const Mike = {
  name: "Mike",
  age: 30
};

for(key in Mike){ // key 는 마이크가 가진 프로퍼티
  console.log(key)
}
// "name", "age"

for(key in Mike){
  console.log(Mike[key]) // 가지고 있는 키 값에 해당하는 value 모두 출력
}

// "Mike", 30

객체 method, this
method : 객체 프로퍼티로 할당 된 함수

const superman = {
  name : 'clart',
  age : 33,
  fly : function(){
    console.log('슝슝')
  }
//  == 단축해서 사용가능
  fly() {
    console.log('슝슝')
  }
}

superman.fly();  // '슝슝'

객체와 메소드의 관계

const user = {
  name : 'Mike',
  sayHello : function(){
    console.log(`hello, I'm ${user.name}`);
  }
}

주의할 점,
this 를 사용할 때 화살표 함수는 일반 함수와는 달리 자신만의 this 를 가지지 않는다.
화살표 함수에서의 this는 외부에서 값을 가져온다. 브라우저라면 window

새로운 객체 생성하기

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

let myCar = new Car('Eagle', 'Talon TSi', 1993);
// myCar 객체 생성 후 매개변수로 지정된 값을 속성에 할당한다

console.log(myCar.make) // Eagle

생성자 함수 와 new 연산자

일반적인 함수와의 기술적인 차이는 없지만 생성자함수는
1. 함수 이름의 첫번째 글자는 대문자
2. 반드시 'new' 연산자를 붙혀서 실행

function User(name) {
  this.name = name;
  this.admin = false;
}

let user = new User('보라');

console.log(user);
// { name: '보라', admin: false }

new constructor[([arguments])]

constructor : 객체 인스턴스의 타입을 기술(명세)하는 함수
arguments : constructor와 함께 호출될 값 목록
constructor 는 설계도, arguments 는 인자 라고 생각하면 됨

함수를 작성하여 객체 타입을 정의한다.
new 연산자로 객체의 인스턴스를 생성한다.

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

let man = boy; // Mike;

man.name = "Tom"
console.log(boy.name) // Tom;
man.showName() // Tom;

--- 

boy = null; // boy를 null로 바꾸면
man.showName(); // error, 'name' of null

// boy.name -> this.name

man.showName(); // Tom; 정상적으로 출력됨

array : 순서가 있는 리스트

1번에 철수
2번에 영희      ===    let students = ['철수', '영희', ...]
...

0부터 시작하는 고유번호 = index
특징
문자, 숫자, 객체, 함수등도 포함할 수 있음
.length = 길이
push() : 배열 끝에 추가 / pop() : 배열 끝 제가
shift, unshift 배열 앞에 제거/ 추가
배열은 반복문에 유리하다

let days = ['mon', 'tue', 'wed']

days[1] = '화요일' // 변경
days.length // 3
days.push('thu') // 'thu' 추가됨

for … of 구문
for(let e of days) {
  console.log(e)
} // mon, tue, wed

최근 느낀점

너무 급하게, 너무 빠르게 무언가를 하려다보면 항상 욕심이 앞서고
그러다보면 놓치는점, 생각하지 못했던 점이 반드시 생기기 때문에
나는 어떠한 공부를 하던 주기적으로 하루를 정해서 그간 배운 내용을 총 복습 하곤 한다.
최근에 (남들과 비교하면 어떨지 모르겠지만) 너무 빠르게 많은 내용을 배워서
정리가 잘 되지 않는다는 느낌을 받았다
이 개념이 이 개념인가? 라는 생각이 들때가 가장 좋은 복습타이밍이라고 생각하기 때문에
오늘 날잡고 복습을 하겠다고 다짐했다

복습에 사용한 수단

처음에는 완강했던 강의들 중 하나를 정해 빠르게 훑어보고 기능을 구현해볼까 하고 생각했지만,
복습을 하게 된 계기가 그렇게 기능구현 위주로 학습을 하다보니
사용하는 문법에 헛점이 매우 많다는 걸 느낀적이 있었다
예를들어 함수자리에 함수와 괄호를 써놓고 왜 안되지? 하면서 고민하고 있던 부분이라던지
객체나 배열에 함수도 들어갈 수 있다는 것을 모르고 있었다던지 하는 부분이다

그래서
코딩악마 100분 기초강의
모던 javascript 튜토리얼
강의와 글을 같이 비교하면서 보고 쭉 복습을 해보기로 했다
새로 알게된 내용이나 좀 어려웠던 개념 위주로 정리헀다