형님의 Js 필수 기본개념, 내장 배열 method 개인과외 - 1

상수

상수는 변하지않는 변수. const로 선언

변수

변수는 let으로 선언

(var은 선언이 최상단으로 올라오는 호이스팅과 함수 스코프의 모호함 때문에 요즈음은 대부분 let 쓴다.

원시타입(primitive types)

-단일 값을 저장한다.(stack에 독립적으로)
-숫자, 문자열, 불리언, undefined, null
-값이 저장, 복사가 된다

참조타입(reference types)

-메모리 주소를 참조해 값에 접근한다(heap에 실제값 저장, 스택에 메모리주소값 저장
-객체(object), array, function

단일값 저장과 메모리 참조 방식의 차이는, 복사한 값이 원본의 변경에 영향을 받냐 안받냐, 변경할수있느냐 없느냐이다
원시값은 접근 복사가 빠르지만 크기가 제한돼있고, 참조값은 접근복사가 느리지만 크기가 커도 된다​​​​​​​​​​​​​​​​

함수

함수 선언 (전체가 호이스팅 됨)

function hi(name){ console.log(`안녕 ${name}아`);};

hi('bob');

함수 표현식 (변수 선언만 호이스팅 됨)

let hi = function(name){console.log(`임마 난 ${name}야.`);};

hi('종우')

익명함수

이름이 없는 함수로, 주로 다른 함수의 인자로 전달되는 콜백함수로 사용되거나 변수에 할당될 때 사용된다.

기본형태 : function( ) { }

화살표 함수

let hi =(name) => {console.log(`야 난 ${종우}라고`);};

hi('종우');

let something = function(x){. . .}; 
//여기서
let something = x => {. . .};
//처럼, 익명함수의 선언을 [매개변수] => {함수본문} 이런 구조로 나타내버리는거구나. 매개변수가 없으면 ()=>{}

메소드

method가 객체 내에 존재하는 함수구나! js는 프로토타입 체인의 객체 구조이기 때문에 메소드를 쓸 일이 많은거구나. 시스템 내장 함수랑 객체 내 요소를 쓸 일이 많아서! Js에서, 원시타입을 제외하고는 모든 것이 객체이고 객체 리터럴은 가장 간단히 만들 수 있는 객체로, 키밸류 쌍 값을 가진다.

콜백 함수

콜백 = 다른 함수의 매개변수에다가 함수 넣는 거

콜백함수 = 이때 넣은 이미 정의된 함수 or 익명함수

그러면 좋은점 : 비동기 처리, 코드 재사용.

if 문

if(조건){

} else if(조건){

} else if(조건){

 else {}

삼항 연산자

조건 ? 참일 때 값 : 거짓일 때 값

let agejudge = age>=20 ? adult : child

for 문

for (초기화; 조건; 증감) {반복 실행될 구조}
for (let i=0; i<10; i++) { console.log(`은표형님 고맙습니다 만세삼창 ${i+1}번 복창`) }

// break continue문. continue는 현재 반복을 즉시 종료하고 다음 반복으로 넘어간다
for (let i = 0; i < 10; i++) {
    if (i === 5) break; // 5에서 루프 종료
    if (i % 2 === 0) continue; // 짝수는 건너뛰기
    console.log(i);
}

배열을 훑을 수도 있고 변수를 여러개 초기화 할 수 도 있다.

map 내장 배열 method

let newArray = array.map(callback(currentValue[, index[, array]])[, thisArg])
//callback함수는 각 요소에 대해 실행할 함수이며 이 함수는 새로운 요소를 반환해야한다.
//currentValue : 현재 처리중인 요소
//index(선택적) : 현재 처리중인 요소의 인덱스
//array(선택적) : map()을 호출한 원본 배열
//thisArg(선택적) :콜백 함수 내에서 this로 사용될 값

let numbers = [ 1,2,3,4,5];
let goabtwo =numbers.map(function(num){return num*2; });
console.log(goabtwo) // [2,4,6,8,10]

map 메소드는 배열의 각 요소들에 내가 넣은 콜백함수를 적용시켜 새로운 배열을 만든다. 위는 goabtwo 배열에 콜백함수를 적용한 요소들을 순서대로 포함시키는 함수이다.

filter 내장 배열 method

array.filter(callback(element[, index[, array]])[, thisArg])
// element : 처리할 현재 요소
// index(선택적) : 처리할 현재 요소의 index
// array(선택적) : filter을 호출한 배열
//thisArg(선택적) : 콜백을 실행할 this로 사용할 값

let users = [
    { name: "Alice", age: 21 },
    { name: "Bob", age: 17 },
    { name: "Charlie", age: 30 },
    { name: "David", age: 15 }
];

let adults = users.filter(function(element){return element.age>=20})

console.log(adults)

 

users에서 내가 선언하진 않았지만 프로토타입 체인으로 존재하는 filter함수를 점표기법으로 가지고와서 콜백함수로 익명함수를 넣는다. 이 가상함수는 age 속성이 20 이상인 users배열의 객체를 새로운 adults 배열에 포함시킨다.

 

Js에서는 객체의 속성에 접근할 때 점표기법(.)을 사용한다. element.age는 element 객체의 age 속성 값을 가져온다.

filter() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행한다. (객체의 속성으로 정의된 함수를 메소드라고 한다.)

이 콜백함수는 배열의 각 요소를 인자로 받는다.

element는 콜백함수의 매개변수 이름이다. 자유롭게 선택가능하다.

reduce 내장 배열 method

array.reduce((accumulator, currentValue, index, array) => { ... }, initialValue)

let 변수명 = 처리하고싶은배열.reduce(function(계산결과누적변수, 현재처리중인배열요소) 
{return 계산결과누적변수 + 현재처리중인배열요소}, 계산결과누적변수의 초기값);

reduce는 배열의 모든 요소를 순회해 하나의 결과값을 만들어내기 위한 메소드이다. 형태는 위와 같다. 

처리하고 싶은 배열에다가 점표기법으로 호출한 reduce 메소드에 콜백함수랑 초기값. 이 두개가 매개변수로 들어가며, 콜백함수는 누적변수와 현재요소. 이 두 변수로 이루어지는 것이다.

 

reduce는 다음과 같은 상황에 쓰인다

1. 배열의 합계 계산

2. 배열의 최대, 최소값 찾기

3. 객체 배열에서 특정 속성의 합계 찾기

4. 배열을 객체로 변환하기.( [a,a,a,b,c,b,c,]를 {a : 3, b : 2, c : 2}  이런식으로)

5. 배열 속의 배열을 하나의 배열로 만들기

6. 배열 속의 중복되는 요소들을 제거하기