[내일배움캠프] Node.js 4기 TIL | Day 07 | 24.01.04.(목)

1995년 자바스크립트 탄생
- 넷스케이프 커뮤니케이션(LiveScript → JavaScript)
- 브라우저 동작 스크립트 언어

1999년 자바스크립트 표준화(ECMA-262 완료)

2005년 AJAX 등장
- 비동기 웹 애플리케이션 개발 가능
- 폭발적인 UX(User Experience) 향상

2008년 VS 엔진

2009년 Node.js 등장

- FrontEnd + BackEnd + DB(MongoDB) = FullStack

2015년 ECMAScript6 (ES6) 버전 출시

2016년 프론트엔드 프레임워크(React, Vue, Angular) 대중화, SPA 개발 활성화



JS 언어의 특징

- 객체 지향 프로그래밍 지원
- 동적 타이핑 : 변수를 선언할 때 타입을 지정하지 않음. 런타임 시점에 변수를 할당하는 값에 따라 자동으로 데이터 타입이 결정된다.
- 일급객체(first-class object)란, 함수를 일반 값과 마찬가지로 변수에 할당하거나, 함수의 인자로 전달하거나, 함수의 반환값으로 사용할 수 있는 객체를 의미한다.
- 비동기처리 : 비동기 처리는 작업을 순차적으로 기다리지 않고, 병렬로 처리할 수 있도록 하는 방식이다.
- 클라이언트 측 및 서버 측 모두에서 사용 가능


[변수의 5가지 주요 개념]

- 변수 이름
- 변수 값
- 변수 할당
- 변수 선언
- 변수 참조

변수 선언 : var, let, const



Runtime : Run 하는 Time

코드를 작성할 때가 아니라, 실제 코드가 실행될 때 데이터 타입이 결정된다.

문자열 결합하기 : concat

문자열 자르기 : substr

undefined : 정의되지 않음
null : 값이 존재하지 않음을 '명시적'으로 나타내는 방법

object(객체) : key-value pair

let person = {
	name: 'choi',
	age: 20,
	isMarried: true,
};

비교 연산자 ( ---> true 또는 false를 반환하는 연산자)

1. 일치 연산자(===)

타입까지 일치해야 true를 반환하는 연산자

 

console.log(2 === 2); // true
console.log("2" === 2); // false
console.log(2 === "2"); // false

2. 불일치 연산자(!==)

타입까지 일치해야 false를 반환하는 연산자

 

console.log(2 !== 2); // false
console.log("2" !== 2); // true
console.log(2 !== "2"); // true


// 화살표 함수
// ES6 신 문법

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

// 1-1. 기본적인 화살표 함수
let arrowFunc01 = (x, y) => {
	return x + y;
}

// 1-2. 한 줄로
let arrowFunc02 = (x, y) => x + y;

//
function testFunc(x) {
	return x;
}

// 화살표 함수로!
let arrowFunc03 = (x) => x;

0, "", null, undefined, NaN이 if문의 조건문에 오면 전부 false로 처리된다. falsy한 값이지만!



생성자 함수를 이용한 객체 생성 방법

 

function Person(name, age, gender) {
	this.name = name;
	this.age = age;
	this.gender = gender;
}

let person1 = new Person("홍길동", 30, "남자");
let person2 = new Person("홍길순", 20, "여자");

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

Object.key() : key를 가져오는 메소드

let person = {
	name: "홍길동",
	age: 30,
	gender: "남자",
};

let keys = Object.keys(person);

Object.values

let values = Object.values(person);

Object.entries
key와 value를 묶어서 배열로 만든 배열!! (2차원 배열)

let entries = Object.entries(person);

Object.assign
객체 복사

let newPerson = {};
Object.assign(newPerson, person, { gender: "여자" });

객체 비교
크기가 상당히 커요!! -> 메모리에 저장할 때 별도의 공간에 저장
person1 별도 공간에 대한 주소
person2 별도 공간에 대한 주소
===로 비교했을 때 false 값이 반환된다.
내용이 같아도!

let person1 = {
	name: "홍길동",
	age: 30,
	gender: "남자",
};

let person2 = {
	name: "홍길동",
	age: 30,
	gender: "남자",
};

... : spread operator

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

배열 메소드
1. push
2. pop
3. shift : 앞의 것이 사라짐
4. unshift : 앞으로 들어간다
5. splice : 대신 끼워줘
6. slice : 새로운 배열 만들어서 반환해줘



forEach, map, filter, find

let numbers = [4, 1, 5, 4, 5];

(1) forEach

// 매개변수 자리에 함수를 넣는 것 : 콜백 함수
numbers.forEach(function (item) {
	console.log("item입니다 => " + item);
});

(2) map : 항상 원본 배열의 길이만큼 return 된다.

numbers.map(function(item){
	return item*2;
});

(3) filter : 조건에 맞는 모든 것

 

let numbers = [4, 1, 5, 4, 5];

let filteredNumbers = numbers.filter(function (item) {
	return item > 3;
});

 

result : [4, 5, 4, 5]

(4) find : 조건에 맞는 첫 번째 요소

let numbers = [4, 1, 5, 4, 5];

let filteredNumbers = numbers.filter(function (item) {
	return item > 3;
});

result : [4, 5, 4, 5]

(4) find : 조건에 맞는 첫 번째 요소

let numbers = [4, 1, 5, 4, 5];

let result = numbers.find(function(item){
	return item > 3;
})

console.log(result);

for ~ in문
객체의 속성을 출력하는 문법

 

let person = {
	name: "John",
	age: 30,
	gender: "male",
};

for (let key in person) {
	console.log(key + " : " + person[key]);
}

 

continue;

다음 조건식으로 넘어간다.