FROM.스파르타 코딩클럽
1.var, const, let
function scope(){
const a = 0;
let b = 0;
var c = 0;
// {} 증괄호 안에 든 내용을 블럭이라고 표현해요.
if(a === 0){
const a = 1;
let b = 1;
var c = 1;
console.log(a, b, c);
}
// 앗! c는 값이 변했죠?
// 그렇습니다. var는 함수 단위라서 if문 밖에서 선언한 값이 변했어요.
// let과 const로 선언한 겂은 어떤가요? if문 안쪽 내용이 바깥 내용에 영향을 끼치지 않죠?
console.log(a, b, c);
}2. 생성자함수, 초기화, super
class Cat {
// 생성자 함수
constructor(name) { //추가해주는 함수
// 여기서 this는 이 클래스입니다.(Cat)
this.name = name; //name이 추가된다
}
// 함수
showName(){
console.log(this.name);
}
}
// extends는확장해서 자식 클래스 가져옴 Cat 클래스를 상속 받아 온단 뜻입니다.
class MyCat extends Cat {
// 생성자 함수
constructor(name, age) { // 초기화 = 객체에 내용을 넣어줌
// super를 메서드로 사용하기
//super사용시 자식 클래스에서 부모클래스로 접근
super(name);
this.age = age;
}
// 부모 클래스가 가진 것과 같은 이름의 함수를 만들 수 있습니다.
// 오버라이딩한다고 해요.
showName(){
console.log(this.name);
// super를 키워드로 사용하기
return '내 고양이 이름은 '+super.showName()+'입니다.';
}
showAge(){
console.log('내 고양이는 '+this.age+'살 입니다!');
}
}
// 여기서 new는 키워드예요. 새로운 무언가를 만들기 위해서 생성자 함수와 함께 씁니다.
// 네, new와 생성자 함수는 세트예요 :) (소근
let cat = new Cat('perl');
cat.showName();
console.log(cat);
3. 등호함수
=
👉 =는 할당을 뜻합니다. 어떤 변수에 값을 할당할 때 써요.
==
👉 ==는 등차입니다. 유형을 비교하지 않는 등차예요. 변수 값을 기반으로 비교합니다. (ex. 0 == "0"은 true를 반환합니다.)
===
👉 ===도 등차입니다! 유형도 비교하는 등차예요. 엄격한 비교죠! ex. 0 === "0"은 false를 반환합니다. → 0은 숫자(number)고, "0"은 문자(string)이니까요!
4. Spred 문법
let array = [1,2,3,4,5];
// ... <- 이 점 3개를 스프레드 문법이라고 불러요.
// 배열 안에 있는 항목들(요소들)을 전부 꺼내준다는 뜻입니다.
// 즉 [...array]은 array에 있는 항목을 전부 꺼내
// 새로운 배열([] => 이 껍데기가 새로운 배열을 뜻하죠!)에 넣어주겠단 말입니다!
let new_array = [...array];
console.log(new_array);5. Array 내장 함수
(1) map
👉 map은 배열에 속한 항목을 변환할 때 많이 사용합니다. 어떤 배열에 속한 항목을 원하는 대로 변환하고, 변환한 값을 새로운 배열로 만들어줍니다. 즉, 원본 배열은 값이 변하지 않아요! 가공 가능!
const array_num = [0, 1, 2, 3, 4, 5];
const new_array = array_num.map((array_item) =>{
return array_item + 1;
});
// 새 배열의 값은 원본 배열 원소에 +1 한 값입니다.
console.log(new_array); //[1,2,3,4,5,6]
// 원본 배열은 그대로 있죠!
console.log(array_num); //[0,1,2,3,4,5](2)Filter
👉 filter는 어떤 조건을 만족하는 항목들만 골라서 새 배열로 만들어주는 함수입니다. 원본 배열은 변하지 않고, 원하는 배열을 하나 더 만들 수 있다니 (최고)죠! 가공은 할 수 없어!
const array_num = [0, 1, 2, 3, 4, 5];
// forEach(콜백함수)
const new_array = array_num.filter((array_item) => {
// 특정 조건을 만족할 때만 return 하면 됩니다!
// return에는 true 혹은 false가 들어가야 해요.
return array_item > 3;
});
console.log(new_array);(3) Concat
👉 concat은 배열과 배열을 합치거나 배열에 특정 값을 추가해주는 함수입니다! 원본 배열은 변하지 않아요!
const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];
const merge = array_num01.concat(array_num02);
// 중복 항목(숫자 3)이 제거되었나요? 아니면 그대로 있나요? :) 안사라져요
console.log(merge); //[0,1,2,3,3,4,5]중복숫자 제거법
const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];
// Set은 자바스크립트의 자료형 중 하나로,
// 중복되지 않는 값을 가지는 리스트입니다. :)!
// ... <- 이 점 3개는 스프레드 문법이라고 불러요.
// 배열 안에 있는 항목들(요소들)을 전부 꺼내준다는 뜻입니다.
// 즉 [...array_num01]은 array_num01에 있는 항목을 전부 꺼내
// 새로운 배열([] 이 껍데기가 새로운 배열을 뜻하죠!)에 넣어주겠단 말입니다!
const merge = [...new Set([...array_num01, ...array_num02])];
// 중복 항목(숫자 3)이 제거되었나요? 아니면 그대로 있나요? :)
console.log(merge); //[0,1,2,3,4,5](4) From
👉 from은 쓰임새가 다양한 친구입니다. 🙂
1) 배열로 만들고자 하는 것이나 유사배열을 복사해서 새로운 배열로 만들 때
2) 새로운 배열을 만들 때 (초기화한다고도 표현해요.) 주로 사용합니다!
유사배열이 뭘까?
[ 어떤 값들... ] 이 모양으로 생겼지만 배열의 내장 함수를 사용하지 못하는 친구들입니다. DOM nodelist같은 게 유사배열이에요.
// 배열화 하자!
const my_name = "mean0";
const my_name_array = Array.from(my_name);
console.log(my_name_array); //["m","e","a","n","0"]
// 길이가 문자열과 같고, 0부터 4까지 숫자를 요소로 갖는 배열을 만들어볼거예요.
const text_array = Array.from('hello', (item, idx) => {return idx});
console.log(text_array); //[0,1,2,3,4]
// 새 배열을 만들어 보자!(=> 빈 배열을 초기화한다고도 해요.)
// 길이가 4고, 0부터 3까지 숫자를 요소로 갖는 배열을 만들어볼거예요.
const new_array = Array.from({length: 4}, (item, idx)=>{ return idx;});
console.log(new_array); //[0,1,2,3]
댓글