키워드 1 - 변수가 필요한 이유와 선언방법
변수란? 수많은 데이터를 재활용하기 위한 데이터 보관소.
다양한 데이터값은 변수에 저장되어 사용된다.
변수를 사용하는 이유
: 메모리에 저장된 값의 위치를 안전하게 접근할 수 있게 한다.
: 코드의 재사용성을 높이고 유지, 보수를 용이하게 한다.
키워드 2 - 자바스크립트 데이터타입의 종류
데이터타입은 크게 2가지로 나뉜다. 기본(원시)타입 / 참조(객체)타입
기본타입은
1. 숫자(number) - 64비트 부동소수점의 형식
2. 문자열(string) - (''),(""),( )로 할당가능
3. boolean - true, false
4. undefined - 값이 할당되지 않았을 때 자바스크립트가 부여하는 값(타입도 값도 undefined)
5. null - 의도적으로 '값이 없다'는 것을 명시(타입은 object임. 기본데이터타입은 객체가 아닌데 초기자바스크립트의 버그라고 한다. 수정하지 않고 그냥 사용 중. 따라서 null값을 확인하기위해서는 === 연산자를 사용하는 것이 좋음)
6. symbol - ES6부터 새로 생긴 타입. 변경불가능한 유일한 값을 생성할 때 사용, 값 자체의 확인이 불가하여 외부로 노출되지 않음
참조타입은
1. 객체
2. 배열
3. 함수
4. 정규표현식
(2,3,4번은 1번에 모두 포함됨)
이렇게 나뉜다.
⭐🌟 기본타입중 number, string, boolean, symbol타입은 객체가 아니지만 표준메서드가 정의되어 있어서 객체처럼 호출가능하다.
표준 빌트인 객체인 Number, String, Boolean, Symbol에 정의된 메서드를 사용하는 것이다.
기본타입의 메서드를 호출하면
1) 순간적으로 그 타입에 해당하는 객체가 생성되고
2) 그 '객체'의 메서드가 호출된다
3) 메서드처리가 끝나면 그 '객체'는 사라지고
4) 원래의 기본타입만 남는다.
==> 이것을 래퍼객체(Wrapper Object)라고 한다.
이러한 방식을 사용하는 이유
: 객체는 다양한 프로퍼티와 메서드가 있지만 무겁고 느리다
기본타입은 가볍고 빠르지만 단순히 값 하나일 뿐이다
즉, 기본타입의 가벼움을 유지하면서 객체의 기능도 사용하기 위한 방법인 것이다.
키워드 3 - number와 string의 메소드 3가지와 사용방법
😊Number 메소드 3가지
- Number.isFinite(값)
- .valueOf( )
- Number.isNaN(값)
1. Number.isFinite(값)
전달받은 값이 정상적인 유한수인지 검사하여 Boolean값으로 반환한다.
유한수라면 true / 아니라면 false
Number.isFinite()와 전역함수 isFinite()는 다르다!!
전역함수 : 자바스크립트가 사용자의 편의를 위해 미리 정의하여 제공하는 함수
isFinite() : 인수를 숫자로 변환하여 검사
Number.isFinite() : 인수를 숫자로 변환X
===>숫자가 아닌 인수가 주어지면 언제나 false
Number.isFinite(Infinity) // false Number.isFinite(NaN) // false Number.isFinite('Hello') // false . Number.isFinite(0) // true Number.isFinite(2e64) // true . Number.isFinite(null) // false //전역함수 isFinite(null) => true
2. .valueOf( )
특정 객체의 원시타입값(primitive value)을 반환한다.
원시값에는 숫자, 문자열, 배열식, 객체식도 포함된다
var numObj = new Number(10); typeof numObj; // object . var num = numObj.valueOf(); num; // 10 typeof num; // number
3. Number.isNaN(값)
전달받은 값이 NaN(Not a Number)인지 검사하여 Boolean값으로 반환한
다.->NaN이면 true / 아니면 false
Number.isNaN()와 전역함수 isNaN()는 다르다
isNaN() : 인수를 숫자로 변환하여 검사
Number.isNaN() : 인수를 변환X
====>NaN이 아닌 인수가 주어지면 언제나 false
Number.isNaN(NaN) // true . Number.isNaN(undefined) // false / isNaN(undefined) → true. Number.isNaN({}) // false / isNaN({}) → true. Number.isNaN('blabla') // false / isNaN('blabla') → true. Number.isNaN(true) // false Number.isNaN(null) // false Number.isNaN(37) // false Number.isNaN('37'); // false Number.isNaN('37.37'); // false Number.isNaN(''); // false Number.isNaN(' '); // false Number.isNaN(new Date()) // false Number.isNaN(new Date().toString()) // false / isNaN(String) → true.
😊String메소드 3가지
- .split(separator, limit)
- .charAt(number)
- .repeat(count)
1. .split(separator, limit)
첫번째 인수로 전달받은 문자열 또는 정규표현식을 기준으로 문자열을 구분한 후 배열의 형태로 반환한다.
원본문자열은 변경되지 않는다.
const str = 'My name is code'; . str.split(' '); //공백으로 구분["My", "name", "is", "code"] str.split('') //각 문자 모두 구분["M", "y", " ", "n", "a", ... 생략] str.split('e') //["My nam", " is cod", ""] . str.split() //문자열 전체가 하나의 요소["My name is code"] . str.split(' ',2) //공백으로 구분 후 요소2개까지 반환["My", "name"]
2. .charAt(number)
전달받은 숫자에 해당하는 index의 문자를 반환한다.
전달받은 숫자가 문자열의 index 범위를 벗어난 경우 빈문자열("")을 반환한다.
const str = 'World'; . str.charAt(0) // "W" str.charAt(1) // "o" str.charAt(2) // "r" str.charAt(3) // "l" str.charAt(4) // "d" . str.charAt(5) // ""
3. .repeat(count)
문자열을 전달받은 수만큼 반복한 후 연결한 새로운 문자열을 반환한다.
인수가 정수가 아니면 소수점을 무시하고 반복한다.
인수가 0 이면 빈 문자열을 반환하고 음수이면 RangeError나 발생한다.
'Hello'.repeat(0); // '' 'Hello'.repeat(1); // 'Hello' 'Hello'.repeat(2); // 'HelloHello' 'Hello'.repeat(2.5); // 'HelloHello' (2.5 → 2) 'Hello'.repeat(-1); // Uncaught RangeError: Invalid count value: -1
키워드 4 - 함수가 필요한 이유
함수란?
JavaScript에서 사용하는 기본적인 구성 블록 중 하나.
함수를 사용하려면 사용하고자하는 범위에서 함수를 정의하고 호출해야한다.
함수의 자료형 : Object. 객체.
함수가 필요한 이유
특정 작업에 대한 함수를 미리 정의해놓으면 그 작업이 필요할 때마다
그 함수를 호출하여 재사용 할 수 있다.
- 똑같은 작업을 반복하지 않아도 코드를 재사용할 수 있다.
- 유지보수의 편의성을 높여준다.
- 특정 작업이 필요할 때마다 코드를 새로 작성하지 않아도 되므로
개발자의 실수를 줄여 코드의 신뢰성을 높인다. - 보는 사람으로 하여금 코드의 가독성을 향상시킨다.
키워드 5 - 함수의 정의와 호출의 차이점
함수의 정의(선언) : 함수에 이름을 부여하고, 함수가 호출될 때 무엇을 할지 지정해주는 것
함수의 호출 : 배개변수를 가지고 지정된 행위를 수행하는 것
함수를 정의(선언)한다고 해서 함수가 사용되는 것은 아니다. 하나의 함수가 정의되어 만들어진 것뿐. 함수를 사용하려면 호출을 해야한다.
키워드 6 - 조건문이 필요한 이유
조건문은 주어진 조건을 판단하여 해당 조건에 맞는 상황을 수행하는데 쓰인다. 조건에 따라 논리적 흐름이 발생시키는데 활용한다.
조건에 따라 수행이 달라지는 복잡한 상황을 처리하는데 유용하기 때문에 조건문을 사용한다.
키워드 7 - 배열이 필요한 이유와 선언하는 방법
-
배열이 필요한 이유 : 배열은 한개의 값이 아닌 여러개의 데이터값을 동시에 가질 수 있기 때문이다. 데이터의 집합을 저장하기위한 용도로 사용한다. 연관있는 데이터를 한번에 변수에 저장하므로 데이터를 찾는데 용이하다.
-
배열의 선언방법
- 리터럴 방식 : 리터럴 방식으로 변수와 동시에 선언하는 방식
간편한 방식이므로 많이 사용된다.
let day = ['Mon', 'Tue', 'Wen']; - 배열 객체 사용방식 : 배열 객체를 사용해 인자로 배열의 값을 넘겨주어 선언하는 방식
let day = new Array('Mon', 'Tue', 'Wen');
- 리터럴 방식 : 리터럴 방식으로 변수와 동시에 선언하는 방식
키워드 8 - 배열의 값을 추가, 수정, 삭제하는 방법
🎨 함수를 사용해 배열의 값(요소)을 추가🎨
.push( ), .unshift( ), .splice( )
1) .push() : 배열의 끝에 요소 추가
var arr = ['a', 'b', 'c'];
// arr = ['a', 'b', 'c', 'd']
arr.push('d'); // 배열의 끝에 요소를 추가2) .unshift() : 배열 앞쪽에 요소 추가
var arr = ['a', 'b', 'c'];
// arr = ['d', 'a', 'b', 'c']
arr.unshift('d'); // 배열의 앞쪽에 요소를 추가3) .splice() : 원하는 위치에 하나 이상의 요소 추가
사용법 : array.splice("위치", 0, ["요소1", "요소2" ... ])
var arr = ['a', 'b', 'c'];
// arr = ['a', 'b', 'd', 'c']
arr.splice(2, 0, 'd'); // index 2 ('c')의 위치에 요소를 추가
// arr = ['a', 'b', 'd', 'c', 'e', 'f']
arr.splice(4, 0, 'e', 'f'); // index 4의 위치에 2개의 요소를 추가🎨함수를 사용해 배열의 값(요소)을 삭제🎨
.pop( ), .shift( ), .splice( )
1) .pop() : 배열의 마지막 요소 제거
var arr = ['a', 'b', 'c', 'e', 'f'];
// arr = ['a', 'b', 'c', 'e']
arr.pop(); // 배열의 마지막 요소를 제거
// arr = ['a', 'b', 'c']
var popped = arr.pop(); // 제거한 요소를 반환 받을 수 있음
// popped = 'e'2) .shift() : 배열의 첫번째 요소 제거
var arr = ['a', 'b', 'c', 'e', 'f'];
// arr = ['b', 'c', 'e', 'f']
arr.shift(); // 배열의 첫번째 요소를 제거
// arr = ['c', 'e', 'f']
var shifted = arr.shift(); // 제거한 요소를 반환 받을 수 있음
// shifted = 'b'3) .splice() : 원하는 위치에서 하나 이상의 요소 제거
요소 제거 후 해당 위치에 새로운 요소 추가 가능
var arr = ['a', 'b', 'c', 'e', 'f'];
// arr = ['a', 'b', 'e', 'f']
arr.splice(2, 1); // index 2 부터 1개의 요소('c')를 제거
// arr = ['a', 'f']
arr.splice(1, 2); // index 1 부터 2개의 요소('b', 'e')를 제거
// arr = ['a']
removed = arr.splice(1, 1); // 제거한 요소를 반환 받을 수 있음
// removed = 'f'🎨함수를 사용하지 않고 배열의 값(요소)을 추가, 삭제🎨
delete array[ ], arr[array.length], arr.length, arr[index]
1) delete array[ ] : 원하는 위치의 요소값 삭제. 요소는 그대로 존재하고 값만 삭제됨
var arr = ['a', 'b', 'c', 'e', 'f'];
// arr = ["a", undefined, "c", "e", "f"]
delete arr[1]; // delete로 배열을 삭제할 경우 요소는 그대로 존재하며 값만 삭제 됨2) arr[array.length], arr.length, arr[index]
자바스크립트는 배열의 길이를 동적으로 변경할 수 있다
배열 중간의 요소를 추가 하거나, 삭제할 경우 함수를 사용하는 것이 편리하다.
var arr = ['a', 'b', 'c'];
// arr = ['a', 'b', 'c', 'e'];
arr[arr.length] = 'e'; // 배열의 끝에 요소를 추가
// arr = ['a', 'b', 'c']
arr.length = arr.length - 1; // 배열의 크기를 하나 줄인다
// arr = ["a", "b", "c", undefined, undefined, "g"]
arr[5] = 'g'; // index 5 에 요소를 추가, 빈요소([3],[4])는 undefined