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());

*** 원본을 훼손

 

 

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);

console.log(fruits.indexOf("melon"));

console.log(fruits.indexOf("grape"));

console.log(

  fruits.find((item) => {

    // return true;

    return item == "melon";

  })

);

console.log(

  fruits.findIndex((item) => {

    // return true;

    return item == "melon";

  })

);

fruits.forEach((v) => {

  console.log(v);

});

console.log(

  fruits.map((v) => {

    console.log(v);

    return v + " juice";

  })

);

console.log(fruits.join(" / "));

console.log(fruits.toString());

console.log(fruits.slice(1, 3));

console.log(fruits.slice(1, -1));

fruits.push("mango");

console.log(fruits);

fruits.pop();

console.log(fruits);

fruits.unshift("orange");

console.log(fruits);

fruits.shift();

console.log(fruits);

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문, 함수 공부하기!!!!!!

 

*** 앞으로 백엔드, 서버를 배우고 블록체인까지 배워 개발자가 되는 그날까지 화이팅!!!!!!!!!!

** 목표에 대해 생각하자!!!!!

* 만들고 싶은것의 흐름을 생각해보기

* 많이 사용해보자!!!!!