JavaScript 복습

변수

 
지역 변수
함수 내부에서 var 변수명;
 
전역 변수
함수 내부에서 변수명; 선언하거나
함수 밖에서 변수명; 혹은 var 변수명;
 
*전역 변수와 지역 변수 이름이 동일한 경우에
함수 내부에서 변수명 호출 시 지역 변수가 우선!

---

자료형

 
모든 자료형을 var로 받을 수 있음
리터럴에 의해 자료형을 결정한다.
 
선언 시 자료형 지정하지 않아 변수명으로는 자료형 확인 불가
다라서 변수의 자료형을 확인할 때에는 typeof()를 사용한다. 
 
ex) console.log(typeof (name)); < 변수명 소괄호는 자유
　하지만 코드 가독성과 연산자 우선순위 명확성을 위해 소괄호 사용 권장
 
let 일반적인 변수 선언 (덮어쓰기 가능, 기존 var와 동일)
const 상수 변수 선언 (덮어쓰기 불가능)
 
var는 ES5 / let, const는 ES6이다
 
var는 function scope로 지정된 함수 내에서만 사용 가능하며,
let과 const는 block scope로 {} 안에서만 사용 가능하다.
 
익명 함수 화살표 함수로 바꾸는 법
window.onload = function(){}　// 익명함수
window.onload = () =>{}　// 화살표 함수

---

형변환

 
문자열 숫자 + 연산 시 자바와 비슷하다.
const test1 = 7 + 7 + '7'; // '147'
const test2 = '7' + 7 + 7 // '777'
 
const num = '3'; 을 강제 형변환 시
console.log(Number(num)); → 숫자 3
그 외 parseInt()와 parseFloat()도 있음

---

=== 연산자 !== 연산자

 
== 값만 일치해도 true 반환
===는 값, 타입둘 다 일치해야 true 반환

---

for in 문 / for of 문

 
for in 문은 객체(Object)에 많이 사용 → 인덱스 반환
for of 문은 배열(Array)에 많이 사용 → 값 리턴
 
<배열 안에서 살펴보기>
for in 문을 사용했을 때, 배열 인덱스만 출력되기 때문에
해당 인덱스 안의 값을 가져오기 위해 두 번 작업이 필요.

하지만 배열에 for of문을 쓰면 바로 값을 꺼내와 준다.
 
<객체 안에서 살펴보기>
for in 문을 사용하면 키를 하나씩 다 반환해 준다.
객체의 속성 순서는 보장해주지 않는다. (map과 비슷)

≫ name, age, gender가 반환됨
 
객체는 키-값이 쌍으로 구성되어 for in문을 사용해 속성을 열거하며
반복 가능하지 않기 때문에 for of 문을 사용하면 에러가 난다.

---

배열

 
자바스크립트는 자료형 지정이 따로 없어
한 배열 안에 모든 자료형을 보관 가능함
// 또한 배열에는 주소값이 들어감
 
만약 const arr = [1, 2, 3, 4]; 에
새로운 주소값을 가진 다른 배열을 넣으려 하면
const가 걸린 배열 주소값을 건드리는 거라 에러!
 
하지만 arr[0] = 5; 처럼
하나의 인덱스에 해당하는 값만 변경하는 것은 가능
(주소값을 건들지 않기 때문)
 
배열에는 직접적으로 이벤트를 걸 수 없다!

---

배열 선언 및 초기화

// collection이 가진 특징과 굉장히 유사

크기 지정을 하지 않은 const arr1과 크기를 (3)으로 지정한 const arr2
collection의 특징과 유사하다는 이유는 크기를 지정하든 하지 않든 간에
배열을 추가할 경우 유동적으로 늘어날 수 있다는 점에 있다.
 
아래 arr3과, arr4처럼
new를 이용해 추가하는 방법과 한 번에 배열 안에 넣는 방법도 있다.

---

★ 잠깐, 객체 / 배열 알아보기

 
:: 둘 다 자바스크립트에서 데이터를 구조화할 때 사용되는 데이터 타입
 
배열은?
－순서가 있는 데이터 컬렉션
－제로 인덱스 기반 (각 데이터 요소는 0부터 시작)
－'[ ]' 대괄호로 감싸서 생성 
－'push()'나 'pop()' 같은 배열 메소드로 요소 추가/삭제
 
배열도 객체의 일종으로 배열 객체에는 여러 내장 메소드 존재
아래 나올 예정이나 . 을 사용해 array.pop(); 등으로 접근
 
 
객체는?
－이름이 지정된 데이터 요소들의 모음
－키+값 쌍으로 구성
－'{ }' 중괄호로 감싸서 생성
－' . '점 연산자나 '[ ]' 대괄호로 객체 프로퍼티에 접근 가능
－내부 멤버는 프로퍼티와 메소드로 구분
 
＊프로퍼티(property) : 속성
－객체(object)는 속성 또는 멤버를 가질 수 있는데 이를 프로퍼티라 일컫음
　(객체가 가지고 있는 값으로 이름과 값의 쌍으로 구성되어 있음)
－JavaScript에서 객체는 프로퍼티를 가진 컨테이너(container)
－프로퍼티는 객체를 구성하는 중요한 요소
 
ex)
let person = {
  name: 'John',
  age: 30,
  gender: 'male',
  sayHello: function() {
    console.log('Hello!');
  }
};
≫ 위 person 객체는 name / age / gender / sayHello 총 4개 멤버를 가짐 
　여기서 name / age / gender는 프로퍼티, sayHello는 메소드(method)
≫ 객체의 멤버에는 .이나 []를 사용해 접근할 수 있는데,
　프로퍼티와 메소드는 모두 멤버이기 때문에 동일한 방법으로 접근
　ex) person.name / person[‘age’] / person.sayHello() 등...

---

배열 객체 함수

 
1) indexOf
배열 내 객체의 인덱스 번호를 반환
// 제로 인덱스 기준, 없으면 0을 반환
ex) console.log(arr.indexOf('귤')); 
 
2) concat
연결지어주는 연산자
ex) const arr3 = arr1.concat(arr2);를 하면
　arr1과 arr2가 순서대로 연결돼 출력된다.
 
3) join
배열들을 결합해 문자열로 반환시켜주는 함수
ex) 배열 arr 안에 있는 것들을 join()하면
　const arrJoin = arr.join();
　console.log(arrJoin); → 결합되어 한 줄의 문자열로 반환됨
 
－join() 소괄호 안에 내가 원하는 구분자를 넣어 변경 가능
만약 아무 구분자도 넣지 않는다면 자동 쉼표로 구분한다　
 
4) reverse
배열 순서를 거꾸로 뒤집는 것
// 원본 배열의 순서를 아예 뒤집어버림
ex) arr = [1, 2, 3];
　console.log(arr.reverse()); → [3, 2, 1]
 
5) sort
안의 들어오는 값을 문자열로 바꾸어 정렬
// 문자열을 기준으로 정렬
 
ex) 숫자를 기준으로 오름차순 정렬하고 싶다면?
console.log(arr.sort((left, right) =>{
　return left-right;
}));　　
≫ 제대로 정렬 가능 / 내림차순은 반대로!
≫ 매개 변수 (left, right) / 반환 값은 left-right
 
★ 위 한 줄 코드의 화살표 함수를 간단히 작성하기
console.log(arr.sort((left, right) => left-right));
 
6) push와 pop
push는 마지막에 요소를 집어넣는 역할
pop은 마지막의 요소를 꺼내주는 역할
 
7) shift와 unshift
shift는 맨 앞의 있는 값을 제거해 값을 반환
unshift는 맨 앞에 값을 추가하며 해당 배열의 length를 반환
 
8) slice와 splice
slice는 원본 배열에 영향 없음
 
slice는
－예를 들어 arr.slice(2, 4);라 했을 때
4는 포함하지 않고 2, 3의 값만 뽑음
 
splice는
－예를 들어 arr.splice(2, 2);라 했을 때
인덱스 2부터 2개를 뽑아내는 것이다.
－만약 arr.splice(2, 2, 'spring');이라 하면
인덱스 2개가 빠진 자리에 'spring'이 대체
 
9) toString
객체가 가진 정보나 값을 편히 반환할 수 있도록 오버라이딩 한 것
 
－toString은 주소값을 반환하며 모든 객체는 주소값을 가지고 있다
－toString은 대표값을 갖고 있으니 그 주소값 대신 정보나 값을 대표로 반환하도록 한다
 
만약 arr.toString(); 해서 결과를 보면 왜인지 join()과 비슷하다는 생각이 든다
하지만 다른 점은 join() 같은 경우 내가 원하는 구분자를 활용해 합칠 수 있으나
toString()은 무조건 ' , ' 쉼표로만 프로퍼티(값)들을 나열할 수 있다.
 

★

객체(Object)는 여러 개의 프로퍼티(property)로 구성
프로퍼티는 이름(key)와 값(value)로 구성되어 있음.
즉 프로퍼티는 객체 내부에 저장된 정보의 일부분으로
값은 해당 정보를 나타내는 데이터인 셈
 
배열(Array) 또한 객체의 일종으로
배열의 각 요소(element)는 인덱스(index)라는 이름(key)과
해당 요소의 값(value)로 구성된 프로퍼티로 볼 수 있다
(배열의 각 요소도 객체 프로퍼티와 마찬가지로 이름(key)과 값(value)로 구성)
 
∴ 프로퍼티는 객체 내부에 저장된 정보를 나타내는 이름(key)와 값(value)의 쌍으로 이루어짐
＋값(value)는 프로퍼티가 가리키는 정보를 나타내는 데이터
＋이름(key)는 해당 프로퍼티를 식별하기 위한 레이블(label) 역할
 
10) ...연산자
배열 내부나 객체에서 사용 가능한 연산자

---

함수

 

---

<자바스크립트 관련>

1) innerText / innerHTML 과 value
사용자가 값을 입력할 수 있는 경우는 value (select / intput type='checkbox', 'radio', 'text', 'number' 등)
사용자가 값을 입력할 수 없고 출력만 하는 경우는 innerText, innerHTML (div, p 태그 등)
하지만 값을 입력하고 싶은 경우 document.getElementById('??').innerText = ' '; 이런 식으로 가능!
 
- 값을 빼올 때 innerText는 text만 나오고, innerHTML은 HTML 코드까지 나옴
- 값을 넣을 때 태그가 있는 경우 innerText는 코드 인지 못 해서 다 넣어지고 되고,
innerHTML은 코드(예를 들면 태그)를 인지해서 코드 뺀 것들만 넣어짐
 
 
2) 배열에 이벤트 발생 못 함
≫ 안의 요소에 각각 이벤트를 걸어야 하고, 배열 자체에는 이벤트를 걸 수 없다.
 
 
3) for문 세 가지
일반 for문 : ++ 되기 때문에 let 사용 (const 틀림)
≫ const는 상수를 선언하는 키워드로 값의 변경을 막기 때문에
　변수를 선언할 수 있는 키워드 let을 사용하여 값의 변경을 허용해야 함
≫ 값이 변경될 가능성이 있는 경우는 let을 사용해 변수 선언
 
for in : const 사용 (배열은 인덱스, 객체는 키 뽑음)
for of : const 사용 (배열 안의 요소, 엘리먼트 뽑음)
 
+) const(상수)의 값이 객체나 배열인 경우 그 안의 요소는 변경 가능
≫ 객체나 배열 자체는 수정할 수 없지만 내부 요소들은 수정할 수 있다. (키의 값만 수정하는 등..)
 
 
4) 정규표현식
 
 
5) this는 function(){} / 화살표 함수 사용 불가
 
 
6) 자바스크립트 이벤트
 
 
7) 자바스크립트 배열

8) 요소 찾기

---