[Javascript] 02. Javascript Intermediate

1. 변수

 

- 변수의 생성과정은 선언 단계, 초기화 단계, 할당 단계로 나뉘어짐.

• var : 선언 및 초기화 단계 -> 할당 단계
• let : 선언 단계 -> 초기화 단계 -> 할당 단계
• const : 선언 + 초기화 + 할당이 동시에 이루어짐. 

- var는 함수스코프(function-scoped), let, const는 블록 스코프(block-scoped)

- 블록 스코프는 블록 내에서만 사용이 가능한 변수.

 

2. 생성자 함수

// 생성자 함수의 첫 글자는 대문자로.
function User(name, age) {
    this.name = name;
    this.age = age;
}

let user1 = new User('Mike', 30);
let user2 = new User('Jane', 22);
let user3 = new User('Tom', 17);

// new 연산자를 사용해서 호출함.

3. Computed property

let a = 'age';
const user = {
    name : 'Mike',
    [a] : 30 // age : 30
}

4. Object Methods

 

• Object.assign() : 객체 복제를 위해 사용. 일반 할당자로 접근하면 참조값에 접근하게 됨.
• Object.keys() : 키 배열 반환
• Object.values() : 값 배열 반환
• Object.entries() : 키/값 배열 반환
• Object.fronEntries() : 키/값 배열을 객체로

 

5. Symbol

// 유일한 식별자를 만들 때 사용. 유일성을 보장.
const id = Symbol('id'); // new를 붙이지 않습니다.
// 매개인자로 설명을 넣을 수 있음.

• Symbol.for() : 전역 심볼

하나의 심볼만 보장받을 수 있음. 없으면 만들고, 있으면 가져오기 때문.

Symbol 함수는 매번 다른 Symbol 값을 생성하지만, Symbol.for 메소드는 하나를 생성한 뒤 키를 통해 같은 Symbol을 공유

 

6. Number, Math

 

• toString() : 10진수 -> 2진수/16진수 문자열로 변환 할 수 있음.

let num = 10;
num.toString(); // "10"
num.toString(2); // "1010"

let num2 = 255;
num.toString(16); // "ff"

• Math.ceil() : 올림
• Math.floor() : 내림
• Math.round() : 반올림 // toFixed()를 사용하여 소수점 갯수를 정할 수 있음, 문자열을 반환함
• parseInt() : 문자열을 숫자로 반환함. 읽을 수 있는 데까지는 읽고 숫자로 반환함. 두 번째 인수에서 진법을 정할 수 있음.
• Math.random() : 0~1 사이 무작위 숫자를 반환함.
• Math.max, min, abs, pow, sqrt ...

 

7. String Method

length : 문자열의 길이 반환

배열과 동일하게 특정 위치에 접근할 수 있음. 한글자만 바꾸는 건 허용되지 않음. 변화x

toUpperCase() / toLowerCase() : 대문자와 소문자로 바꾸어줌.

indexOf(text)는 포함된 문자의 위치 index를 반환하고 없으면 -1을 반환함.

slice(n, m) : n부터 m 까지 (m이 없으면 문자열 끝까지) 반환함. m이 음수면 끝에서 부터 셈.

substring(n, m) : n과 m사이 문자열 반환함. n과 m 사이라고 생각. 음수는 0으로 인식

substr(n, m) : n부터 시작 m 개를 가져옴

trim() : 앞 뒤 공백을 제거함. 주로 사용자의 입력에서 사용함.

문자열 비교 가능. (아스키코드 기준)

"a".codePointAt(), String.fromCodePoint();를 통해 아스키코드를 반환할 수 있음.

 

8. Array Method

• splice(n, m) : n부터 m개의 특정 요소 지움. 삭제된 요소를 반환함.
• splice(n, m , x) : n부터 m개를 지우고 x를 그 자리에 추가함.
• slice(n, m) : n부터 m까지 반환함.
• concat(arr2, arr3 ..) : 합쳐서 새 배열을 반환함
• forEach(fn) : 배열 반복

let arr = ["Mike", "Tom", "Jane"]

arr.forEach((name, index) => {
    console.log(`${index}. ${name}`);
});

• indexOf() / lastIndexOf() : 해당 위치의 인덱스를 반환함. 끝에서 부터 탐색하고 싶으면 lastIndexOf를 사용함
• includes() : 배열 내에 요소가 들어있는지 확인할 수 있음.
• find(fn) / findIndex(fn) : 첫번째 true값만 반환하고 끝, 만약 없으면 undefined를 반환.
• filter(fn) : 만족하는 모든 요소를 배열로 반환
• reverse() : 역순으로 재정렬
• map(fn) : 함수를 받아 특정 기능을 시행하고 새로운 배열을 반환함. 실무에서 많이 사용됨. 틈틈히 연습!

let userList = [
    {name:"Mike", age:30},
    {name:"Jane", age:27},
    {name:"Tom", age:10},
];

let newUserList = userList.map((user, index) => {
  return Object.assign({}, user, {
    id: index+1,
    isAdult: user.age > 19,
  });
});

• join(중간에 넣을 문자) : 배열을 합쳐서 문자열로 만들기.
• split(나누어지는 기준 문자) : 문자열을 쪼개서 배열로 만듬.
• isArray() : 배열인지 아닌지 true / false를 반환.

 

 

9. 구조 분해 할당

let [x, y] = [1,2];

let users = ['Mike', 'Tom', 'Jame'];
let [user1, user2, user3] = users;

let str = "Mike-Tome-Jame";
let [user1, user2, user3] = str.split('-');

let [a,b,c] = [1,2]; // c = undefined
let [a=3, b=3, c=5] = [1,2] // default값을 설정 해줄수 있음.

- 객체도 마찬가지로 동일하게 가능. 한가지 다른점은 순서를 신경쓰지 않아도 됨.

let user = {name: 'Mike', age:30};

let {name, age} = user;
let {name: userName, age: userAge} = user;

 

10. 나머지 매개변수(Rest parameters)

function showName(...names) {
	console.log(names);
}

showName(); // []
showName('Mike'); //['Mike']
showName('Mike', 'Tom'); // ['Mike', 'Tom']

11. setTimeout() / setInterval()

 

• setTimeout(fn, time, argument) 은 일정 시간이 지난 후 함수를 실행함.
• clearTimeout(tId)는 setTimeout을 취소함.
• setInterval()은 일정 시간 간격으로 함수를 반복 수행함.
• clearInterval()은 중지시킴.

 

12. call, apply, bind

 

• call 메서드는 모든 함수에서 사용할 수 있으며, this를 특정값으로 지정할 수 있음.

const mike = {name: "Mike",};

function showThisName() {
    console.log(this.name);
}

showThisName();
showThisName.call(mike);

• apply는 함수 매개변수를 처리는 방법을 제외하면 call과 완전히 같다. call은 일반적인 함수와 마찬가지로 매개변수를 직접 받지만, apply는 매개변수를 배열로 받는다.

const mike = {name: "Mike",};

function update(birthYear, occupation) {
    this.birthYear = birthYear;
    this.occupation = occupation;
}

update.apply(mike, [1999, "singer"])

• bind는 함수의 this값을 영구히 바꿀수 있다.

const mike = {name: "Mike",};

function update(birthYear, occupation) {
    this.birthYear = birthYear;
    this.occupation = occupation;
}

const updateMike = update.bind(mike);
updateMike(1980, "police"); // name:"Mike"

13. Promise

//                        성공    실패
const pr = new Promise((resolve, reject) => {
    //code
});

• 이렇게 어떤 일이 완료된 후 실행되는 함수를 callback 함수라고 함.

const pr = new Promise((resolve, reject) => {
    setTimeOut(()=> {
    	resolve('OK')
    }, 3000)
});

pr.then( //
	function(result){}
). catch( //
	function(err){}
). finally( // 함수가 끝나면 무조건 호출
	function(..){}
)

 

14. async, await

• async라는 키워드를 함수 앞에 붙이면 Promise형을 반환함.
• await는 asnyc 키워드 안에서만 사용할 수 있음. promise가 처리될 때까지 기다리고 결과를 그 이후에 반환함.
• error handling을 위해서는 try ... catch문을 사용한다.

function getName(name) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(name);
    }, 1000);
  });
}

async function showName() {
  const result = await getName('Mike');
  console.log(result);
}

console.log("시작");
showName();


// 1초 후에 "Mike가 출력됨.