[8주차] 3. Javascript 입문(2) & 유용한 문법(1)

Javascript 입문

배열

• 한 변수 혹은 한 상수 안에 여러가지 정보를 담기 위함이었다면 배열은 여러 개의 항목들이 들어있는 리스트와 같다.
• 배열 생성 방법
• 배열을 만들 땐 [ ] 대괄호 사용하고 넣고 싶은 원소(아무거나 가능를 넣어준다.
• 배열 안 원소들은 ,로 구분
• 여러가지 종류를 나열해서 넣을 수 있는 것
• 자바스크립트의 배열은 배열 안에 있는 모든 원소들이 똑 같은 형태(숫자, 문자열, 객체, key: value 형태, 또다른 배열 등)일 필요 없다.
• 객체이름[n]: n번째 항목 조회 가능(0부터 시작, 즉 배열에서 첫번째 항목은 0번째)
• 객체의 정보 받아오기
  • key 값들을 배열 형태로 받아올 때 : Object.keys(객체이름)
  • value 값들을 배열 형태로 받아올 때 : Object.values(객체이름)
  • key와 value 값 함께 배열 형태로 받아올 때 : Object.entries(객체이름)

배열 내장 함수

• 배열 내장 함수 사용시 for, for of, for in 문 등 사용 안해도 됨
• 배열 안 모든 원소 처리 방법 쉽게

length

• 배열의 크기 알아내는 함수, 배열 크기 =배열 안 항목 수 알려줌, 객체이름.length

forEach

• 배열 안 모든 원소 출력
• 배열 안 원소들을 가지고 어떤 작업을 일괄적으로 하고 싶을 때 사용
• 함수 활용해서 사용
• 작성방법
• function 함수이름(배열 내 원소 담을 변수) { console.log(배열 내 원소 담을 변수); }
  배열 이름.forEach(함수이름)
• 배열 이름.forEach(function(배열 내 원소 담을 변수) { console.log(배열 내 원소 담을 변수)}; )
• 화살표 함수 사용
  배열 이름.forEach(배열 내 원소 담을 변수=> { console.log(배열 내 원소 담을 변수)}; )

map

• 배열 안 원소를 모든 원소를 다른 형태로 변환하고 싶을 때 사용
• 배열 안 내용을 가지고 전체적으로 변환해주고 싶을 때 사용하는 함수
• 작성 방법
  • const 함수 이름 = 함수내용
    const 생성할 배열 이름 = 변환시킬 배열이름.map(함수이름);
  • const 생성할 배열 이름 = 변환시킬 배열이름.map(함수 내용);
• map 함수의 parameter는 배열 내 각 원소를 뜻함

text

• 객체.text = 객체를 string화

배열에서 원하는 항목이 어디에 있는지 알려주는 함수

• indexOf와 findIndex는 가장 첫번째로 찾은 원소를 알려줌
• indexOf
  • 특정 값이랑 일치하는 것을 찾을 때 사용
• 배열이름.indexOf
• 특정 항목이 배열에서 몇 번째 원소인지 알려주는 함수
• indexOf 실행 후 console.log로 나오는 값이 -1 이라면 일치하는 값이 없다는 뜻이다.
• findIndex
  • findIndex 내부에 함수를 넣어서 특정 값의 조건으로 찾아서 그게 몇 번째인지 알려주는 함수
• 배열이름.findIndex(parameter)
• 배열 안 원소들이 객체이거나 특정 조건을 확인해야 하는 경우 사용
• 배열 안에 있는 값들이 문자나 숫자, Boolean 이면 찾고자 하는 항목이 몇번째 원소 인지 알고싶을 땐 충분히 indexOf로 찾을 수 있다. 하지만 배열 안 원소 값들이 객체이거나 특정한 값이랑 일치하는 것이 아니라 어떤 조건으로 찾고자 하면 indexOf 사용 불가능
• findIndex에 들어가는 parameter는 함수(화살표 함수로 작성하는 것이 좋음 ex) 변수 => 변수 조건)이다. 특정 조건을 확인해서 그 조건이 일치한다면 일치하는 원소가 몇번째 인지 알려주는 함수
• find
  • findIndex는 몇 번째인지 알려주는 거라면 이 함수는 객체 자체나 숫자 등의 찾은 그 값들을 반환한다.
  • find 내부에 함수를 넣어서 특정 값의 조건으로 찾아서 찾은 값 자체를 반환하는 함수

filter

• 변수 선언 = 배열이름.filter(변수 => 조건)
• 기존 배열을 건드리지 않고 새로운 배열을 만들어 냄
• 특정 배열에서 특정 조건을 가지고 만족하는 원소들만 추출해서 새로운 배열을 만들 때 사용
• 특정 조건을 만족하는 원소들을 찾아서 그 원소들을 가지고 새로운 배열 생성
• 배열에서 특정 조건을 만족하는 원소들만 따로 filtering 하겠다 할 때 사용

splice

• 배열에서 특정 항목을 제거할 때 사용
• 기존 배열을 아예 수정해버림
• 제거하는 과정에서 해당 원소가 몇번째 인지 먼저 새로운 변수로 명시해줘야 함
• 배열이름.splice(제거할 원소의 index가 들어있는 변수, 제거할 원소의 index부터 지울 원소 개수);
• splice의 결과값은 제거하게 된 배열들 의미 그래서 따로 변수를 생성하여 splice 값 지정시 제거된 값들의 배열들을 보여줌

slice

• 배열들을 잘라낼 때 사용
• splice랑 차이점 : 기존 배열을 건드리지 않음, parameter에 넣는 값이 다름
• const 변수 : 배열이름.slice(어떤 index부터 자를지, 어디까지 자를지의 index);
• 어떤 index부터 자를지부터 시작해서 어디까지 자를지의 index 전까지 자름

concat

• 여러 개의 배열을 하나의 배열로 합쳐주는 작업을 해줌
• 변수 = 배열1.concat(배열2);
• 기존의 배열을 수정하지 않는다.
• 새로운 배열을 만들어서 변수에 담는다.

join

• 배열 안의 값들을 separator를 사용해서 하나의 문자열 형태로 합쳐줄 때 사용
• 배열이름.join(parameter);
• parameter는 separator로 어떻게 구분할지를 정의

reduce

• 잘 사용하면 유용한 함수, 그동안의 forEach 등으로 구현해야 했던 내용들을 한줄로 해서 구현 가능
• 배열 안의 모든 값들을 사용하여 어떠한 값을 연산해야 할 때 사용
• 첫번째 parameter : 어떤 누적된 값 계산, 그 값을 계산하는 함수 입력
  • 배열이름.reduce( (accumulator, current, index, array) => { }, accumulator 초기값)
  • accumulator(acc) : 누적된 값
  • current : 현재 배열의 값(각 원소)
  • index : 현재 배열의 index
  • array : 현재 배열
• 꼭 숫자를 연산하는 것이 아닌 다른 용도로도 쓸 수 있다.
• 각 문자열 들이 배열 안에 몇 개 있는지 세서 객체 안에 넣어주는 것 가능

[배열 맨 앞(맨 왼쪽) 기준]

shift

• unshift와 짝
• 첫번째 원소를 배열에서 추출해줌
• 맨 앞의 원소를 배열에서 빼내는 것을 의미한다.
• 기존 배열을 수정하게 됨

unshift

• shift와 짝
• 배열이름.unshift(추가할 원소 값);
• 맨 앞 부분에 괄호 안의 값을 배열에 추가

[배열 맨 뒤(맨 오른쪽) 기준]

push

• pop과 짝
• 기존 배열에 새로운 항목 추가, 객체이름.push(추가항목);
• 원소 추가 시 배열 맨 뒤에 추가pop
• push와 짝
• shift와 비슷
• 맨 뒤서부터 원소를 하나씩 배열에서 빼냄

---

프로토타입과 클래스

객체 생성자

• 함수를 new 키워드를 사용해서 호출하게 됐을 때 어떠한 새로운 객체를 만들게 되고 그 객체 내부에 어떠한 값이나 프로토타입으로 어떠한 함수를 넣어서 내부에서 this를 사용해서 각 객체가 가지고 있는 parameter를 조회해서 기능을 구현할 수 있게 해줌
• 함수를 통해서 새로운 객체를 만들고 그 안에 넣고 싶은 값이나 함수를 구현할 수 있다.
• 객체 생성자를 만들 때는 함수이름을 주로 대문자로 시작
• this는 하나의 객체를 의미
• 객체 생성자 생성 : function 대문자로 시작하는 객체생성자이름(parameter) { }
• 객체 생성자를 통해서 새로운 객체를 만들 때는 new라는 키워드 사용
• 새로운 객체 만들 때 : 변수 선언 = new 객체생성자이름(값들)

객체 생성자 상속하기

• 객체생성자 두개가 거의 똑같은데 두번이나 만들어야 하는 상황에서 할 수 있는 것이 상속이다.
• function 상속받으려는 객체생성자(parameter) {
  상속해주려는 객체 생성자.call(상속받는 객체생성자의 this, 상속해주는 객체 생성자의 parameter들);
  }
  상속받으려는 객체생성자.prototype = 상속해주려는 객체생성자.call;
• 상속 받는 것 : 객체

프로토타입

• 어떠한 공유되는 함수나 값을 설정하는 것
• 객체 생성자로 무언가를 만들었을 때 그것으로 만든 객체들끼리 공유할 수 있는 어떠한 값이나 함수를 자바스크립트의 객체생성자로 만든 함수에다가 프로토타입으로 설정 해줄 수 있는 것이다.
• 모든 객체 생성자에게 공통된 함수를 갖게 함
• 어떤 값을 함께 재사용하고 싶을 때
• 객체생성자이름.prototype.재사용하고자하는변수 = 값;
• 쓸 때는 변수이름.재사용변수

ES6 클래스

• 객체생성자와 프로토타입을 쉽게 사용하기 위해서 만들어진 문법
• 옛날엔 없던 기능이라 비슷한 기능을 객체 생성자와 프로토타입으로 구현해 왔었다.
• 다른 언어에서의 class와 완전 똑같진 않지만 객체생성자와 프로토타입으로 구현한 것보다 더 간략한 문법으로 좀 더 알기 쉬운 문법으로 구현할 수 있게 해줌
• 같은 형태를 가진 객체들에 대해서 객체들의 값이라던지 객체가 가지고 있는 함수라던지 그런그런 것들이 코드관리를 좀 더 깔끔하게 할 수 있다.

class 클래스이름 {
  constructor(parameter) {
  	this 내용
  }
  함수
}

• class 내부에 함수를 만들게 되면 자동으로 프로토타입으로 등록하게 됨
• 주로 class 내부에 만드는 함수를 method라 부름
• constructor
  • 클래스에서 객체 생성자와 비슷한 기능을 하는 것
  • 생성자를 의미
• class 문법 사용시 상속을 해야 하는 상황에서 훨씬 쉽게 할 수 있다.
  • extends
    • 특정 클래스를 상속받는다는 의미를 가지고 있음
    • super라는 키워드를 통해 상속해주는 클래스의 constructor를 먼저 호출해야 함

class 상속받는 클래스 extends 상속해주는 클래스 {
  constructor (상속해주는 parameter) {
    super( 상속해주는 클래스의 contructor 내부의 값 입력);
  }
}

---

Javascript 유용한 문법

삼항 연산자

• 조건 ? 조건 true일시 출력될 내용 : 조건 false일시 출력될 내용;
• 줄 너무 길어지면 ?와 : 앞에서 엔터 치기
• 중첩해서 사용 가능 (가급적 쓰지 않는게 좋음 이럴땐 if문으로 사용하는 것이 좋음)
• 삼항 연산자는 왠만하면 한번만 쓰기

---

Truthy와 Falsy

• 문법이라기 보다는 개념에 가까움
• truthy한 값을 true로, falsy한 값을 false로 바꾸는 방법 : !!바꿀값
• truthy
  • true 같은 것
  • falsy한 값들을 제외한 모든 값
  • truthy한 값에 !붙이면 false 됨
• falsy
  • falsy한 값에 !붙이면 true 됨
  • false 같은 것
• falsy한 값 : undefined, null, 0, ‘ ’ , NaN(Not a Number ex)1 / ’a’ )

---

Tips

• 함수 위에 마우스 올리면 어떻게 사용하는 지 볼 수 있다.
• 변수 === undefined 혹은 변수 === null은 null checking이라 한다.(null checking 할때마다 undefined와 null 둘다 비교해보는 건 조금 별로임 그래서 !변수로 지정)