[Javascript] 변수 타입, 생성자 함수, computed property, Object Method, Array Method

자바스크립트 중급 강좌

 

 

이 포스팅에서 작성하는 내용은 자바스크립트 중급 강좌 에서 발췌하였습니다.

https://inf.run/QG5D

[무료] 자바스크립트 중급 강좌 - 인프런 | 강의

---

1. var / let / const

	var	let	const
변수 재선언	O	X	X
선언 전에 사용	O (undefined)	X	X
변수 생성 과정	선언과 동시에 초기화 진행 (undefined) 후 할당	선언 → 초기화 → 할당	선언, 초기화, 할당 동시 진행
값 변경	O	O	X (객체라면 객체 내부의 값은 변경 가능)
범위	함수 범위	블록 범위	블록 범위 ex) 함수, if, for, while ...

호이스팅 : 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 하는 것

 

 

2. 생성자 함수

// 생성자 정의
function Student(name, age, gender) {
  // this = {}; // 해당 부분 생략
  
  this.name = name;
  this.age = age;
  this.gender = gender;
  this.toConsole = function() {
    console.log(this.name + ', ' + this.age + ', ' + this.gender);
  }
  
  // return this; // 해당 부분 생략
}

// 생성자를 이용한 변수 생성
let student1 = new Student('스파이더맨', 15, 'M');
let student2 = new Student('아이언맨', 16, 'M');
let student3 = new Student('엔트맨', 17, 'W');

student3.toconsole(); // '엔트맨', 17, 'W'

• 생성자 함수의 메서드 명은 첫 글자를 대문자로 설정하는 것이 관
• 생성자를 이용해서 변수 생성 시, new 연산자를 이용해서 호출한다.

 

 

 

3. computed property

const animal = {
  name: 'tiger',
  age: 5
}

const property1 = 'name';
const animal2 = {
  [property1]: 'tiger',
  age: 5
}

console.log(animal1); // { name: 'tiger', age: 5 }
console.log(animal2); // { name: 'tiger', age: 5 }

const property1 = 'name';
const property2 = '~';
const animal3 = {
  [property1 + property2]: 'tiger',
  age: 5
}
console.log(animal3); // { name~: 'tiger', age: 5 }

• 변수에 대괄호를 이용하면 변수에 할당된 값을 속성으로 사용할 수 있다.
• 대괄호 안에서 연산이 일어나는 경우, 연산의 결과값이 속성으로 사용된다.

 

 

 

4. Object Method

Method Name	Description
Object.assign()	Object.assign(a, b) b를 a에 넣어서 반환한다. (deep copy) 만약 같은 key가 있는 객체를 넣는 경우, b의 값으로 덮어씌워진다. 여러 객체를 합칠 수 있다. ex) Object.assign(a, b, c)
Object.keys()	Object.keys(a) a의 모든 key를 배열로 반환한다.
Object.values()	Object.values(a) a의 모든 value를 배열로 반환한다.
Object.entries()	Object.entries(a) a의 모든 key와 value를 배열로 반환한다.
Object.fromEntries()	Object.fromEntries(a) key, value로 이루어진 배열을 객체로 반환한다.

• 배열로 반환하는 메서드는 배열 내부의 타입은 문자열이다.
• Symbol 키워드를 이용하면, 위의 메서드에서 포함되지 않는다.

 

 

 

5. 숫자/수학 관련

let num1 = 10;
num1.toString(); // "10" (10진법)
num1.toString(2); // "1010" (2진법)

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

• toString() : 단순히 문자열로 변경
• toString() 안에 파라미터를 넣으면 해당 파라미터 진법으로 변환 후 문자열로 바꿔준다.

Method Name	Description
Math.ceil()	소수점 올림
Math.floor()	소수점 내림
Math.round()	소수점 반올림 (5 미만: 내림, 5 이상: 올림)
Math.random()	0 ~ 1 사이 무작위 숫자 생성
Math.max() Math.min()	괄호 안의 파라미터의 숫자들 중 가장 큰 값(max) 혹은 가장 작은 값(min)을 반환
Math.abs()	Math.abs(a) a의 절대값을 반환
Math.pow()	Math.pow(n, m) n의 m제곱을 반환
Math.sqrt()	Math.sqrt(a) a의 제곱근을 반환
toFixed()	소수점 특정자릿수까지 표현하는 경우에 사용하며, 문자열로 반환
isNaN()	NaN 인 지 확인
parseInt()	문자를 숫자로 변경 문자에 숫자가 아닌 문자가 있는 경우, 문자를 무시하고 숫자만 이용해서 변환 만약, 문자가 가장 앞에 있다면 NaN으로 반
Number()	문자를 숫자로 변경 문자에 숫자가 아닌 문자가 있는 경우, NaN으로 변경
parseFloat()	parseInt()와 동일하지만, 부동소수점을 반환

 

 

 

6. Array

Method Name	Description
push()	a.push(b) a배열 뒤에 b 삭제
pop()	a.pop(b) a배열 뒤에 b 삭제
unshift()	배열 앞에 삽입
shift()	배열 앞에 삭제
splice()	a.splice(n,m) a의 n번째 요소부터 m개를 삭제 a.splice(n,m,x) a의 n번째 요소부터 m개를 삭제 후 그 자리에 x로 채움  splice() 는 삭제된 요소를 반환한다.
concat()	a.concat(b) a와 b를 합쳐서 새 배열로 반환
forEach()	a.forEach((item, index, arr) => {}) a의 요소를 반복하면서 탐색 item: 현재 요소, index: 현재 위치, arr: 현재 배열(a)
indexOf()	a.indexOf(b) a에서 b가 어디 인덱스에 있는 지 반환 (처음부터 탐색. 없으면 -1반환)
lastIndexOf()	indexOf()와 같은 역할이며, 단지 뒤에서부터 거꾸로 탐
includes()	a.includes(b) a에서 b가 포함되어 있는 지 반환 (true: 포함, false: 미포함)
find()	a.find(function) a의 function을 만족하는 첫 번째 요소 반환 없으면 undefined 반환
findIndex()	find()와 같지만, 요소가 아닌 인덱스를 반환
filter()	a.filter(function) a의 function을 만족하는 요소 반환 find()는 하나만 찾는다면, filter()는 만족하는 모든 요소를 반환
reverse()	a.reverse() a를 역순으로 재정렬
map()	a.map(function) a를 이용해서 function을 수행하고, 해당 function으로 얻은 결과값을 새로운 배열로 반환
sort()	a.sort(fn) a를 fn 함수대로 정렬.  fn을 넘겨주지 않았다면, 기본 정렬 방식(문자열)로 진행

 

reduce()

const arr = [1, 2, 3, 4, 5];
const result = arr.reduce((prev, cur) => prev += cur);
console.log(result); // 15

• prev: 이전 값, cur: 현재 값
• reduce() 는 배열을 순회하고 prev를 반환