JS 문법 종합반 1주차 (수정2차,,,,,1차본 날아감,,,,,,,,)

JS 역사

1995년에 자바 스크립트가 탄생했는데, 현재 Java Script로 알려진 js는 원래 LiveScript였는데 갑자기 js로 바뀌었다고 한다. 즉 java와는 관련이 없다는 말씀,,,!

이후 2005년 AJAX가 등장하면서 ux가 폭팔적으로 향상했다.

- ux(User Experience) 유저들이 얼마나 편하게 웹을 이용하는가 

 

그 뒤로 4년 후인 2009년 node.js가 등장하고 서버 개발이 활성화 되면서 JS는 하나의 언어로 프론트, 백, DB가 가능한 풀스택 언어가 되었다.

JS 특징

객체지향과 절차지향

절차지향은 첫 번째 일을 처리한 다음에 두 번째 일을 처리하는 것인 반면, 객체 지향은 어떠한 역할을 가진 객체라는 그룹으로 묶어서 객체라는 그룹 단위로 프로그래밍을 수행(처리)하는 것이다. 객체 단위로 묶으면 여러군데에서 재활용이 가능하며, js는 동동적 타이핑언어이다. 다른 언어에서는 변수를 지정할 때 변수의 타입을 지정하지만, JS는 런타임에 그것이 지정된다.

---

js주석 : //주석
파일 실행:node 파일명.js
선택된 부분 주석으로 만들기 : Ctrl + /

변수

변수는 주소를 가진 저장소로, 변수를 선언한다는 것은 a라는 저장소를 사용한다고 공표하는 것이고, 할당은 그 공표한 것에 값을 넣는 것이다.

변수의 5가지

• 변수 이름:저장된 값의 고유 이름
• 변수 값: 변수에 저장된 값
• 변수 할당: 변수에 값을 저장하는 행위
• 변수 선언: 변수를 사용하기 위해 컴퓨터에 알리는 행위
• 변수 참조: 변수에 할당된 값을 읽어오는 것
  ex) let mylet = "핼로 월드" (순서대로 변수 선언, 변수 이름, 변수 할당하면서 변수 값)

JS변수는 총 3가지로 각각 var let const이다.
그렇다면 이 3개의 변수가 각각 무엇이 다른가 싶은데, 

var

• 함수 스코프를 가지며, 재선언과 재할당이 가능하다.
• 선언과 초기화 (맨 처음 할당) 이 한번에 일어난다. ← undefined
• 만약 값을 넣지 않는다면, undefined가 들어가게 된다.

let

• 블록 스코프를 가지며, 재선언이 불가능하지만 재할당은 가능하다.
• 선언만되고 초기화는 안 된다.

const

• 블록 스코프를 가지며, 재선언과 재할당이 불가능하다. 반드시 선언과 동시에 초기화해야 한다.
• const 로 선언된걸 우리가 상수 (변하지 않는 값) 이라고 표현한다.

요약하자면

1. var은 다른 변수와 다르게 같은 변수명으로 다시 선언할 수 있지만, 다른 변수들은 오류가 난다.
2. var let은 이미 할당된 값에 재할당이 되지만, const는 재할당이 되지 않는다.
3. var은 최대한 사용하지 않는 것이 좋으며, 보통 let을 자주쓴다. 이다.

---

데이터 타입

typeof로 데이터 타입을 알 수 있다.

 

num 타입

num 타입은 정수, 실수, 지수등이 있으며, 지수는 2.5e5이런 식으로 표현할 수 있다. 여기서 e 뒤의 숫자가 몇 승인지 가리키고 있는 것이다. 즉, 2.5의 5제곱을 나타내는 것.

이 외에도 NaN은 숫자가 아님을 명시. Infinity는 1/0을 했을 때 출력. -1/0은 -Infinity가 나온다.

string 타입 (문자열=문자의 나열)

abc.length : abc가 가지고 있는 문자열의 길이 확인
문자열을 결합하고 자르는 등의 방법

문자열 결합하기

문자열 변수 2개 선언 -> 결과 변수 선언 = str1.concat(str2); //concat자세히 조사

문자열 자르기

abc.substr(7,5) : 시작 위치(7)부터 5개 출력
abc.slice(7, 12) : 시작하는 부분부터 끝 위치까지 지정

Q. 띄어쓰기도 포함인가?

문자열 검색

str.search("world") : world가 시작되는 지점을 찾는 것

문자열 대체

str.replace("world", "JS")

문자열 분할

str.split(",") : 콤마를 기준으로 합쳐져 있던 게 나뉘어짐

Boolean : true/false
* 작성 시 ",' 넣으면 안 됨.

undefined : 변수를 선언하고 값을 할당하지 않으면 나옴. 변수가 초기화 되지 않았음을 나타낸다.

null : 값이 존재하지 않음을 '명시적'으로 나타낸 것.
undefined는 값을 넣지 않으면 나오지만, null은 null이라고(따옴표 없이) 넣어야한다.

---

객체

객체의 데이터 타입은 참조형 타입으로, 참조형 타입은 객체 자체가 하나의 주소값에 들어가 있는 게 아니라, 객체 주소 따로 안의 프로퍼티들 주소로 따로 들어가게 된다.

예시

객체는 key - value pair를 기억하고 있어야 하는데, 여기서 key, value란

let person = {
    name: "유현지", 
    age: 21,
}

 

여기서 name이 key, 유현지가 value를 의미한다. 그리고 객체의 type를 출력하면 object가 나온다.

+) {} 이렇게 표현하는 걸 객체 리터럴이라고 한다.
 

배열

여러 개의 데이터를 순서대로 저장하는 데이터 타입으로, 비슷한 속성의 값들이 여러 개 필요할 때 쓴다.
let num = [1,2,3,4,5];
배열은 각각 index를 가지고 있다. 여기서 index란 위치에 대한 데이터이다.

+) 당연히 0부터 시작이다.

 

배열 생성

let num = ["1", "2"] 이런 식으로 대괄호 안에 콤마로 항목들을 늘릴 수 있다.
+) num.length를 하면 2가 나온다.

크기 지정

let num = new Array(5); 이렇게 크기를 지정해서 만들 수도 있다.

요소 접근

num[0] 이런 방식으로 접근할 수 있다.

배열 메소드

1. push : num.pusth("3")이렇게 작성하면 위의 num을 출력했을 때 [1,2,3] 이렇게 나온다.
2. pop : 배열에 있던 마지막 요소를 사라지게 하는 것이다. num.pop();을 하면 1만 나오게 되는 것.
3. shift : 배열에 있는 첫 번째 요소를 사라지게 하는 것. num.shift();를 하면 2만 나오게 되는 것
4. unshift : 배열의 제일 앞에 요소를 추가하는 것. num.unshift("0");을 하면 [0,1,2]이렇게 나온다.
5. splice : 형식은 num.splice(0,1,"3") 이렇게 생겼는데, 첫 번째(0)부터 1개를 지우고 거기에 3을 넣어달라는 말이다. 
6. slice : 형식은 let newNum = num.splice(0,1) 이것인데, 이는 첫번째부터 두번째 전까지 새로운 배열로 만들어서 반환해달라는 것이다.

객체와 배열의 구분

같은 값이 있는데 한 가지 변수를 표현하는데 속성이 여러개면 객체, 여러 사람이 있으면 배열이다.

---

형변환

형변환은 자바스크립트의 데이터 타입을 바꾸는 것이다.
명시적 형변환은 개발자가 의도적으로 바꾸는 것이지만, 암시적 형변환은 개발자의 의도가 없었지만 자동으로 바뀌어지는 것이다.

암시적 형변환

1. 1+"2" -> string

2. 더하기 연산자가 아니고 빼기나 곱하기 나누기는 숫자가 나오고 문자는 숫자로 바뀐다

더하기 연산자로 문자와 숫자가 만나면 문자열이 된다.

문자열과 어떠한 다른 데이터 타입이 만나면 문자열이 우선시 되기 때문에 다 문자열이 된다.

명시적 형변환

1.  boolean(데이터 타입); 이렇게 해서 괄호 안에 넣으면 false (0, "", null, undifined, NaN) 빈문자열은 false
값이 있는 문자열은 true, 객체는 값이 비어도 true다.

2. String(데이터 타입); 안에 데이터 타입이 무엇이든 string으로 나오며, 출력은 안에 입력한 값 그대로 나온다. 

3. Number(데이터 타입); 문자열을 넣어도 num으로 나온다.

---

연산자

나머지 연산자 : %
더하기 등호 연산자 : +=

a +=5; a에 5더한 것. a = a+5 와 같음. 빼기, 곱하기도 같게 진행된다.

 

⭐비교 연산자⭐

일치 연산자 : === 타입까지 일치해야 true를 반환한다.
불일치 연산자 : !== 타입까지 일치해야 false를 반환한다.
ex)  2 !==2 false
      "2" !==2 true

+) 주의. ===는 타입까지 판단하지만, ==는 타입은 판단하지 않으므로 쓰지 않는 게 좋다.

논리 연산자

논리곱 연산자 : a && b 모두 true일 때 true반환
논리함 연산자 : a || b 두 값 중 하나라도 true일 때 true반환
논리 부정 연산자 : ! 값을 반대로 바꾼다 (많이 사용됨)

⭐삼항 연산자⭐ : a > 5 ? "크다" : "작다" a>5가 true일 경우 크다 출력, 아닐 시 작다가 출력. 즉 ? 뒤는 true인 경우 : 뒤는 false인 경우
타입 연산자 : typeof

---

함수 = function(기능)
input, output을 가지고 있는 단위

함수 선언문
function 함수명(매개변수) {
//함수 내부에서 실행할 로직
}

함수 표현식
let add2 = function (x,y) {
return x+y;
}

함수 호출(=사용한다)
함수명(입력값) -> add(2,3)

함수의 인풋 : 매개변수(매개체가 되는 변수)
아웃풀 : 리턴문 뒤에 오는 값 : 반환값

---

scope : 변수의 영향 범위

전역변수, 지역변수, 화살표 함수

전역 변수는 함수 밖에 선언되어서 어디에서든지 사용할 수 있으나, 지역변수는 함수 내부에서 선언되어서, 선언된 함수 내부에서만 사용할 수 있다.
ex)

let a; //전역변수
function (x,y) {
	let b; //지역변수
}

화살표 함수
function 함수명(매개변수) {
return x+y
}
위 형식을 더 간단하게 만든 것. 만드는 방법은

기본적인 화살표 함수
let aw01 = (x,y) => {
return x+y
}

한 줄로
let aw01 = (x,y) => return x+y
이건 안에 실행문이 1줄일때만 가능. 
console.log(x+y)
console.log(x+z) 이런 경우는 불가능
중괄호 반드시 삭제

매개변수 한 개일 때
let aw01 = x => x

---

조건문 if, else, else if, switch가 있다.

switch는 변수의 값에 따라, 여러 개의 경우(case) 중 하나를 선택하는 것이다.

switch(fruit){
case "사과";
console.log("사과입니다.");
break;
default ~~
~~
break;
}
이런 느낌

---

조건부 실행
(x > 0) && console.log("x는 양수입니다")
원래는 if를 써서 문장이 길어지는 것을 and 연산자를 이용해 간단하게 만든 것이다

삼항 연산자와 단축평가
let y; //y에는 undefined
let z = y || 20; //y에 값이 없으면 기본적으로 20을 세팅해달라는 것

조건문에 들어갈 수 있는 것
true를 제외하고는 false가 된다. NaN이나 undefined이나 "", 0같은

---

생성자 함수를 이용한 객체 생성 방법
function person(name, age, gender){
this.name=name;
this.age=age;
this.gender=gender;
}

let person1 = new person("유현지",21,여자);

접근하는 방법
person.name

객체 메소드 (객체가 가진 여러가지 기능 : object.~)
1. object.key() : key를 가져오는 메소드, 괄호 안에 객체명을 넣으면 된다.
2. object.values() : values를 가져오는 메소드, 사용법은 위와 같다.
3. object.entries() : 이차원 배열로, key와 values를 묶어서 배열로 만든 것이다.

assign 객체 복사
object.assign(새로운 객체 이름, 기존 객체 이름), 만약 항목을 바꾸고싶다면 기존 객체 이름 옆에 중괄호로 키-밸류를 적으면 된다.
object.assign(newPerson, Person, {age:31});

객체 비교
단순하게 person1 === person2 를 하면(안에 키밸류 같다는 전제 하) 값이 false가 나온다. 왜냐하면 객체명은 객체 안의 키밸류들이 있는 주소를 가지고 있는 것이기 때문에 안의 내용물들은 같더라도 주소가 다르기 때문에 false가 나오는 것이다.
그렇다면 이 객체를 비교하기 위해서 사용하는 것은 JSON.stringify(객체명)이다. stringify는 객체를 문자열화 시키는 것이기 때문에 같을 수밖에 없는 것이다.

객체 병합
1에는 name, 2에는 age가 들어있다고 가정할 때 이 1과 2를 병합시키는 방법은 다음과 같다.
let perfectMan={...person1, ...person2};은
let perfectMan={name: "유현지",  age: 21};와 같다.

---

forEach
매개변수 자리에 함수를 넣어주는 것은 콜백함수
num.forEach(function(item){
});
item에 num에 있는 각 요소들이 하나하나 들어가면서 순회를 돈다.

map
new num2 = num.map(function(item){
return
});
map은 반드시 return이 필요하다. 그리고 항상 원본 배열의 길이만큼이 return된다.

filter
new num2 = num.filter(function(item){
return item > 3;  //3초과의 숫자만 가져온다
});
말 그대로 필터링한 요소만 가지고 온다.

find
num.find(function(item){
return item > 3;  //3초과의 숫자만 가져온다
});
??



for ~ in 문 : 객체의 속성을 출력하는 문법
for (let key in person){
console.log(key+":"+person[key]);
}

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

do while
let i = 0;
do{
console.log(i);
i++
}while(i>10);

break는 멈추는 것 continue 순서를 넘어가는 것

---

참조타입과 원시타입

백틱은 문자열로 안에 공백과 줄바꿈이 들어갈 수 있다. 

하나의 어떤 값을 표현하는데 있어서 여러가지 속성이 필요하다 -> 객체
ex) 사람

키는 값을 부르기 위한 이름, 

const로 객체를 생성했을 때는 객체 자체를 바꿀 수는 없으나, 객체 안의 속성값은 바꿀 수 있다. 
a= 1;불가능, a.age = 30; 가능

원시타입은 하나하나의 속성을 나타내는 것

const는 값을 입력하고 그 값이 주소에 저장되면 잠기는 느낌 그래서 재할당이 안 되지만, 객체와 배열은 선언시 주소에 주소가 할당되고 그 주소 안으로 들어가면 배열의 항목들이 들어가는 느낌

선언과 표현식은 어떻게 다른지
바로 함수선언인지 변수를 함수로 초기화 하는건지 함수


q&a
console.log(true || "something"); 이걸 실행했을때 true가 나오는 이유는 JS가 ||까지 읽고 앞에 true가 있으니 something은 스킵하는건가요?

|| 연산자는 앞에 조건이 참일 경우 참을 반환합니다! 20대 30대는 모조리 환영하는 모임이 있다고 하면 20대임을 확인했을때 30대인지 여부를 물어볼 필요가 없겠죠? 그런데 20대가 아니면 30대인지를 한번 더 확인한다고 그런느낌으로 보시면돼요!