1. 객체지향 프로그래밍 지원 => 순차적으로 처리가 아닌 객체라는 그룹으로 묶어서 처리
2. js는 동적타이핑을 지정한다.
3. 변수의 타입을 따로 지정을 하지 않아도 된다. => runtime에 결정이 된다
4. 비동기 처리방식 => 병렬로 처리할 수 있도록
5. 클라이언트, 서버 모두 사용 가능 => Node.js를 이용해 서버에서도 사용가능

변수를 선언하는 3가지 방법

변수	var	let	const
재선언	가능	불가능	불가능
재할당	가능	가능	불가능

• var : 가장 많이 쓰이긴 하지만 표준은 아님
• let : 현재 표준안. 중요도 : ★★
• const : 현재 표준안. 중요도 : ★

데이터 타입 과 형 변환

1. 데이터 타입

1-1. 숫자 - 정수, 실수, 지수형, 무한대, Nan(Not a Number)
1-2. 문자 - string 문자열

• 문자열 길이 확인 .length 붙이기
• 문자열 합치기 .concat 사용

let str1 = "Hello, ";
let str2 = "World!";
let result = str1.concat(str2);

-console-
Hello, World!

• 문자열 자르기

let str3 ="Hello, World!";
str3.substr(7,5) //시작위치부터 몇개까지 자르는지
str3.slice(7,12) //시작위치부터 몇번전까지 자르는지

-console-
World

• 문자열 검색

let str3 ="Hello, World!";
str3.substr("World") //시작위치부터 몇개까지 자르는지

-console-
7

• 문자열 대체

let str3 ="Hello, World!";
str3.replace("World","JavaScript") //시작위치부터 몇개까지 자르는지

-console-
Hello, JavaScript!

• 문자열 분할

let srt6 = "apple,banana,kiwi";
let result = str6.split(",");

-console-
['apple', 'banna', 'kiwi']

1-3. 불리안(Boolean) 참/거짓
1-4. undefined -> 값이 할당되지 않은 값
1-5. null -> undefined 와 다름, 사용자가 직접 설정한 값
1-6. 객체 (Object) - key, value
1-7. 배열 (Array) - []

2. 형 변환

명시적 형 변환, 암시적 형 변환

암시적 형 변환

2-1. 문자열 => +는 문자우선 ex) 숫자+문자 = 문자
2-2. 숫자 => +를 제외한 나머지 연산자는 숫자우선

명시적 형 변환

2-3. 불리안

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-4. 문자열

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-5. Number

console.log(Number("123"));   // 123
console.log(Number(""));      // 0
console.log(Number("  "));    // 0
console.log(Number(true));    // 1
console.log(Number(false));   // 0

3. 연산자

3-1. 더하기 연산자 + 우선순위 문자
3-2. 빼기 연산지 - 우선순위 숫자
3-3. 곱하기 연산자 *
3-4. 나누기 연산자 /
3-5. 나머지 연산자 %
3-6. 할당 연산자 (assignment) =, +=, -= 등등
3-7. 비교 연산자 ===, !==, <= 등등
3-8. 논리 연산자

• 논리곱 연산자 && : 모두 true일 때 true 반환
• 논리합 연산자 || : 두값중 하나라도 true일 때 true 반환
• 논리부정 연산자 ! : 값을 반대로 바꿈
  3-9. 삼항 연산자 - 조건에 따라 값을 구분한다
• 조건 ? 참이면 여기를 출력 : 거짓이면 여기를 출력;
  3-10. 타입 연산자 typeof

4. 함수

• function 기능

1. 함수 선언문

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

2. 함수 표현식

let add = function (매개변수){
	//함수 내부에서 실행할 로직
}

3. 함수 호출

add(2,3)

4. 스코프(범위, 변수의 영향범위), 전역변수, 지역변수

• 전역변수 : 전체에 영향을 끼치는 변수
• 지역변수 : 함수 내부에서만 영향을 끼치는 변수

5. 화살표함수

• ES6 신 문법

5-1. 기본적인 화살표 함수

let arrowFun = (x,y) =>{
	return x+y
}

• 한줄로도 가능

let arrowFunc = (x,y) => x+y;

// 매개변수도 한개일때는 괄호도 뺄수 있음
let arrowFunc = x => x;

5. 조건문

• if, else if, else, switch

let fruit = "사과";

switch (fruit){
	case "사과":
    	console.log('사과입니다.');
        break;
    case "바나나":
    	console.log('바나나입니다.');
        break;
	default:
    	console.log('아무것도 아닙니다.');
        break;
}

• 조건부 실행

// and 조건

x>0 && console.log('x는 양수입니다.') // 요즘스러운 개발패턴

• 삼항 연산자와 단축평가

// or 조건
let y; //y에는 undefined
let z = y || 20; // y가 20이 아니라면 z는 20이다

console.log(z); // 20

• fasly한 값, truthy한 값
  0, "", null, undefinded, NaN, false = fasle
  1,true = true

객체 생성 방법

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

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

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

• 접근 하는 방법

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

console.log(person.name);   // "홍길동"
console.log(person.age);    // 30
console.log(person.gender); // "남자"

• 객체 메소드 (객체가 가진 여러가지 기능)

.keys()

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

let keys = Object.keys(person);

console.log(keys);   // ["name", "age", "gender"]

.values()

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

let values = Object.values(person);

console.log(values);   // ["홍길동", 30, "남자"]

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

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

let entries = Object.entries(person);

console.log(entries); // [['name','홍길동'],['aeg','30'],['gender','남자']]

.assing() : 객체를 복사한다.

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

let newPerson = {}

Object.assign(newPerson, person);

console.log(newPerson);   // { name: "홍길동", age: 30, gender: "남자" }

// 안의 속성을 바꾸고 싶을 때
Object.assign(newPerson, person, { age: 35 });

console.log(newPerson);   // { name: "홍길동", age: 35, gender: "남자" }

객체 비교

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

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

console.log(person1 === person2);   // false 
console.log(JSON.stringify(person1) === JSON.stringify(person2));   // true

객체 비교할때는 일반적으로 === 연산자를 사용할 수 없음
JSON.stringify() 함수를 사용하여 객체를 문자열로 변환한 후, 문자열 비교

객체병합

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

let person2 = {
  gender: "남자"
};

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

console.log(mergedPerson);   // { name: "홍길동", age: 30, gender: "남자" }

... (spread operator) : 객체의 중괄호를 풀어 해치는 것

배열

1. 생성

let fruits = ["사과", "바나나", "오렌지"];

2. 크기지정

let numbers = new Array(5);

3. 배열 요소 접근

let fruits = ["사과", "바나나", "오렌지"];

console.log(fruits[0]);   // "사과"
console.log(fruits[1]);   // "바나나"
console.log(fruits[2]);   // "오렌지"

배열 메소드

1. push

let fruits = ["사과", "바나나"];

fruits.push("오렌지");

console.log(fruits);   // ["사과", "바나나", "오렌지"]

2. pop - 마지막 요소 삭제

let fruits = ["사과", "바나나", "오렌지"];

fruits.pop();

console.log(fruits);   // ["사과", "바나나"]

3. shift - 첫번째 요소 삭제

javascriptCopy code
let fruits = ["사과", "바나나", "오렌지"];

fruits.shift();

console.log(fruits);   // ["바나나", "오렌지"]

4. unshift - 배열 첫번째에 요소 추가

let fruits = ["바나나", "오렌지"];

fruits.unshift("사과");

console.log(fruits);   // ["사과", "바나나", "오렌지"]

5. splice

let fruits = ["사과", "바나나", "오렌지"];

fruits.splice(1, 1, "포도");

console.log(fruits);   // ["사과", "포도", "오렌지"]

fruits.splice(1, 1, "포도");
1번째부터(바나나) 1개를 삭제하고 거기에 포도를 집어 넣어라

let fruits = ["사과", "바나나", "오렌지"];

fruits.splice(0, 2, "포도");

console.log(fruits);   // [ '포도', '오렌지' ]

fruits.splice(0, 2, "포도");
1번째부터 2개를 삭제하고 포도를 집어 넣어라

6. slice

let fruits = ["사과", "바나나", "오렌지"];

let slicedFruits = fruits.slice(1, 2);

console.log(slicedFruits);   // ["바나나"]

1번째 배열부터 2번째 배열 전까지 새로운 배열로 만들어줘

forEach

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

numbers.forEach(function(item){
	console.log('item 입니다 =>' + item)
}); // 매개변수 자리에 함수를 넣음 = '콜백함수'라고 부른다

-console-
item 입니다 =>1
item 입니다 =>2
item 입니다 =>3
item 입니다 =>4
item 입니다 =>5

배열의 각요소에 대하여 콜백함수를 실행한다.

map

let newNumbers = numbers.map(function(item){
	return item * 2; // 반드시 return문을 가지고 있어야 함
});

console.log(newNumbers); // [ 2, 4, 6, 8, 10 ]

map() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과를 새로운 배열로 반환한다. 항상 원본 배열의 길이만큼이 retrun됨

filter

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

let filteredNumbers = numbers.filter(function(item){
	retrun item === 5;
})
console.log(filteredNumbers); // [5,5]

find

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

let resultNumbers = numbers.find(function(item){
	retrun item > 3;
})
console.log(resultNumbers); // [4]

find() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 첫 번째 요소를 반환한다.

반복문

for, while => ~동안 : 반복문

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

}

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

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

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

-console-
name: Jhon
age: 30
gender: male

• while

while(조건){
	//메인로직
	//증감
}

let i = 0;

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

-console-
0
1
2
3
4
5
6
7
8
9

• do ~while

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

-console-
0
1
2
3
4
5
6
7
8
9

• break continue 문

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}

-console-
0
1
2
3
4

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    continue;
  }
  console.log(i);
}

-console-
0
1
2
3
4
6
7
8
9

break - 그자리에서 for문이 멈추고 실행종료
continue - 5가 되는 순간 밑으로 가지 않고 다음 for문으로 넘어감