[항해99 1주차] JS문법 종합반 - 1주차

JS역사

- 1995년 자바스크립트 탄생 (Live Script → Javascript)

- 브라우저 동작 스크립트 언어

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

- 2005년 AJAX등장 → 비동기 웹 애플리케이션 개발 가능, 폭발적 UX 향상

- 2009년 Node.js등장 , 서버개발 활성화 → 하나의 언어(js)로 FrontEnd + BackEnd + DB(MongoDB)

- 2016년 프론트앤드 프레임워크(React, Vue, Angular)대중화

JS언어 특징

1) 객체 지향 프로그래밍 지원

- 객체지향 프로그래밍 : 순서대로 실행되는 일련의 과정을 단계적으로 기술하여 프로그램을 만드는 것

- 절차지향 프로그래밍 : 데이터와 함수를 객체라는 그룹으로 묶어서 처리하는 방법

2) 동적 타이핑

- 변수를 선언할 때 타입 지정 x → 런타임 시점에 변수에 할당되는 값에 따라 자동으로 데이터 타입 결정

* 런타임: 프로그램이 실행되는 동안의 시점 ↔ 컴파일 시점

3) 함수형 프로그래밍 지원 

- 함수를 일급 객체로 취급하고, 고차 함수를 지원 → 코드의 재사용성과 가독성↑

* 일급객체(first-class object) : 함수를 일반 값과 마찬가지로 변수에 할당하거나, 함수의 인자로 전달하거나, 함수의 반환값으로 사용할 수 있는 객체

* 고차함수(higher-order function) : 함수를 인자로 받거나, 함수를 반환하는 함수

4) 비동기 처리

- 작업을 순차적으로 기다리지 않고, 병렬로 처리할 수 있도록 하는 방식

5) 클라이언트 측 및 서버 측 모두에서 사용 가능

- 자바스크립트는 클라이언트 측에서만 사용되는 것이 아니라, Node.js를 이용하여 서버 측에서도 사용

기본 문법

- 변수의 5가지 주요 개념

• 변수 이름 : 저장된 값의 고유 이름
• 변수 값 : 변수에 저장된 값
• 변수 할당 : 변수에 값을 저장하는 행위
• 변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위
• 변수 참조 : 변수에 할당된 값을 읽어오는것

// var로 변수 선언
var myVar = "Hello World";
console.log(myVar); // "Hello World"

// let으로 변수 선언
let myLet = "Hello World";
console.log(myLet); // "Hello World"

// const로 상수 선언
const myConst = "Hello World";
console.log(myConst); // "Hello World"

// var로 변수 덮어쓰기
var myVar = "Hello";
var myVar = "World";
console.log(myVar); // "World"

// var로 변수 덮어쓰기
var myVar = "Hello";
var myVar = "World";
console.log(myVar); // "World"

// let으로 변수 덮어쓰기
let myLet = "Hello";
myLet = "World"; // 기존 값을 덮어쓰기
console.log(myLet); // "World"

// const로 상수 선언 후 값 변경하기
const myConst = "Hello";
myConst = "World"; // 오류 발생
console.log(myConst);
```

* var :  같은 이름의 변수 여러 번 선언 가능

   let : 같은 이름 변수 두 번 선언 x , 선언 후 값 변경 가능

   const : 같은 이름 변수 두 번 선언 x, 선언 후 값 변경 x

 

- 데이터 타입

1. 숫자(Number)

• 정수형 숫자(integer)
• 실수형 숫자(Float)
• 지수형 숫자(Exponential)
• NaN(Not a Number) : 자바스크립트에서 숫자가 아님을 나타내는 값, 보통 수학적으로 정의되지 않는 계산을 수행하거나, 숫자가 아닌 값을 숫자로 변환하려고 할 때 발생
• infinity2

2. 문자열(String) : 작은 따옴표(')나 큰 따옴표(")로 감싸서 표현

// 문자열 길이(length) 확인하기
let str = "Hello, world!";
console.log(str.length); // 13

//문자열 결합(concatenation)
let str1 = "Hello, ";
let str2 = "world!";
let result = str1.concat(str2);
console.log(result); // "Hello, world!"

//문자열 자르기(substr, slice)
let str = "Hello, world!";
console.log(str.substr(7, 5)); // "world"
console.log(str.slice(7, 12)); // "world"

//문자열 검색(search)
let str = "Hello, world!";
console.log(str.search("world")); // 7

//문자열 대체(replace)
let str = "Hello, world!";
let result = str.replace("world", "JavaScript");
console.log(result); // "Hello, JavaScript!"

//문자열 분할(split)
let str = "apple, banana, kiwi";
let result = str.split(",");
console.log(result); // ["apple", " banana", " kiwi"]

3. 불리언(Boolean): 참(true)과 거짓(false)을 나타내는 데이터 타입

4. undefined: 값이 할당되지 않은 변수

5. null: 값이 존재하지 않음

6. 객체(Object): 속성과 메소드를 가지는 컨테이너

7. 배열(Array): 여러 개의 데이터를 순서대로 저장하는 데이터 타입

 

- 형변환

1. 암시적 형 변환: 자바스크립트에서 자동으로 수행되는 형 변환, 연산자 사용할 때 발생

// 문자열 변환
console.log(1 + "2");   // "12"
console.log("1" + true);   // "1true"
console.log("1" + {});   // "1[object Object]"
console.log("1" + null);   // "1null"
console.log("1" + undefined);   // "1undefined"
// 숫자 변환
console.log(1 - "2");   // -1
console.log("2" * "3");   // 6
console.log(4 + +"5");   // 9
//불리안 변환 => 0, 빈 문자열(""), undefined, NaN : false
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. 명시적 형 변환: 개발자가 직접 자료형 변환

 

- 함수

// 함수 선언문
function add(x, y) {
  return x + y;
}

console.log(add(2, 3));   // 5

// 함수 표현식 => 함수를 변수에 할당
let add = function(x, y) {
  return x + y;
}

console.log(add(2, 3));   // 5

// 함수 호출
function add(x, y) {
  return x + y;
}

console.log(add(2, 3));   // 5

- 함수 스코프 (scope: 범위)

//전역 스코프 => 어디에서든 참조 가능
let x = 10;

function printX() {
  console.log(x);
}

printX();   // 10

// 지역 스코프 => 해당 함수 내에서만 참조 가능
function printX() {
  let x = 10;
  console.log(x);
}

printX();   

// 블록 스코프
if (true) {
  let x = 10;
  console.log(x);
}

console.log(x);   // ReferenceError: x is not defined

- 화살표 함수

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

console.log(add(2, 3));   // 5


// 한 줄로 된 화살표 함수 => 함수 내부 return문이 한 줄일 경우 중괄호, return 키워드 생략 가능
let add = (x, y) => x + y;

console.log(add(2, 3));   // 5


// 매개변수가 하나인 화살표 함수	=> 괄호 생략 가능
let square = x => x * x;

console.log(square(3));   // 9

- 조건부 실행 : && 연산자를 사용하여 조건부 실행 가능

let x = 10;

(x > 0) && console.log("x는 양수입니다.");
// x가 양수일 때만 "x는 양수입니다" 출력

- 삼항 연산자와 단축 평가 : || 연산자를 사용하여 단축 평가(short-circuit evaluation)를 할 수 있음

let x;
let y = x || 10;

console.log(y);   // 10

// 변수 x가 존재하지 않는 경우, ||연산자는 false 반환 => 기본값으로 지정한 10반환

- falsy한 값과 truthy한 값

: 0, 빈 문자열, null, undefined, NaN, false는 falsy한 값 => if문 만족x

 

- for ... in 문 : 객체의 프로퍼티를 순서대로 접근 가능

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

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

- break문: 반복문 종료

- continue문: continue문 아래에 있는 실행해야 하는 문장들을 건너 뛰고, 다음 반복을 시작

                          => 해당 조건문만 실행하지 않고, 반복문은 이어서 실행

 

객체

1. 객체 생성 : {}(중괄호)사용, 속성과 값은 :(콜론)으로 구분, 각 속성과 값은 ,(쉼표)로 구분

• 생성자 함수를 사용한 객체 생성

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. 객체 속성 접근: 점(.)을 사용하거나, ['key']값을 이용

3. 객체 메소드

1) Object.keys() 메소드 : 객체의 속성(key) 이름을 배열로 반환

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

let keys = Object.keys(person);

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

2) Object.values() 메소드 : 객체의 속성값(value)들을 배열로 반환

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

let values = Object.values(person);

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

3) Object.entries() 메소드 : 객체의 속성 이름과 속성 값들을 2차원 배열로 반환

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

let entries = Object.entries(person);

console.log(entries);

4) Object.assign() 메소드 : 기존 객체를 복사하여 새로운 객체 만듦

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

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

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

5) 객체 비교 : JSON.stringify()함수 사용해 객체를 문자열로 변환한 후, 문자열 비교

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

6) 객체 병함: 전개 연산자(...)사용

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

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

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

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

배열

- 배열 메소드

1) push() : 배열 끝에 요소 추가

 

2) pop() : 배열의 마지막 요소 삭제

 

3) shift() : 배열의 첫 번째 요소 삭제

 

4) unshift() : 배열의 맨 앞에 요소 추가

 

5) splice() : 배열의 요소를 삭제하거나, 새로운 요소를 추가

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

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

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

6) slice() : 배열의 일부분을 새로운 배열로 만듦

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

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

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

7) forEach() : 배열의 각 요소에 대해 콜백 함수를 실행

 

8) map() : 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과를 새로운 배열로 반환

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

let squaredNumbers = numbers.map(function(number) {
  return number * number;
});

console.log(squaredNumbers);   // [1, 4, 9, 16, 25]

9) filter() : 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소만 새로운 배열로 반환

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

let evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers);   // [2, 4]

10) reduce() : 배열의 각 요소를 순회하며 callback함수의 실행 값을 누적하여 하나의 결과값을 반환

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

let sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum);

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

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

let foundNumber = numbers.find(function(number) {
  return number > 3;
});

console.log(foundNumber);   // 4

12) some() : 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소가 하나라도 있는지 확인

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

let hasEvenNumber = numbers.some(function(number) {
  return number % 2 === 0;
});

console.log(hasEvenNumber);   // true

13) every() : 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소가 모든 요소인지 확인

let numbers = [2, 4, 6, 8, 10];

let isAllEvenNumbers = numbers.every(function(number) {
  return number % 2 === 0;
});

console.log(isAllEvenNumbers);   // true

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]

15) reverse() : 배열의 요소를 역순으로 정렬

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

numbers.reverse();

console.log(numbers);   // [5, 4, 3, 2, 1]