2주차 WIL

이번주에 알아야 할 것

---

JS 함수와 객체

함수는 프로그램을 구성하는 주요 구성 요소 중 하나이다. 함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러 번 호출할 수 있다.

 

1. 함수 표현식 과 함수 선언문의 차이- 생성되는 시점 : 자바스크립트는 스크립트가 실행되기 전 전역에 선언되어 있는 함수 선언문을 찾아서 생성시킨다. 그렇기 때문에 선언문으로 만들어 진 함수는 어디에 위치하든 사용할 수 있다. 하지만 표현식으로 만들어 진 함수는 실행 흐름이 해당 함수에 도달했을 때 함수를 생성하므로 표현식이 실행되기 이전에 사용할 수 없다.- 스코프 : 함수 선언문은 코드 블록내에 위치하면 블록 밖에서는 함수에 접근하지 못한다. 예를 들어 어떤 조건에 따라 다른 함수를 선언해야 할 때, 함수 선언문을 사용하면 조건문안에서 선언한 함수를 조건문 밖에서 사용할 수가 없습니다. 하지만 이때 표현식으로 사용하게 되면 변수를 조건문 밖에서 만들어둔 후 그 변수안에 함수를 할당해줄 수 있기 때문에 블록 밖에서도 사용할 수 있습니다.2. 화살표 함수 (let 변수 = (인수1,인수2...) => 표현식)  표현식이 여러줄이라면 {}를 사용한다.

let sum = (a,b) => a+b;

3. 나머지 매개변수(...)과 arguments객체

함수에서 사용할 인수 외의 입력된 여분의 인수를 하나로 배열에 담아두는 것 (...변수이름)으로 사용한다. 나머지 매개변수는 기존에 선언된 매개변수에 해당하는 인수를 뺀 나머지를 담아둘 수 있으나 atguments 객체는 입력되는 모든 인수를 담는다.

※ 배열을 바로 함수의 인수로 사용할 때 (...배열의 변수이름)으로 사용할 수 있다. (스프레드 문법)

let list = [1,2,3,4,5,6,7]
Math.max(...list)

---

객체는 다양한 데이터를 담을 수 있는 자료형이다. 중괄호 안에 프로퍼티를 여러개 넣어서 만든다.

1. 객체의 key를 변수로 받는 경우와 value 를 변수로 받는 경우

객체의 key를 변수로 받을 때 []안에 넣어주면 되며 value값을 변수로 받는 경우에는 값 부분 생략 가능

let fruit = 'apple';
let bag = {
  [fruit + 'Computers']: 5 
};

function makeUser(name, age) {
  return {
    name,
    age,
  };
}

 

2. 메서드와 this

아래 처럼 단축 구문을 사용해서 객체 내에 메서드를 바로 만들 수 있다. 메서드는 보통 객체 내에 있는 자료를 사용하는 경우가 많은데 아래처럼 메서드 내부에서 this 키워드를 사용해서 객체의 정보에 접근할 수 있다. this를 포함한 함수를 밖에 만들고 각각 다른 배열에서 호출하여 사용할 수도 있다.

user = {
  name: "John",
  age: 30,	
  sayHi() { // "sayHi: function()"과 동일합니다.
    console.log("Hello",this.name);
  }
};

 

3. new 연산자와 생성자 함수

new 연상자와 생성자 함수를 사용하면 유사한 객체 여러개를 쉽게 만들 수 있다. 아래와 같이 하나의 생성자 함수를 만들어서 name 값이 다른 두개의 객체를 만들 수 있다. 생성자 함수에도 매서드를 활용할 수 있다.

function Hello(name){
	this.name = name;
    this.isAdmin - false;
}
let user = new Hello('hyunju')
let user2 = new Hello('bella')

---

데이터 타입 

자바스크립트는 동적 타이핑 언어이기 때문에 사용자가 직접 타입을 지정해줄 필요는 없지만 타입이 없는 것은 아니다. 자바스크립트의 언어 타입은 원시 값과 객체로 나눈다. 원시 값에는 String, Number, Boolean 등이 있다.

typeof를 사용해서 자료형을 확인할 수 있다. 아래의 경우 각각 boolean 과 number가 출력된다.

typeof true 
typeof 0