📌 Javascript 역사
2005년 ajax 등장
버튼을 눌러서 동작하려면 새로고침이 되야했는데
Ajax가 나오고 편리해짐.
=> 폭발적인 UX(사용자 경험) 향상
2008년 v8엔진 출시(google chrome)로 브라우저의 속도가 빨라짐
2009년 노드js 등장
서버 개발 활성화, js는 브라우저에서 동작하도록 만들어졌음.
브라우저를 깨고 나와서 어디에든 사용할 수 있도록 만든게 Node.js
📌 Node.js는
프론트엔드+백엔드+디비 = ✨풀스택 ✨ 을 가능하게 하는 언어
📌 Javascript 언어 특징
1. 객체 지향 프로그래밍 지원
2. 동적 타이핑
3. 함수형 프로그래밍 지원
4. 비동기 처리
5. 클라이언트 측 및 서버 측 모두에서 사용 가능
절차지향
- 첫번째 일을처리한 다음에 두번째 일을 처리하는 순서대로 프로그램 개발
객체지향
- 데이터와 함수를 객체라는 그룹으로 묶어서 처리합니다.
객체는 상태와 행동을 가지고 있으며, 상태는 객체의 속성(property)이라고도 합니다.
동적 타이핑 언어
- 자바스크립트는 동적 타이핑을 지원하는 언어로서, 변수를 선언할 때 타입을 지정하지 않습니다.
이것은 런타임 시점에 변수에 할당되는 값에 따라 자동으로 데이터 타입이 결정된다는 것을 의미합니다.
c언어나 자바같은 경우, string, char 등 데이터 타입 지정
=> 변수의 타입을 따로 지정하지 않고 코드가 다 짜이고 실행이 될때 (런타임) 데이터 타입이 결정된다.
함수형 프로그래밍 지원
- 자바스크립트는 함수형 프로그래밍을 지원하는 언어로서, 함수를 일급 객체로 취급하고, 고차 함수를 지원합니다.
이를 통해 코드의 재사용성과 가독성을 높일 수 있습니다.
비동기 처리
- 비동기 처리는 작업을 순차적으로 기다리지 않고, 병렬로 처리할 수 있도록 하는 방식
클라이언트 측 및 서버 측 모두에서 사용가능
- 자바스크립트는 클라이언트 측에서만 사용되는 것이 아니라, nodejs를 이용하여 서버측에서도 사용됩니다.
이를 통해 웹 개발 전반에 걸쳐 자바스크립트를 활용할 수 있다.
📌 기본 문법
변수와 상수
기억하고 싶은 값을 메모리에 저장하고 저장한 값을 읽어들여서 재사용한다.
📌 변수의 5가지 주요 개념
변수 이름 : 저장된 값의 고유 이름
변수 값 : 변수에 저장된 값
변수 할당 : 변수에 값을 저장하는 행위
변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위
변수 참조 : 변수에 할당된 값을 읽어오는 것
📌 변수를 선언할 수 있는 3가지 방법 : var, let, const
1. var
var myVar = "Hello World"
var myVar = "var는 똑같은 키워드로 재할당이 가능하다."
myVar = "이것도 재할당 가능"
console.log(myVar);
2. let
let myLet = "Hello World1"
// let myLet = "let은 똑같은 키워드로 재할당 불가"\
myLet = "이 방식으로 재할당 가능"
console.log(myLet);
3. const
const myConst = "Hello World2"
// const myConst = "const는 똑같은 키워드로 재할당 불가"
// myConst = "이것 마저도 불가능"
console.log(myConst);
📌 데이터 타입
1. 숫자
1-1. 정수
let num1 = 10;
console.log(num1); // 출력 결과 : 10
console.log(typeof num1); // 타입 출력 결과 : number
1-2. 실수(float)
let num2 = 3.14;
console.log(num2); // 출력 결과 : 3.14
console.log(typeof num2); // 타입 출력 결과 : number
1-3. 지수형(Exp)
let num3 = 2.5e5;
console.log(num3); 출력 결과 : 250000
console.log(typeof num3); // 타입 출력 결과 : number
1-4. Nan : Not a number
let num4 = "Hello" / 2;
console.log(num4); // 출력 결과 : Nan
1-5. Infinity(무한대)
let num5 = 1 / 0;
console.log(num5); // 출력 결과 : Infinity
console.log(typeof num5); // 타입 출력 결과 : number
1-6. -Infinity(-무한대)
let num6 = -1 / 0;
console.log(num6); // 출력 결과 : -Infinity
console.log(typeof num6); // 타입 출력 결과 : number
2. 문자 : string(문자열 = 문자의 나열) // ' ' = " "
let str = "Hello World!";
console.log(str); // 출력결과 : Hello World!
console.log(typeof str); // 출력결과 : string
console.log(str.length); // 출력결과 : 12
2-1. 문자열 길이 확인하기
let str = "Hello World!";
console.log(str.length); // 출력결과 : 12
2-2. 문자열 결합하기(Concatenation)
let str1 = "Hello,";
let str2 = "World!";
let result = str1.concat(str2);
console.log(str); // 출력결과 : Hello, World!
2-3. 문자열 자르기
let str3 = "Hello, World!";
console.log(str3.substr(7,5)); // 출력 결과 : World
console.log(str3.slice(7,12)); // 출력 결과 : World
2-4. 문자열 검색
let str4 = "Hello, World";
console.log(str4.search("World")); // 출력 결과 : 7
2-5. 문자열 대체
let str5 = "Hello, World!";
let result01 = str5.replace("World", "Javascript")
console.log(result01); // 출력 결과 : Hello, Javascript
2-6. 문자열 분할
let str6 = "apple, banana, kiwi";
let result02 = str6.split(",");
console.log(result02); // 출력 결과 : ['apple', 'banana', 'kiwi']
3. 불리안(Boolean) - true(참), false(거짓)
let bool1 = true;
let bool2 = false;
console.log(bool1); // 출력결과 : true
console.log(typeof bool1); // 출력결과 : boolean
console.log(bool2); // 출력결과 : false
console.log(typeof bool2); // 출력결과 : boolean
4. undefined // un : not, define : 정의하다
let x;
console.log(x); // 출력 결과 : undefined
5. null : 값이 존재하지 않음을 '명시적'으로 나타내는 방법
6. object(객체) : key-value pair
let person = {
name: 'choi',
age: 20
}
7. array(배열) : 여러개의 데이터를 순서대로 저장하는 데이터 타입
let number = [1, 2, 3, 4, 5];
let fruits = ['apple', 'banana', 'orange'];
===============
📌 형 변환
형태 => 바꾼다.
명시적 형 변환, 암시적 형 변환
1. 암시적 형 변환
1-1. 문자열 변환
let result1 = 1 + "2";
console.log(result1); // 출력 결과 : 12
console.log(typeof result1); // 출력 결과 : string
let result2 = "1" + true;
console.log(result2); // 출력 결과 : 1true
console.log(typeof result2); // 출력 결과 : string
console.log("1" + {}); // "1[object Object]" (string)
console.log("1" + null); // "1null" (string)
console.log("1" + undefined); // "1undefined" (string)
1-2. 숫자 변환
console.log(1 - "2"); // -1 (number)
console.log("2" * "3"); // 6 (number)
console.log(4 + +"5"); // 9 (number)
1-3. 불리언 변환 : 어떤 값이 들어있으면 true
console.log(Boolean(0)); // false
console.log(Boolean("")); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean("false")); // true
console.log(Boolean({})); // true
2. 명시적 형 변환
2-1. 문자열 변환
console.log(String(123)); // "123"
console.log(String(true)); // "true"
console.log(String(false)); // "false"
console.log(String(null)); // "null"
console.log(String(undefined)); // "undefined"
console.log(String({})); // "[object Object]"
2-2. 숫자 변환
console.log(Number("123")); // 123
console.log(Number("")); // 0
console.log(Number(" ")); // 0
console.log(Number(true)); // 1
console.log(Number(false)); // 0
======================
📌 연산자
1. 산술연산자
1-1. 더하기 연산자
console.log(2 + 3); // 5
console.log("2" + "3"); // "23"
console.log("2" + 3); // "23"
console.log(2 + "3"); // "23"
1-2. 빼기 연산자
console.log(5 - 2); // 3
console.log("5" - "2"); // 3
console.log("5" - 2); // 3
console.log(5 - "2"); // 3
console.log("five" - 2); // NaN
1-3. 곱하기 연산자
console.log(2 * 3); // 6
console.log("2" * "3"); // 6
console.log("2" * 3); // 6
console.log(2 * "3"); // 6
console.log("two" * 3); // NaN
1-4. 나누기 연산자 ( / )
console.log(6 / 3); // 2
console.log("6" / "3"); // 2
console.log("6" / 3); // 2
console.log(6 / "3"); // 2
console.log("six" / 3); // NaN
1-5. 나누기 연산자 ( % )
console.log(7 % 3); // 1
console.log("7" % "3"); // 1
console.log("7" % 3); // 1
console.log(7 % "3"); // 1
console.log("seven" % 3); // NaN
2. 할당 연산자 (assignment operators)
2-1. 등호 연산자
let x = 10;
console.log(x); // 10
x = 5;
console.log(x); // 5
2-2. 더하기 등호 연산자 ( += )
let x = 10;
console.log(x); // 10
x += 5;
console.log(x); // 15
2-3. 빼기 등호 연산자 (-=)
let x = 10;
console.log(x); // 10
x -= 5;
console.log(x); // 5
2-4. 나누기 등호 연산자 (/=)
let x = 10;
console.log(x); // 10
x /= 5;
console.log(x); // 2
2-5. 나머지 등호 연산자 (%=)
let x = 10;
console.log(x); // 10
x %= 3;
console.log(x); // 1
3. 비교 연산자
3-1. 일치 연산자 (===) + 타입까지 일치해야함
console.log(2 !== 2); // false
console.log("2" !== 2); // true
console.log(2 !== "2"); // true
3-2. 불일치 연산자 (!==)
console.log(2 !== 2); // false
console.log("2" !== 2); // true
console.log(2 !== "2"); // true
3-3. 작다 연산자 (<)
console.log(2 < 3); // true
console.log(2 < "3"); // true
console.log("2" < 3); // true
3-4. 크다 연산자 (<)
console.log(2 > 3); // false
console.log(2 > "3"); // false
console.log("2" > 3); // false
3-5. 작거나 같다(<=) 연산자
console.log(2 <= 3); // true
console.log(2 <= "3"); // true
console.log("2" <= 3); // true
console.log(2 <= 2); // true
3-6. 크거나 같다(>=) 연산자
console.log(2 >= 3); // false
console.log(2 >= "3"); // false
console.log("2" >= 3); // false
console.log(2 >= 2); // true
4. 논리 연산자
4-1. 논리곱(&&) 연산자
console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false
4-2. 논리합(\\) 연산자
console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false
4-3. 논리부정(!) 연산자
console.log(!true); // false
console.log(!false); // true
console.log(!(2 > 1)); // false
5. 삼항 연산자
5-1. 삼항 연산자 (?:)
let x = 10;
let result = (x > 5) ? "크다" : "작다";
console.log(result); // "크다"
6. 타입 연산자
6-1. typeof 연산자
console.log(typeof 123); // "number"
console.log(typeof "123"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof function(){}); // "function"
📌 1. 함수 (functioin)
input과 output을 가지고 있는 기능의 단위
Javascript에서는 함수를 정의하여 코드의 재사용성을 높일 수 있습니다.
📁 input : 함수의 input -> 매개변수(매개체가 되는 변수)
📤 output : return 문 뒤에 오는 값 : 반환 값
1-1. 함수 선언문
function add(x, y) {
return x + y;
}
console.log(add(2, 3)); // 5두 개의 숫자를 입력받아서 덧셈을 한 후 내보내는 함수
1-2. 함수 표현식
let add = function(x, y) {
return x + y;
}
console.log(add(2, 3)); // 51-1 함수랑 기능은 같음
2. 함수 호출하기
2-1. 함수 호출하기
function add(x, y) {
return x + y;
}
console.log(add(2, 3)); // 5
3. 함수 매개변수와 반환값
3-1. 함수 매개변수
function add(x, y) {
return x + y;
}
console.log(add(2, 3)); // 5
3-2. 함수 반환값
function add(x, y) {
return x + y;
}
let result = add(2, 3);
console.log(result); // 5
4. 함수 스코프(scope)
: 변수의 영향 범위
4-1. 전역 스코프
let x = 10;
function printX() {
console.log(x);
}
printX(); // 10
4-2. 지역 스코프
function printX() {
let x = 10;
console.log(x);
}
printX(); //
4-3. 블록 스코프
: 블록이 생성될 때마다 새로운 스코프가 형성
if (true) {
let x = 10;
console.log(x);
}
console.log(x); // ReferenceError: x is not defined
5. 화살표 함수
✨ ES6 신문법 ✨
5-1. 기본적인 화살표 함수
let add = (x, y) => {
return x + y;
}
console.log(add(2, 3)); // 5
5-2. 한줄로 된 화살표 함수
let add = (x, y) => x + y;
console.log(add(2, 3)); // 5
5-3. 매개변수가 하나인 화살표 함수
let square = x => x * x;
console.log(square(3)); // 9
📌 조건문 (if, else if, else, switch)
1. if문
1-1. 기본적인 if문
let x = 10;
if (x > 0) {
console.log("x는 양수입니다.");
}
1-2. if-else문
let x = -10;
if (x > 0) {
console.log("x는 양수입니다.");
} else {
console.log("x는 음수입니다.");
}
1-3. if-else if-else문
let x = 0;
if (x > 0) {
console.log("x는 양수입니다.");
} else if (x < 0) {
console.log("x는 음수입니다.");
} else {
console.log("x는 0입니다.");
}
2. switch문
let x = 0;
if (x > 0) {
console.log("x는 양수입니다.");
} else if (x < 0) {
console.log("x는 음수입니다.");
} else {
console.log("x는 0입니다.");
}
3. 삼항 연산자
let age = 20;
let message = (age >= 18) ? "성인입니다." : "미성년자입니다.";
console.log(message); // "성인입니다."
4. 조건문의 중첩
let age = 20;
let gender = "여성";
if (age >= 18) {
if (gender === "남성") {
console.log("성인 남성입니다.");
} else {
console.log("성인 여성입니다.");
}
} else {
console.log("미성년자입니다.");
}
5. 조건부 실행
let x = 10;
(x > 0) && console.log("x는 양수입니다."); // 출력 결과 : x는 양수입니다.x가 0보다 크면 "x는 양수입니다." 출력.
6. 삼항 연산자와 단축 평가
let x; // undefined
let y = x || 10; // x가 undefined이면 10을 할당해줘.
console.log(y); // 10
7. falsy한 값과 truthy한 값
(= 조건이 될 수 있는 값과 될 수 없는 값)
: ( ) 안에는 조건이 들어가야 한다.
if (0) {
console.log("이 코드는 실행되지 않습니다.");
}
if ("") {
console.log("이 코드는 실행되지 않습니다.");
}
if (null) {
console.log("이 코드는 실행되지 않습니다.");
}
if (undefined) {
console.log("이 코드는 실행되지 않습니다.");
}
if (NaN) {
console.log("이 코드는 실행되지 않습니다.");
}
if (false) {
console.log("이 코드는 실행되지 않습니다.");
}
2. 반복문
1. for문
1-1.기본적인 for문
for (let i = 0; i < 10; i++) {
console.log(i);
}
1-2. 배열과 함께 사용하는 for문
let numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
1-3. for...in문
let person = { name: "John", age: 30, gender: "male" };
for (let key in person) {
console.log(key + ": " + person[key]);
}
2. while문
let i = 0;
while (i < 10) {
console.log(i);
i++;
}
3. do...while 문
let i = 0;
do {
console.log(i);
i++;
} while (i < 10);
4. break문과 continue문
4-1. break문
for (let i = 0; i < 10; i++) {
if (i === 5) {
break;
}
console.log(i);
}
4-2. continue문
for (let i = 0; i < 10; i++) {
if (i === 5) {
continue;
}
console.log(i);
}
4. 배열, 객체 기초
* 객체와 객체 메소드
- Javascript에서는 객체(Object)를 사용하여 여러 개의 값을 하나의 변수에 담고 관리할 수 있습니다.
1. 객체 생성
1-1. 기본적인 객체 생성
let person = {
name: "홍길동",
age: 30,
gender: "남자"
};
1-2. 생성자 함수를 사용한 객체 생성 🎈
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
let person1 = new Person("홍길동", 30, "남자");
let person2 = new Person("홍길순", 25, "여자");
2. 객체 속성 접근
let person = {
name: "홍길동",
age: 30,
gender: "남자"
};
console.log(person.name); // "홍길동"
console.log(person.age); // 30
console.log(person.gender); // "남자"
3. 객체 메소드
3-1. Object.keys() 메소드 : key를 가져오는 메소드
let person = {
name: "홍길동",
age: 30,
gender: "남자"
};
let keys = Object.keys(person);
console.log(keys); // ["name", "age", "gender"]
3-2. Object.values() 메소드 : value를 가져오는 메소드
let person = {
name: "홍길동",
age: 30,
gender: "남자"
};
let values = Object.values(person);
console.log(values); // ["홍길동", 30, "남자"]
3-3. Object.entries() 메소드 : key와 value를 묶어서 배열로 만든 배열 (2차원 배열)
let person = {
name: "홍길동",
age: 30,
gender: "남자"
};
let entries = Object.entries(person);
console.log(entries);
// [['name', '홍길동'],['age','30'],['gender','남자']]
3-4. Object.assign() 메소드 : 객체 복사
let person = {
name: "홍길동",
age: 30,
gender: "남자"
};
let newPerson = {};
Object.assign(newPerson, person);
console.log("newPerson => ", newPerson);
// newPerson => { name: "홍길동", age: 30, gender: "남자" }let person = {
name: "홍길동",
age: 30,
gender: "남자"
};
let newPerson = {};
Object.assign(newPerson, person, { gender: "여자" });
console.log("newPerson => ", newPerson);
// newPerson => { name: "홍길동", age: 30, gender: "여자" }let person = {
name: "홍길동",
age: 30,
gender: "남자"
};
let newPerson = Object.assign({}, person, { age: 35 });
console.log(newPerson); // { name: "홍길동", age: 35, gender: "남자" }
3-5. 객체 비교 ✨
let person1 = {
name: "홍길동",
age: 30,
gender: "남자"
};
let person2 = {
name: "홍길동",
age: 30,
gender: "남자"
};
let str1 = "aaa";
let str2 = "aaa";
console.log("answer => ", person1 === person2) // true
console.log(person1 === person2); // false
console.log(JSON.stringify(person1) === JSON.stringify(person2)); // truestr1과 str2은 string이어서 true
person1과 person2는 객체여서 false
왜? 👉 객체는 크기가 상당히 크다. 메모리에 저장할 때 별도의 공간에 저장한다.
그래서 값을 갖고 있는게 아니라 person1과 person2 각각의 주소를 저장한다.
stringfy 👉 문자열화 시킨다.
3-6. 객체 병합
... : spread operator ( ✨ ES6 신문법✨)
let person1 = {
name: "홍길동",
age: 30
};
let perfectMan = {...person1};
// 위아래 코드가 같은 뜻.
let perfectMan = { name: "홍길동", age: 30 };let person1 = {
name: "홍길동",
age: 30
};
let person2 = {
gender: "남자"
};
let mergedPerson = {...person1, ...person2};
console.log(mergedPerson); // { name: "홍길동", age: 30, gender: "남자" }
📌 배열과 배열 메소드
Javascript에서는 배열(Array)을 사용하여 여러 개의 값을 저장하고 관리할 수 있습니다.
1. 배열 생성
1-1. 기본적인 배열 생성
let fruits = ["사과", "바나나", "오렌지"];
1-2. 배열의 크기 지정
let numbers = new Array(5);
2. 배열 요소 접근
let fruits = ["사과", "바나나", "오렌지"];
console.log(fruits[0]); // "사과"
console.log(fruits[1]); // "바나나"
console.log(fruits[2]); // "오렌지"
3. 배열 메소드
3-1. push() 메소드
let fruits = ["사과", "바나나"];
fruits.push("오렌지");
console.log(fruits); // ["사과", "바나나", "오렌지"]
3-2. pop() 메소드
let fruits = ["사과", "바나나", "오렌지"];
fruits.pop();
console.log(fruits); // ["사과", "바나나"]
3-3. shift() 메소드
javascriptCopy code
let fruits = ["사과", "바나나", "오렌지"];
fruits.shift();
console.log(fruits); // ["바나나", "오렌지"]
3-4. unshift() 메소드
let fruits = ["바나나", "오렌지"];
fruits.unshift("사과");
console.log(fruits); // ["사과", "바나나", "오렌지"]
3-5. splice() 메소드
let fruits = ["사과", "바나나", "오렌지"];
// 0 1 2
fruits.splice(1, 1, "포도"); // 1부터 시작해서 1개를 지우고 "포도"를 끼워줘
console.log(fruits); // ["사과", "포도", "오렌지"]
3-6. slice() 메소드
let fruits = ["사과", "바나나", "오렌지"];
// 0 1 2
let slicedFruits = fruits.slice(1, 2); // 배열 1번부터 2번까지 새 배열로 만들어줘
console.log(slicedFruits); // ["바나나"]
3-7. forEach() 메소드
: 하나하나 작업할 때
let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
console.log(number);
});
// 출력결과
// 1
// 2
// 3
// 4
// 5
3-8. map() 메소드
: forEach와 다르게 return문이 있어야 한다.
기존에 있던 배열의 요소들을 가공해서 새로운 배열 생성.
원본 배열 길이 만큼이 리턴이 된다.
리턴을 안하더라도 해당 그 개수에 undefined가 채워져서 리턴.
let numbers = [1, 2, 3, 4, 5];
let squaredNumbers = numbers.map(function(number) {
return number * number;
});
console.log(squaredNumbers); // [1, 4, 9, 16, 25]
3-9. filter() 메소드
: 조건
let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(number) {
return number % 2 === 0;
});
console.log(evenNumbers); // [2, 4]
3-10. reduce() 메소드
: 배열 원소들의 합 구하기
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
console.log(sum); // 15
3-11. find() 메소드
: 조건에 맞는 첫 번째 값만 반환
let numbers = [1, 2, 3, 4, 5];
let foundNumber = numbers.find(function(number) {
return number > 3;
});
console.log(foundNumber); // 4
3-12. some() 메소드
let numbers = [1, 2, 3, 4, 5];
let hasEvenNumber = numbers.some(function(number) {
return number % 2 === 0;
});
console.log(hasEvenNumber); // true
3-13. every() 메소드
let numbers = [2, 4, 6, 8, 10];
let isAllEvenNumbers = numbers.every(function(number) {
return number % 2 === 0;
});
console.log(isAllEvenNumbers); // true
3-14. sort() 메소드
let numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
numbers.sort(function(a, b) {
return a - b;
});
console.log(numbers); // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]
3-15. reverse() 메소드
let numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); // [5, 4, 3, 2, 1]