• 키와 값을 세트로 사용하고 싶을 때
  • 연관 배열을 사용하고 싶을 때

[문법 1]

메소드 의미 반환
new.Map(반복가능한객체*) 맵 객체 초기화  객체(Map)
맵.set(키, 값) 맵에 키와 값의 세트를 등록 객체(Map)
맵.get(키) 키를 지정해 값을 가져오기
맵.has(키) 키의 값 존재 여부 확인 진리값
맵.delete(키) 키의 값 삭제 진리값(삭제 여부)
맵.clear() 키와 값 모두 삭제 없음
맵.keys() 키의 반복자 객체 객체(Iterator)
맵.values() 값의 반복자 객체 객체(Iterator)
맵.entries() 키와 값 배열의 반복자 객체 반환 객체(Iterator)
맵.forEach(콜백)_ 각 세트에 대한 처리 실행  없음

* 생략 가능

 

[문법 2]

속성 의미 타입
맵.size 키와 값 세트의 수 숫자

 

[문법 3]

속성 의미
(키, 값) => {} 키와 값을 가져와 처리

'develop > script' 카테고리의 다른 글

콜 스택(call stack)  (1) 2023.10.19
얕은복사 & 깊은복사  (0) 2023.10.19
배열의 특정 값 찾기 - find(), filter()  (0) 2023.10.19
참조형 복사하기 (Reference Type Copy)  (0) 2023.10.13
변수 상수  (0) 2023.10.12
var a = 1;
function outer() {
	function inner() {
		console.log("3",a); //이 시점에서 변수a는 생성되어있지 않다.
		var a = 3;	//undefined
	}
	inner(); // inner함수 호출
	console.log("2",a);	//1
}
outer(); // outer 함수 호출
console.log("1",a);	//1

실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체라고 했었죠. 그 객체. 즉, 동일 환경에 있는 코드를 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 이것을 위에서 설명드린 ‘스택’의 한 종류인 **콜스택**에 쌓아올립니다. 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장할 수 있어요.

  1. 컨텍스트의 구성
    1. 구성방법(여러가지가 있지만, 사실 우리는 함수만 생각하면 돼요 👍)
      1. 전역공간
      2. eval()함수
      3. 함수(우리가 흔히 실행컨텍스트를 구성하는 방법)
    2. 결국은 특정 실행 컨텍스트가 생성되는(또는 활성화되는) 시점이 콜 스택의 맨 위에 쌓이는(노출되는) 순간을 의미하구요. 곧, 현재 실행할 코드에 해당 실행 컨텍스트가 관여하게 되는 시점을 의미한다고 받아들여주시면 정확합니다! 👍👍

얕은복사

//위 패턴을 우리 예제에 적용해봅시다.
var user = {
	name: 'wonjang',
	gender: 'male',
};

var user2 = copyObject(user);
user2.name = 'twojang';

if (user !== user2) {
	console.log('유저 정보가 변경되었습니다.');
}

console.log(user.name, user2.name);
console.log(user === user2);

깊은복사

var copyObjectDeep = function(target) {
	var result = {};
	if (typeof target === 'object' && target !== null) {
		for (var prop in target) {
			result[prop] = copyObjectDeep(target[prop]);
		}
	} else {
		result = target;
	}
	return result;
}

 배열의 특정 값 찾기 - find(), filter()

1. find()
2. filter()

 

 

1. find()

arr.find(callback(element[, index[, array]])[, thisArg])

 find() 함수는.. 

배열에서 특정 값을 찾는 조건을 callback 함수를 통해 전달하여,

조건에 맞는 값 중 첫번째 값을 리턴합니다.

만약 배열에 조건을 만족하는 값이 없으면 undefined를 리턴합니다.

 

 파라미터 

callback(element, index, array) 함수

조건을 비교할 callback 함수이고, 다음 3개의 파라미터가 전달됩니다.

callback 함수에서 사용자가 테스트할 조건을 정의하고,

만약 배열의 값이 조건에 부합하여 true를 리턴하면,

해당 배열의 값이 find() 함수의 리턴 값이 됩니다.

조건에 부합하는 값을 찾으면, 그 이후의 배열값은 테스트되지 않습니다.

  • element : 현재 처리중인 배열의 element입니다.
  • index : 현재 처리중인 배열의 index입니다. (optional)
  • array : find() 가 호출된 배열입니다. (optional)

thisArg (optional)

callback을 실행할 때 this로 사용할 객체입니다.

 

 리턴값 

callback 함수에 정의한 조건에 부합하는 배열의 첫 번째 값을 리턴합니다.

조건에 부합하는 배열 값이 없을 경우 undefined를 리턴합니다.


** 참조 : callback 함수의 조건에 부합하는 배열의 첫번째 index 값을 알아내기 위해서는 findIndex() 함수를 사용합니다.

2020/08/05 - [IT/Javascript] - [Javascript] 배열 특정 값 위치(index) 찾기 - findIndex()

 

 

 예제 

find() 함수에 isApple()이라는 callback 함수를 전달하였습니다.

isApple() 함수는 파라미터로 입력받은 객체(element)의 name이 'apple'이면 true를 리턴합니다.

find() 함수는 파라미터로 전달된 callback 함수가 true를 리턴하면

해당 배열의 값을 리턴하고, 더 이상 나머지 배열의 값은 callback 함수로 전달하지 않습니다.

결국, find() 함수는 callback 함수에 정의된 조건에 부합하는 배열의 첫 번째 값을 리턴하는 것입니다.

그래서, 위 예제에서 find() 함수는

arr 배열의 여러 객체 중, name === 'apple'인

arr[0]의 값을 리턴하였습니다.

 

 

 

2. filter()

arr.filter(callback(element[, index[, array]])[, thisArg])

 filter() 함수는.. 

find() 함수가 특정 조건에 부합하는 배열의 첫번째 값만을 리턴한다고 한다면,

filter() 함수는 특정 조건에 부합하는 배열의 모든 값을 배열 형태로 리턴합니다.

 

 파라미터 

find() 함수와 동일합니다.

 

 리턴값 

callback 함수에 정의한 조건에 부합하는 배열의 모든 값을 새로운 배열로 리턴합니다.

조건에 부합하는 배열 값이 없을 경우 빈 배열을 리턴합니다.

 

 

 예제 

filter() 함수에 isApple 함수를 callback 함수로 전달하였습니다.

filter() 함수는 arr 배열에서 object의 name === 'apple'인 모든 객체를 찾아서

새로운 배열로 생성하여 리턴합니다.

따라서, 위의 예제에서

filter() 함수가 리턴하는 apples는 length가 2인 배열이고,

배열의 2개의 값은 arr[0], arr[2]의 값과 같다는 것을 확인할 수 있습니다.

'develop > script' 카테고리의 다른 글

콜 스택(call stack)  (1) 2023.10.19
얕은복사 & 깊은복사  (0) 2023.10.19
참조형 복사하기 (Reference Type Copy)  (0) 2023.10.13
변수 상수  (0) 2023.10.12
문자열 찾기  (0) 2023.10.12

1. slice()

number1 을 삭제하지 않은 상태로 값을 복사

let number1 = [1,2,3];
let number2 = number1.slice()

2. for( in)

빈 객체를 생성후 for in 문으로 각 프로퍼티들을 넣어준다

let user1 = {
	name : "suna",
	age : 28
}
    
let user2 = {};

for(let key in user1){
	user2[key] = user1[key];
}

3. function 

위의 코드를 함수로 만들면 아래와 같다

function clone(object){
    let user2 = {};

    for(let key in user1){
        user2[key] = user1[key];
    }
    return result;
}

let user1 = {
	name : "suna",
	age : 28
}

let user2 = clone(user1);

다만 아래의 경우 user1 에 객체가 있을 경우 

예를들어

user1 = {like : ["apple", "banana"]}

일 경우 주소값이 복사되는데 이는 아래의 코드로 수정하면 해결된다.

function clone(object){
	if(object === null || typeof object !== "object")
    	return object;
    let temp;
    if(Array.isArray(object)){
    	temp=[];
	}else{
    	temp={}
    }
    for (let key of Object.keys(object)){
    	temp[key] = cloneObject(object[key])
    }
    return temp;
}

let user1 = {
	name : "suna",
	age : 28
}

let user2 = clone(user1);

 

'develop > script' 카테고리의 다른 글

얕은복사 & 깊은복사  (0) 2023.10.19
배열의 특정 값 찾기 - find(), filter()  (0) 2023.10.19
변수 상수  (0) 2023.10.12
문자열 찾기  (0) 2023.10.12
Math메소드 외 소수점 처리 방법 _ toFixed()  (0) 2023.10.12

변수 : 메모리에 저장하고 읽어들여서 재사용한다.

[변수의 5가지 주요 개념]

변수 이름 : 저장된 값의 고유 이름

변수 값 : 변수에 저장된 값

변수 할당 : 변수에 값을 저장하는 행위

변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위

변수 참조 : 변수에 할당된 값을 읽어오는것

 

변수를 선언할 수 있는 3가지 방법 : var, let, const

변수 변수 선언 변수 덮어쓰기
var var name = "sunah" var name = "sunah"
var name = "kim suna"
let let name = "sunah" let name = "sunah"
name = "kim suna"
const const name = "sunah" const로 선언한 변수는 변경불가

 

'develop > script' 카테고리의 다른 글

배열의 특정 값 찾기 - find(), filter()  (0) 2023.10.19
참조형 복사하기 (Reference Type Copy)  (0) 2023.10.13
문자열 찾기  (0) 2023.10.12
Math메소드 외 소수점 처리 방법 _ toFixed()  (0) 2023.10.12
Math 객체  (0) 2023.10.12

+ Recent posts