[JavaScript]기초 정리

41433 단어 JavaScriptJavaScript

JavaScript 기초정리

ES6
자바스크립트 표준 문법 중 하나로 가장 보편화된 친구

(1) Class

클래스란?

객체 지향 프로그래밍에서 클래스는 특정 객체를 생성하기 위해 변수와 함수를 정의하는 일종의 틀을 말한다.
객체를 정의하기 위한 상태와 함수로 구성되어 있다.
객체 단위로 코드를 그룹화하고 쉽게 재사용하려고 사용한다.

1) 클래스를 구성하는 것

클래스 안에는 객체를 정의하기 위한 상태(property)와 함수가 있다.

class Cat {
    // 생성자 함수
    constructor(name) {
        // 여기서 this는 이 클래스입니다.
        this.name = name;
    }

    // 함수
    showName() {
        console.log(this.name);
    }
}

let cat = new Cat('perl');
cat.showName();
console.log(cat);

- 생성자 함수: 클래스 인스턴스를 생성하고 생성한 인스턴스를 초기화(초기 값을 설정한다고 생각)하는 역할이다.
- 함수: 어떤 일을 하는 함수

2) 클래스를 상속하려면?

클래스를 상속한다는 건, 이미 만들어 둔 어떤 클래스를 가지고 자식 클래스를 만든다는 것이다.

class Cat {
    // 생성자 함수
    constructor(name) {
        // 여기서 this는 이 클래스입니다.
        this.name = name;
    }

    // 함수
    showName() {
        return this.name;
    }
}

// extends는 Cat 클래스를 상속 받아 온단 뜻입니다.
class MyCat extends Cat {
    // 생성자 함수
    constructor(name, age) {
        // super를 메서드로 사용하기
        super(name);
        this.age = age;
    }

    // 부모 클래스가 가진 것과 같은 이름의 함수를 만들 수 있습니다.
    // 오버라이딩한다고 해요.
    showName() {
        // super를 키워드로 사용하기
        return '내 고양이 이름은 ' + super.showName() + '입니다.';
    }

    showAge() {
        console.log('내 고양이는 ' + this.age + '살 입니다!');
    }
}

let my_cat = new MyCat('perl', 4);
my_cat.showName();
my_cat.showAge();
  • super 키워드
    - 메소드로 사용할 수 있다.(constructor 안에서)
    - 부모의 constructor를 호출하면서 인수를 전달한다.
    - this를 쓸 수 있게 해준다.
    - 키워드로 사용할 수 있다.
    - 부모 클래스에 대한 필드나 함수를 참조할 수 있다.

(2) let, const와 Scope

  • 스코프(Scope)란?
    우리가 어떤 변수를 선언했을 때, 그 변수를 사용할 수 있는 유효범위를 스코프라고 부른다. 즉 변수에 접근할 수 있는 범위 이다.
    - var : 함수 단위
    - let : block 단위(변수: let으로 선언한 변수는 값이 변할 수 있습니다.)
    - const : block 단위(상수: 한번 선언한 값은 바꿀 수 없습니다.)
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);
}

(3) =과 ==과 ===

  • =
    =는 할당을 뜻한다.
    어떤 변수에 값을 할당할 때 써요.

  • ==
    ==는 등차이다.
    유형을 비교하지 않는 등차이다. 변수 값을 기반으로 비교한다..
    (ex. 0 == "0"은 true를 반환한다.)

  • ===
    ===도 등차이다.
    엄격하게 유형도 비교하는 등차이다.
    (ex. 0 === "0"은 false를 반환한다.)

(4) Spread 연산자 (Spread 문법)

어떤 객체 안에 있는 요소들을 객체 바깥으로 꺼내주는 문법이다.

let array = [1,2,3,4,5];
// ... <- 이 점 3개를 스프레드 문법이라고 불러요.
// 배열 안에 있는 항목들(요소들)을 전부 꺼내준다는 뜻입니다.
// 즉 [...array]은 array에 있는 항목을 전부 꺼내 
// 새로운 배열([] => 이 껍데기가 새로운 배열을 뜻하죠!)에 넣어주겠단 말입니다!
let new_array = [...array];

console.log(new_array);

(5) 조건부 삼항 연산자

삼항 연산자는 if문의 단축 형태이다.

사용법:
조건 ? 참일 경우 : 거짓일 경우

let info = {name: "mean0", id: 0};
let is_me = info.name === "mean0"? true : false;

console.log(is_me);

자주 쓰이는 Array의 내장함수

자주 사용되는 Array의 내장 함수 4개 map, filter, concat, from

(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);
// 원본 배열은 그대로 있죠!
console.log(array_num);

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

주의! concat은 중복 항목을 제거해주지 않는다.

중복항목을 제거하기 위해선 다른 내장함수와 함께 사용해서 제거해야 한다.

- 중복제거 방법

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

(4) from

from의 쓰임새
-1) 배열로 만들고자 하는 것이나 유사배열을 복사해서 새로운 배열로 만들 때
-2) 새로운 배열을 만들 때 (초기화한다고도 표현) 

    **유사배열?**
    [ 어떤 값들... ] 이 모양으로 생겼지만 배열의 내장 함수를 사용하지 못하는 친구들입니다. DOM nodelist같은 게 유사배열이에요.
// 배열화 하자!
const my_name = "mean0";
const my_name_array = Array.from(my_name);
console.log(my_name_array);

// 길이가 문자열과 같고, 0부터 4까지 숫자를 요소로 갖는 배열을 만들어볼거예요. 
const text_array = Array.from('hello', (item, idx) => {return idx});

console.log(text_array);

// 새 배열을 만들어 보자!(=> 빈 배열을 초기화한다고도 해요.)
// 길이가 4고, 0부터 3까지 숫자를 요소로 갖는 배열을 만들어볼거예요. 
const new_array = Array.from({length: 4}, (item, idx)=>{ return idx;});

console.log(new_array);

내장 함수 사용해보기

크롬 브라우저를 열고 콘솔 창에서 해보자

(1) 배열에서 고양이가 몇 마리인지 세기 - map으로 해보자!

아래 for문을 map으로 바꿔봅시다.

const animals = ["강아지", "고양이", "햄스터", "강아지", "고양이", "고양이", "토끼"];

let count = 0;
for (let i = 0; i < animals.length; i++) {
    let animal = animals[i];
    if (animal === "고양이") {
        count += 1;
    }
}
console.log(count);
  • 정답 확인하기
const animals = ["강아지", "고양이", "햄스터", "강아지", "고양이", "고양이", "토끼"];

let count = 0;
animals.map((animal) => {
    if (animal === "고양이") {
        count += 1;
    }
});
console.log(count);

(2) 배열에서 filter로 해보자!

고양이들만 새 배열에 넣어볼까요?
아래 for문을 보고 filter로 바꿔봐요!

const animals = ["복슬 강아지", "검정 고양이", "노란 햄스터", "강아지", "노랑 고양이", "고양이", "흰 토끼"];

let cats = [];
for (let i = 0; i < animals.length; i++) {
    let animal = animals[i];
    // indexOf는 파라미터로 넘겨준 텍스트가 몇 번째 위치에 있는 지 알려주는 친구입니다.
    // 파라미터로 넘겨준 텍스트가 없으면 -1을 반환해요!
    // 즉 아래 구문은 고양이라는 단어를 포함하고 있니? 라고 묻는 구문이죠!
    if (animal.indexOf("고양이") !== -1) {
        cats.push(animal);
    }
}
console.log(cats);
  • 정답 확인하기
const animals = ["복슬 강아지", "검정 고양이", "노란 햄스터", "강아지", "노랑 고양이", "고양이", "흰 토끼"];

let cats = animals.filter((animal) => {
        return animal.indexOf("고양이") !== -1;
});
console.log(cats);

(3) 두 배열을 합쳐보자! - concat으로 해보자!

아래 두 배열을 하나로 합쳐보세요!

const dogs = ["검은 강아지", "노란 강아지", "흰 강아지"];
const cats = ["검은 고양이", "복슬 고양이", "노란 고양이"];
  • 정답 확인하기
const dogs = ["검은 강아지", "노란 강아지", "흰 강아지"];
const cats = ["검은 고양이", "복슬 고양이", "노란 고양이"];

const animals = dogs.concat(cats);

console.log(animals);

(4) 특정 과일 갯수 세기 문제

배열에서 특정 원소 갯수 구하기 - map 를 함수를 사용해서 해결하기

다음에서 '딸기'는 몇 개일까? - 이번엔 자바스크립트 콘솔창에서!

let fruit_list = ['사과', '감', '감', '배', '포도', '포도', '딸기',
    '포도', '감', '수박', '딸기']

let count = 0;
for (let i = 0; i < fruit_list.length; i++) {
    let fruit = fruit_list[i];
    if (fruit == '딸기') {
        count += 1;
    }
}
console.log(count);
  • map 해답
let fruit_list = ['사과', '감', '감', '배', '포도', '포도', '딸기', '포도', '감', '수박', '딸기']
let count = 0;
fruit_list.map((f) => {
    if (f == "딸기") count += 1
})

console.log(count)
[JS] 올바른 괄호
Data Structure: Tree (트리)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage