Javascript - scope / Object클래스 / push, pop, indexOf, find, findIndex, forEach, map, join, toString, slice, unshift, shift, sort, reverse
목차
1. scope
2. Object 클래스
3. 다양한 사용법들
3-1 push/ pop
3-2 indexOf
3-3 find/ findIndex
3-4 forEach
3-5 map
3-6 join/ toString
3-7 slice
3-8 unshift/ shift
3-9 sort/ reverse
3-10 filter
1.scope (스코프)
{
let a = 0;
// 지역 변수, 지역 스코프
}
let a = 0;
console.log(a);
//전역변수 , 전역 스코프- scope는 { } 중괄호 의미로 코드를 묶어준다.
- 스코프 내에서 선언된것은 지역변수
- 스코프 밖에서 선언된것을 전역변수
let a = 1;
{
let a = 3;
console.log(a);
}
console.log(a);☆ let 의 특성으로 한번 선언한 이름은 다시 선언할수 없는데 스코프 내부에서는 선언할수 있다!
→ 그래서 { } 중괄호속의 a는 3이라고 나온다
→ { } 중괄호속의 let a=3;을 지운다면 전역변수에서 찾아서 a는 1이라고 뜬다!
for (let i = 0; i < 10; ++i) {
console.log(i);
}
let i = 10;
function funcScope() {
// 함수 스코프(지역 스코프)
}- 반복문, 조건문, 함수에서 전부 스코프를 사용한다.
2. Object 클래스
const obj = {
a: 1,
b: "a",
c: true,
d: undefined,
e: null,
f: function () {
console.log("f");
},
g() {
console.log("g");
},
h: () => {
console.log("h");
},
};console.log(Object.keys(obj));- Object 클래스로 새로운 객체를 만드는 것이다.
→ console에서 찍어보면 배열로 입력한 키가 나온다 → 표를 나타날때 사용한다고 한다
console.log(Object.values(obj));- 배열로 키의 값이 나온다.
3. 다양한 사용법들 (과일이름으로 )
- 3-1 push/ pop
- push : 목록 뒤에서부터 추가를 해준다.
- pop : 뒤에서부터 뺀다. (특징으로 뺀 값을 리턴해준다)
const fruits = ["apple", "banana"];
console.log(fruits[0]);
fruits.push("peach");
console.log(fruits);
console.log(fruits.pop());
fruits.push("peach");
fruits.push("melon");
fruits.push("strawberry");
console.log(fruits);
- 3-2 indexOf
- 몇번째 아이템인지 알려주고, 찾았을때 없다면 '-1' 이라고 뜬다.
→ index는 0부터 세는데 없는 값을 찾으라고 한다면 반대로 -로 간다
console.log(fruits.indexOf("melon"));
console.log(fruits.indexOf("grape"));
- 3-3 find/ findIndex
- find : 매개변수에 함수형식으로 적어주어야한다.
→ true가 나오는것을 찾는다는 것이고 참이 나올때 까지 아이템을 찾는다는것이다.
- findIndex : find과 같이 매개변수에 함수형식으로 적는다.
→ 입력한 함수가 참이고 리턴할때 그 아이템이 몇번째인지를 알려준다.
console.log(
fruits.find((item) => {
return true;
})
);
console.log(
fruits.findIndex((item) => {
return item == "melon";
})
);
- 3-4 forEach
- 배열내에 있는 아이템 전부를 콘솔에 찍어준다.
→ 하나씩 전부 함수를 써서 사용한다.
- braek 기능이 없기 때문에 무조건 시작했으면 끝까지 전부를 실행한다.
- 반환값이 없어서 그냥 forEach를 적으면 undefined가 나온다.
fruits.forEach((v) => {
console.log(v);
});
- 3-5 map
- 기존의 배열을 수정해서 새로운 배열을 만들어준다.
- forEach와 다르게 반환을 해준다.
→ return 값을 줄수있다.
console.log(
fruits.map((v) => {
console.log(v);
return v + " juice";
})
);
- 3-6 join/ toString
- join : 문자로 바꿔주면서 매개변수에 넣고싶은 것을 입력하면 그대로 보여준다.(띄어쓰기까지)
- toString : 문자열로 바꿔주면서 , 을 찍어서 나온다.
console.log(fruits.join(" / "));
console.log(fruits.toString());
- 3-7 slice
- 01234...순으로 숫자를 지정해서 그부분을 잘라서 보여준다.
- 1번아이템부터 3번아이템 전에 끝난다고 생각하기(index적으로 봤을때)
- 뒤에서 부터 갯수를 세서 앞에서 1 뒤에서 1을 자를수도 있다. (1, -1)
console.log(fruits.slice(1, 3));
console.log(fruits.slice(1, -1));
- 3-8 unshift/ shift
- unshift : push와 다르게 앞에서부터 추가를 해준다.
- shift : 앞에서 부터 빼준다.
fruits.push("mango");
console.log(fruits);
fruits.pop();
console.log(fruits);
fruits.unshift("orange");
console.log(fruits);
fruits.shift();
console.log(fruits);
- 3-9 sort/reverse
- sort : 정렬(이름순으로 정렬되어진다- 유니코드 순서대로 비교해서)
- reverse
fruits.push("mango");
fruits.push("orange");
fruits.push("grape");
console.log(fruits);
console.log(fruits.sort());
console.log(fruits.reverse());
*** 원본을 훼손
★ 오늘의 포인트와 남겨두기 ★
※ 삼항 연산자
function cal(num1, num2, operator) {
return operator == "+"
? num1 + num2
: operator == "-"
? num1 - num2
: operator == "*"
? num1 * num2
: operator == "/"
? num1 / num2
: operator == "%"
? num1 % num2
: "?";
// 삼항 연산자----> 조건 ? 참일때 : 거짓일때
}
console.log(cal(1, 2, "+"));※ 즉시실행함수, 익명함수
(function () {
//익명함수
console.log("anonymous");
})();※ 콜백함수
※ sort/reverse → 다시 이해하고 활용해보기
※ filter 이해하고 활용해보기
※ 용어정리를 하고 for문, 함수 공부하기!!!!!!
*** 앞으로 백엔드, 서버를 배우고 블록체인까지 배워 개발자가 되는 그날까지 화이팅!!!!!!!!!!
** 목표에 대해 생각하자!!!!!
* 만들고 싶은것의 흐름을 생각해보기
* 많이 사용해보자!!!!!