javascript

참조 타입과 동일성 테스트 

let temp1 = [1,2,3];

let temp2 = [1,2,3];

temp1 === temp2 --> false

이유 : js에서 새롭게 만들어진 배열은 특정 주소값이 등록되어(즉, 배열의 고유한 주소인 참조를 갖게 됨.), temp1과 temp2의 주소값이 달라 false가 나옴. 

 

let nums = [1,2,3];

let nums2 = nums; 

nums === nums2 --> true

이유 : 이땐 nums 배열 자체를 nums2에 할당해줬기 때문에 메모리에서 같은 것을 참조하게 된다. 즉, 둘은 연결되어 있기 때문에 nums를 push, pop, shift(앞에서 뺌), unshift(앞에서 넣음)을 하면 nums2에도 똑같이 반영되는 것을 알 수 있다.(역도 성립)

---

배열 + const 

배열은 원시타입(string, number, boolean, undefined, null 등등)과 달리 앞에 const를 붙여도 안에 컨테츠를 변경 할 수 있다. 

이것은 참조와 관련이 있다.

객체의 경우 상수로 선언해도 메모리값만 상수일 뿐 객체 안의 내용은 변경이 가능하다. 즉 객체가 저장된 공간을 가리키는 정보만 상수일뿐 그 객체의 정보 자체는 변경이 가능하다. 이런 이유로 JavaScript에서 객체는 변수로 선언할 이유가 없으며 거의 모든 케이스에서 상수로 선언하는게 일반적이다. 또 이렇게 상수로 선언된 객체의 Immutability를 보장하기 위해 여러 테크닉이 쓰이게 되는데 주로 ES6에서 도입된 Spread Operator를 사용하는 것이 일반적이다. 이렇게 객체를 복사하여 사용할 때도 Deep clone하지 않으면 의도치 않게 원본 객체가 변경되어버리기 때문에 많은 주의가 필요하다.

출처 : 나무위키

위 내용에서 객체의 경우 상수로 선언하면 메모리 값만 상수로 처리한다고 한다. 배열도 같다. 배열의 주소값(참조)만 상수로 처리하기 때문에 안에 컨테츠를 push, pop, reverse가 가능하다. 하지만, const nums = [1,2,3]; nums = [1,2,3,4] 이런식으로 새로운 배열(새로운 참조)를 재할당 할 경우 오류가 나면서 불가능하다. 

---

foreach 반복문

foreach 반복문은 오직  Array  객체에서만 사용가능한 메서드임.

const arr = [1,2,3];
arr.forEach(function(x) {
    console.log(x);
})
// 1 2 3

 

for in 반복문

for in 반복문은 모든 객체의 속성들을 반복하여 작업을  수행 가능하다. 객체의 key 값에 접근할 수 있지만, value 값에 접근하는 방법은 제공하지 않는다. 객체 속성들은 내부적으로 사용하는 숨겨진 속성들을 가지고 있는데, 그 중 하나가 object.[Enumerable]임.

 for in 구문은 이 값이 true로 셋팅되어 속성들만 반복할 수 있다. 이러한 속성들을 열거형 속성이라고 부르며, 객체의 모든 내장 메서드를 비롯해 각종 내장 프로퍼티 같은 비열거형 속성은 반복되지 않는다. 

const node = { temp: false, level: 1, age: 23, f(x) { return x; }}
for(let i in node){ console.log(i, node[i]);}
// temp false
// level 1
// age 23 
// f ƒ f(x) { return x; }

 

for of 반복문

배열을 순회할 때 사용한다. 

const arr[1,2,3];
for(let i of arr) {console.log(i)}
// 1 2 3

 

참고 : https://curryyou.tistory.com/202

---

함수 표현식

함수 표현식은 function 문(함수 선언식)과 매우 비슷하고 구문이 거의 같다. 함수 표현식과 function 문 사이의 주요 차이점은 함수 이름으로, 함수 표현식으로 익명 함수를 만들 경우 이 이름을 생략할 수 있다. 함수 표현식은 정의하자마자 실행되는 IIFE (즉시 호출되는 함수 표현식)로 사용될 수 있다.

(참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/function)

 

함수 표현식은 유연한 자바스크립트 언어의 특징을 활용한 선언 방식으로 다른 언어에서는 함수를 '특별한 동작을 하는 구조'로 취급하지만, 자바스크립트에서는 함수를 특별한 종류의 값(value)으로 취급한다. 즉, 함수를 다른 변수에 값으로써 '할당'한 것이 곧 함수 표현식이다.

함수 선언식과 표현식의 차이점

함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.

함수 선언식은 코드를 구현한 위치와 관계없이 호이스팅되어 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.

이러한 이유로 함수 선언식은 코드가 실행되기 전에 로드되지만, 함수 표현식은 인터프리터가 해당 코드 줄에 도달할 때만 로드된다.

(참고: https://jsmokblog.tistory.com/27)

---

고차 함수

js에선 함수 인수로써 함수를 받아 사용할 수 있다.

 

반환 함수

function makeBetweenFunc(min, max) {
  return function(num) {
    return num >= min && num <= max;
  }
}

const test = makeBetweenFunc(100,200);

test(50); // false
test(120); // true
test(250); // false

 

더 참고할 자료: https://velog.io/@jakeseo_me/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%9D%BC%EB%A9%B4-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%A0-33%EA%B0%80%EC%A7%80-%EA%B0%9C%EB%85%90-22-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B3%A0%EC%B0%A8-%ED%95%A8%EC%88%98Higher-Order-Function-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

자바스크립트 개발자라면 알아야 할 33가지 개념 #22 자바스크립트 : 자바스크립트 고차 함수(Highe

---

화살표 함수 

const isEven = function(num) {
  return num % 2 === 0;
}

const isEven1 = (num) => {
  return num % 2 === 0;
}

const isEven2 = num => {
  return num % 2 === 0;
}

// 중괄호와 소괄호의 차이점 : 
// 1. 소괄호를 사용할 땐 return을 사용하지 않아도 됨.
// 2. 표현식을 무조건 하나만 적용해야함. 
// 3. 소괄호가 없어도 똑같음 
const isEven3 = num => (
  num % 2 === 0
)

const isEven4 = num => num % 2 === 0;

---

setTimeout & setInterval

setTimeout 사용법

어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야하는 경우가 있는데, 이럴 때 사용하는 함수가  자바스크립트의 setTimeout()다. 첫번째 인자로는 함수, 두번째 인자로는 지연 시간 밀리초(ms) 단위로 받는다.

setTimeout(function(){console.log("it's setTimeout")}, 2000)

이 함수는 세번째 인자부터 가변 인자를 받는다. 첫번째 인자로 넘어온 함수가 인자를 받는 경우, 세번째 부터 넣어주면 된다.

setTimeout(function(x, y){console.log(x+y)}, 2000, 2, 3)

 setTimeout 함수는 타임아웃 아이디라고 불리는 숫자를 반환한다. 타임아웃 아이디는 함수를 호출할 때 마다 내부적으로 생성되는 타이머 객체를 가리킨다. 이 값을 인자로 clearTimeout() 함수를 호출하면 기다렸다가 실행될 함수를 취소할 수 있다.

const timeoutID = setTimeout(function(x, y){console.log(x+y)}, 2000, 2, 3);
clearTimeout(timeoutID);

 

setInterval 사용법

웹페이지의 특정 부분을 주기적으로 업데이트 해줘야 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우가 있는데, 이때 사용하는 함수가 setInterval() 이다.

 

setInterval() 함수는 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용한다. 위에 setTimeout()과 비슷하다. 

첫번째 인자로 함수를 받고, 두번째 인자로 밀리초를 받는다. 

 

이 함수도 setTimeout과 똑같이 id를 반환하는데, 이것을 인자로 clearInterval()를 호출하면 setInterval() 함수를 중단할 수 있다.

const intervalId = setInterval(() => console.log(new Date()), 2000);
// VM301:1 Sat Jun 10 2023 19:50:54 GMT+0900 (한국 표준시)
// VM301:1 Sat Jun 10 2023 19:50:56 GMT+0900 (한국 표준시)
// VM301:1 Sat Jun 10 2023 19:50:58 GMT+0900 (한국 표준시)
clearInterval(intervalId);

---

Map 메소드

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

const array1 = [1, 4, 9, 16];

// Pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// Expected output: Array [2, 8, 18, 32]

---

Filter 메소드

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다. 

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"]

---

some & every 메소드

some() 메서드는 배열 안의 어떤 요소라도 주어진 판별 함수를 적어도 하나라도 통과하는지 테스트한다. 만약 배열에서 주어진 함수가 하나라도 true을 반환하면 true를 반환하고, 그렇지 않으면 false를 반환한다. 이 메서드는 배열을 변경하지 않는다.

const array = [1, 2, 3, 4, 5];

// Checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// Expected output: true

 

every() 메서드는 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트하고, Boolean 값을 반환한다. (하나라도 false면 false를 반환한다.)

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// Expected output: true

---

Reduce() 함수

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환한다.

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue
);

console.log(sumWithInitial);
// Expected output: 10

 

최솟값과 최댓값을 찾는데 활용하는 예시가 있다.

>const arr = [3,1,-1,5,12,49,32];
>const maxValue = arr.reduce((_max, cur) => Math.max(_max, cur));
>maxValue
>49

---

화살표 함수와 this

https://velog.io/@padoling/JavaScript-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98%EC%99%80-this-%EB%B0%94%EC%9D%B8%EB%94%A9

[JavaScript] 화살표 함수와 this 바인딩

위 블로그가 설명을 너무 잘해놔서 이것만 참고해도 충분할 것 같다.