상수
상수는 변하지않는 변수. 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. 배열 속의 중복되는 요소들을 제거하기
'data lab' 카테고리의 다른 글
형님의 Js 화살표함수와 구조분해할당, 얕은복사 깊은복사 개인과외 - 3 (0) | 2024.07.16 |
---|---|
형님의 js 필수 전수업review 과외 2 (0) | 2024.07.15 |
백준 2525번 python 파이썬 (1) | 2024.07.10 |
react native - Expo 공부 3 - expo firebase 연동하기 - 실패 (0) | 2024.07.08 |
react native - Expo 공부 2 -구글 플레이 콘솔 개발자 계정 등록하기 (0) | 2024.07.07 |