자바스크립트 기초 tutorial

자바스크립트 기본개념

스코프(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);
}

scope()로 찍어보면 111/ 001 이렇게 나온다. var을 쓰면 블록 안의 내용이 바깥내용에 영향을 끼친다는 뜻.

함수

• 함수 선언식 :

  function do_something() { ... }

• 함수 표현식 :

  // 함수 이름은 생략해도 괜찮아요! (익명함수)
  let do_something = function [함수 이름]() { ... }

• 화살표 함수

      // 화살표 함수는 함수 표현식의 단축형입니다.
  // function까지 생력이 되었죠!
  let do_something = () => { ... }

Class
리액트에는 component라는 개념이 있는데 component는 클래스형과 함수형이 있다.

클래스란?
특정 객체를 생성하기 위해 변수와 함수를 정의하는 일종의 틀. 객체 단위로 코드를 그룹화하고 쉽게 재사용하려고 만드는 것.

클래스를 구성하는 것: 객체를 정의하기 위한 상태(property)와 함수가 있음

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

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

// 여기서 new는 키워드예요. 새로운 무언가를 만들기 위해서 생성자 함수와 함께 씁니다.
// 네, new와 생성자 함수는 세트예요 :) (소근 
let cat = new Cat('perl');
cat.showName();
console.log(cat);

클래스 상속하려면?
이미 만들어 둔 어떤 클래스를 가지고 자식 클래스를 만든다.

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

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

// extends는 Cat 클래스를 상속 받아 온단 뜻입니다.
class MyCat extends Cat {
	// 생성자 함수
  constructor(name, age) {
		// super를 메서드로 사용하기
		super(name); 
		this.age = age; 
	}
	
	// 부모 클래스가 가진 것과 같은 이름의 함수를 만들 수 있습니다.
	// 오버라이딩한다고 해요.
	showName(){
		console.log(this.name);
		// 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를 쓸 수 있게 해준다.
  • 키워드로 사용할 수 있다.
    • 부모 클래스에 대한 필드나 함수를 참조할 수 있다.

Spread 연산자
어떤 객체 안에 있는 요소들을 객체 바깥으로 꺼내준다.

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

console.log(new_array);

조건부 삼항 연산자: if문의 단축 형태

let info = {name: "mean0", id: 0};

let is_me = info.name === "mean0"? true : false;

console.log(is_me);

Array 내장 함수

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

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

concat
배열과 배열을 합치거나 배열에 특정 값을 추가해주는 함수
원본 배열은 변하지 않는다.

const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];

const merge = array_num01.concat(array_num02);

// 중복 항목은 제거하지 않음
console.log(merge);

from
1) 배열로 만들고자 하는 것이나 유사배열을 복사해서 새로운 배열로 만들 때
2) 새로운 배열을 만들 때 (초기화한다고도 표현해요.) 주로 사용합니다!

유사배열이 뭘까?
[ 어떤 값들... ] 이 모양으로 생겼지만 배열의 내장 함수를 사용하지 못하는 친구들입니다. DOM nodelist같은 게 유사배열이에요.

// 배열화 하자!
const my_name = "mean0";
const my_name_array = Array.from(my_name);
console.log(my_name_array); /// ["m","e",...] split한 것 같다.

// 길이가 문자열과 같고, 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);