JS 1주차 정리 :: 데이터 타입 | 형 변환 | 화살표 함수 | 조건문 | 반복문 | 객체 | 배열

1. JS언어의 역사 & 특징

- AJAX 특정 기능만 새로고침 가능 --> 폭발적인 UX 증가(USER EXPERIENCE:사용자 편리함 경험) 

- 2008년 V8엔진 출시(구글)

- 2009년 NODE.JS --> FRONT + BACK+DB(MONGO) == FULL STACK 가능

- (특징) 객체지향 / 동적 타이핑(let: 변수타입은 런타임때 결정) / 함수형 프로그래밍 / 비동기처리

             클라이언트/서버 모두에서 사용 가능 (node.js)-- 활용도가 좋음

 

2. 변수와 상수

- 노드설치 확인: vs코드에서 01.js파일 생성 후 터미널에 node 파일명.js --> 출력

- 변수 (var, let) / 상수 (const)

- 변수 5가지 주요 개념

(1) 변수 이름 :  저장된 값의 고유 이름 

(2) 변수 값 : 변수에 저장된 값

(3) 변수 할당 : 변수에 값을 저장하는 행위

(4) 변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위 (var,let,const)

(5) 변수 참조 : 변수에 할당된 값을 읽어오는 것

 

3. 데이터 타입 1

- 런타임: JS는 코드가 실행될 때 데이터 타입 결정됨 

-  console.log(typeof 변수); // 데이터 타입 확인 가능

(1) 숫자 

- number (정수 int, 실수 float, 지수 log: 2.5e5 = 2.5 * 10^5)

- Nan : 숫자 아님 (Not a Number)  

- Infinity : 무한대 (1/0)

- (-Infinity) : 무한대 (-1/0)

 

(2) 문자열

- string

- 길이 : str.length

- 결합 : str.concat(str2)

- 자르기 : str.substr(시작점,몇개자를지) / str.slice(시작점,끝점)

- 검색 : str.search(""); // 시작 index 리턴

- 대체 : str.replace("대상","바꿀문구"); 

- 분할 : str.split("분할 기준(,)") > 배열로 리턴 

 

4. 데이터 타입 2

(3) 기타

- True / False

- undefined : 선언하고 값이 할당되지 않음

- null : 값이 존재안함 (개발자가 의도적으로 값이 없음을 명시적으로 보여줌 )

- object (객체) : { key: value }

- array (배열) : [1,2,3,4]

 

5. 형 변환

(1) 암시적: 자동변환

- 문자열 : 문자열+숫자 / true/ {} / null / undefined = 문자열 변환 (더하기 연산자로 문자열 변환 :문자열 우선시 )

- 숫자 : 1 - "2" = -1 (number) (더하기 연산자 제외하고는 숫자가 우선시)

 

(2) 명시적: 의도변환

- boolean(변환값)

: boolean(0); boolean(""); boolean(null); boolean(undefined); boolean(NaN); //false

: boolean("false"); boolean({}); // true

 

6. 연산자 

- ( + , - , * , / , % )

- 할당 연산자 : ( = )  , (+=) 

- 비교 연산자 : true / false 반환

(1) 일치 연산자 (===) : 타입까지 일치해야 true

(2) 불일치 연산자 (!==) : 타입까지 일치해야 false (console.log(2 !== 2); // false (숫자2, 숫자2 다름? 아니! )

(3) 작음 (<), 작거나같음( <=)

(4) 논리 연산자 : ( && ), ( || ) , ( ! ) 

(5) 타입연산자 : typeof

 

*중요*

(6) 삼항연산자

let x = 10;
let result = x > 5? true: false; 
console.log(result); //true

7. 함수

- function () {} 

(1) 함수 선언문

function add(x,y) {
	return x+y;
}

(2) 함수 표현식

let add 2 = function (x,y) {
	return x + y;
}

(3) 함수 호출 : add(2,3); // 5

8. 스코프 및 화살표함수

- 스코프 : 변수가 영향을 끼칠 수 있는 구간

- 화살표 함수 (ES6 신 문법)

//기본 화살표 함수
let arrowFun01 = (x,y) => {
 return x+y;
}

//한줄로 표현 가능 (return이 한줄이여야 가능)
let arrowFun02 = (x,y) => x+y;

 

9. 조건문

- if, else if, else, switch() {}

switch(변수){
	case "a":
     console.log("a");
     break;
     
    case "b":
     console.log("b");
     break;
     
     default:
     console.log("c");
     break;
}

 

10. 조건문 중첩 / 조건부 실행

//조건부 실행 (&&)

if(x>0){ console.log("양수임"); }
= ( x>0 && console.log("양수임");


//삼항 연산자와 단축평가 (||)
let y;
let z = y || 20;

console.log(z); //20

- if문에서 falsy한 값, truthy한 값
if(0,"",null,undefined, NaN) --> false

 

11. 객체

(1) 객체 생성

//1.기본적인 객체 생성 
let person={
	name : "홍길동",
    age  : 20
}

//2.생성자 함수로 객체 생성
function Person(name,age){
    this.name : name
    this.age  : age
}

let person1 = new Person("홍길동",30);
let person2 = new Person("이길동",10);

(2) 객체 접근

- person.name / person.age

 

(3) 객체 메소드(객체가 가진 여러가지 기능 : Object.~~)

- Object.keys(객체명) : key를 가져오는 메소드 :: 배열 반환 // ['name','age'] 

- Object.values(객체명) : value 가져오는 메소드 :: 배열 반환 // ['홍길동',30]

- Object.entries(객체명) : key와 value를 묶어서 배열로 만든 배열 (2차원 배열) 

let person ={
 name:"홍", age :10
};

let entries = Object.entries(person); //[['name','홍'],['age',10]]

- Object.assign(어디에 복사할래?, 뭘 복사할래?) : 객체 복사 

let person ={
 name:"홍", age :10
};

let newPerson={};
Object.assign(newPerson,person);

//age를 20으로 변경하고싶으면
Object.assign(newPerson,person,{age: 20});

- 객체 비교 : 객체는 별도 공간에 대한 주소를 저장하기에 ===으로 비교해도 false임

console.log(JSON.stringfy): 객체를 문자열화 시켜서 비교할 수 있음 (true)

- 객체 병합 : 

중괄호를 없애고 다 풀어헤쳐줘! = {...} 스프레드 오퍼레이터 (ES6)

let person1 = { name : "홍", age : 20};
let person2 = { name : "박", age : 10};

let perfectMan = {...person1, ...person2};

12. 배열 1

(1) 배열 생성

- let fruit = ["사과","배"];

- let num = new Array(5); //크기 지정

- 배열 길이 : 배열.length

 

(2) 요소 접근

- 배열[0], 배열[1], 배열[변수]

 

(3) 배열 메소드

- let fruit = ["사과","배"];

- push : 뒤에 요소 추가 ( fruit.push("포도") )

- pop : 마지막 요소 삭제 ( fruit.pop() --> 사과만 남음)

- shift : 첫번째 요소 삭제 ( fruit.pop() --> 배만 남음)

- unshfit : 첫번째 요소 추가 ( fruit.unshift("키위") )

 

- let fruit = ["사과","배","키위"];

- splice(삭제 인덱스 시작, 삭제 개수, 이걸로 넣어줘) 

  : fruit.splice(1,1,"포도") --> 사과, 포도,키위 (삭제 & 추가)

- slice(시작 인덱스 , 끝 인덱스) : 배열 복사 (시작인덱스 ~ 끝 인덱스까지 :: 끝 인덱스는 미포함)

  : fruit.slice(1,2); //배 (키위 전까지 복사)

 

13. 배열 2 ( 콜백함수 메서드 )

(1) forEach

- 배열.forEach( function(item) { ~~ }); // item: 배열의 요소가 순회로 들어감 

- 매개변수 자리에 함수 넣는 것 : 콜백함수 (4주차)

- return문 필요 없음 ( 새로운 배열 x)

 

(2) map

- let newNum = 배열.map( function(item) {  return item * 2}); // return 필수 

- 기존 배열을 가공해서 새로운 배열을 생산

- [중요] 항상 원본 배열의 길이만큼 리턴됨 

- return문 필요 없음 ( 새로운 배열 )

 

(3) filter

- let filterNewNum = 배열.filter( function(item) {  return 조건 item === 5 }); // return 필수   

- 기존 배열을 가공해서 새로운 배열을 생산

- map과 다르게 조건에 해당하는 길이만큼 리턴됨 

- return문 필요 없음 ( 새로운 배열 )

 

(4) find

- let findNewNum = 배열.find( function(item) {  return 조건 item >3 }); // return 필수   

- 조건에 맞는것만 반환하는데 첫번째 요소만 반환함 ( 조건에 맞는게 3개여도 1개 반환)

- return문 필요 없음 ( 새로운 배열 )

 

14. for 문

-  for(초기값; 조건식; 증감식) { }

-  배열 + for문 :  for(let i = 0; i < 배열.length; i++) { }

-  2의배수만 출력 :( i %2 == 0 ) 

-  for ~ in : 객체의 속성 출력

let person = { name:'홍', age : 20 } 

for(let key in person){ //key: 객체 안의 키 (name, age)
	console.log(key + ":" + person[key]);
    // name : 홍 
    // age :20
}

 

15. while ( break, continue )

-  while(조건) { //증감 , 조건 }

: while(x>10) { 조건, x++ }

- do { console.log(i) i++ } while{ i<10 } : 무조건 한번은 실행 ; (콘솔 1은 무조건 찍힘 )

- for문 + break : 이 지점에서 끝남 (1,2,3,4,끝)

- for문 + continue : 해당 값은 넘어가서 다음값으로 (1,2,3,4,(넘어감),6)

 

 

끝.

 

[출처]

스파르타코딩,  JavaScript 문법 종합반 1주차