나만의 기록들

script에서 사용하는 배열의 중복을 제거하는 방법에 대해 알아보자.

구글에 검색해봐도 대부분 비슷한 방법만이 존재해서 나 역시 그냥 기록해두고자 한다.

▷ 예제1) 배열 함수인 forEach() 와 includes() 활용 (ft. indexOf() 사용)

var arr = [1, 2, 3, 4, 2, 4, 5, 1];

//중복 제거 [1, 2, 3, 4, 5] - includes()
var removeOverLapArr1 = [];
arr.forEach(function(item, index){
	if(!removeOverLapArr1.includes(item)){
		removeOverLapArr1.push(item);
	}
});

//중복 제거 [1, 2, 3, 4, 5] - indexOf()
var removeOverLapArr2 = [];
arr.forEach(function(item, index){
	if(!(removeOverLapArr2.indexOf(item) >= 0)){
		removeOverLapArr2.push(item);
	}
});

사실 두번째 예제는 쉽게 사용할 수 있는 공통적인거라 생각하면 된다.

단순하게 반복문을 돌리고 포함여부만 체크해주면 되니 includes()를 사용하거나 indexOf()를 사용하거나 별 의미없고,

그냥 체크만 해줄수 있다면 뭐든 사용해도 상관없다.

▷ 예제2) 배열 함수인 filter() 와 indexOf() 활용

var arr = [1, 2, 3, 4, 2, 4, 5, 1];

//중복 제거 [1, 2, 3, 4, 5]
var removeOverLapArr = arr.filter(function(item, index){
	return arr.indexOf(item) === index;
});

//중복된 값만 불러오기 [2, 4, 1]
var overlapArr = arr.filter(function(item, index){
	return arr.indexOf(item) !== index;
});

배열 함수인 filter() 와 indexOf()를 활용한 것인데, indexOf() 함수 특징이 일치하는 데이터의 첫번째 index를 반환하는것이기때문에 이 특징을 이용하여 필터링 해주어 중복을 제거해 준것이다.

이를 반대로 활용하면 중복된 값만 불러올 수 있다.

▷ 예제3) Set 객체를 사용한 중복제거

var arr = [1, 2, 3, 4, 2, 4, 5, 1];

//중복 제거 [1, 2, 3, 4, 5]
var removeOverLapArr = Array.from(new Set(arr));

Set 객체는 ES6에서 등장한 새로운 data object 이며 중복 없는 데이터의 표현이 가능하다.

이러한 특징을 이용하여 배열의 중복을 제거한 것이다.

예제를 1번부터 3번까지 봤는데 사실 1번과 2번에는 별 차이가없다.

그리고 성능상으로 볼때 3번예제가 가장 좋다고 하기에 저 방법을 추천한다.

참고 : https://redcow77.tistory.com/556

Object.is() 메서드에 대해 알아보자.

▷ 구문

Object.is(value1, value2);

이중등호(==)와 삼중등호(===) 처럼 두개의 값을 비교해주는 메서드이다.

우선 Object.is() 메서드는 IE에서는 사용이 불가능하다는 점을 알아두고 예제를 통해 접해보자.

▷ 예제1) Object.is() 기본 사용법

Object.is('mine', 'mine'); // true
Object.is(window, window); // true
Object.is(undefined, undefined); // true
Object.is(null, null); // true

Object.is('mine', 'it'); // false
Object.is([], []); // false
Object.is({}, {}); // false

var record = {a : 1, b : 2};
Object.is(record, record); // true
Object.is(record, {a : 1, b : 2}); // false

var nums = [1, 2, 3 ,4];
Object.is(nums, nums); // true

var nums2 = nums;
Object.is(nums, nums2) // true

var nums2 = nums.slice();
Object.is(nums, nums2) // false

// 특별한 경우
Object.is(0, -0); // false
Object.is(-0, -0); // true
Object.is(NaN, 0/0); // true

Object.is() 메서드 사용법에 대해 어느정도 접해봤는데,

Object.is() 메서드와 함께 알아두면 좋은게 다들 많이 사용하는 이중등호(==) 와 삼중등호(===) 이다.

왜 알아두는게 좋냐하면 이 3개가 전부 두개의 값을 비교해주는것임에도 불구하고 서로 기준이 다르기 때문이다.

이중등호(==) 는 많이들 알다시피 느슨한 비교를 제공해주며,

삼중등호(===) 는 좀 더 엄격한 비교를 제공해준다.

Object.is() 메서드는 어느정도는 삼중등호(===) 와 비슷하다고 보면 될텐데 이 역시 완전히 같지는 않다.

아래 도표를 통해 뭐가 어떻게 다른지 확인해보자.

▷ 이중등호(==), 삼중등호(===), Object.is() 비교

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/is

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness

특정 조건에 맞는 배열 요소 값의 위치를 찾아내는 Array.prototype.findIndex() 말고도

특정 조건에 맞는 배열 요소 값을 그대로 반환해주는 Array.prototype.find() 메서드 역시 존재한다.

findIndex() 메서드에 대해서는 아래 링크를 통해 접해보자.

[JavaScript] arr.findIndex() - 조건에 맞는 배열의 특정 값 위치(index) 찾기 (Array.prototype.findIndex())

이제 본문으로 다시 넘어와 구문부터 알아보자.

▷ 구문

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

callback : callbackFunction 이며 function 안에서 조건에 따라 값을 반환한다.

element : 현재 요소 (ex. 반복문의 현재 요소)

index : 현재 요소의 인덱스

array : findIndex 함수를 사용하는 대상 배열

thisArg : callback을 실행할 때 this로 사용하는 값.

예제를 통해 쉽게 접근해보자.

▷ 예제1) Array.prototype.find() 메서드 기본 사용법

var mine = [1, 2, 3, 4, 5];

var record = mine.find(function(item, index, arr){
	return item > 3
});

console.log(record); //4

findIndex() 메서드와 동일하게 조건이 맞는 첫번째 요소의 값을 그대로 반환한다.

3보다 큰 수는 4, 5 가 존재하는데 4가 먼저 스캔에 걸렸기때문에 4를 반환하고 그대로 종료된것이다.

▷ 예제2) 배열에서 객체 찾기

var mine = [
	{name : 'sonata', year : 2021},
	{name : 'avante', year : 2021},
	{name : 'volvo',  year : 2019},
	{name : 'sonata', year : 2017},
	{name : 'tesla',  year : 2020}
];

var record = mine.find(function(item, index, arr){
	return item.name == 'sonata'
});

console.log(record); //{name : 'sonata', year : 2021}

▷ 예제3) 배열에서 찾는 값이 없을 경우

var mine = [1, 2, 3, 4, 5];

var record = mine.find(function(item, index, arr){
	return item > 5
});

console.log(record); //undefined

find() 메서드를 사용했을 경우 만약 해당 배열에

조건에 맞는 요소가 존재하지 않는다면 find() 메서드는 undefined를 반환한다.

마지막으로 알아둬야할건 Array.prototype.find() 메서드는 IE에서는 사용이 불가능하다.

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/find

객체가 특정 키를 가지고 있는지 확인하는 Object.prototype.hasOwnProperty() 메서드에 대해 알아보자.

▷ 구문

obj.hasOwnProperty(prop)

prop: 확인 하고자 하는 프로퍼티 명

예제를 통해 접근해보자.

▷ 예제1) Object.prototype.hasOwnProperty()

var obj = {};
obj.mine = 42;

console.log(obj.hasOwnProperty('mine'));
// true

console.log(obj.hasOwnProperty('it'));
// false

예제에서 보는것 처럼 해당 객체의 프로퍼티의 존재 유무를 판단하는 것이다, 프로퍼티의 값이 무엇이든 프로퍼티가 존재하기만 하면 true를 반환하고 존재하지 않을경우 false를 반환한다.

사실 이쯤되면 생각하는게 도대체 이걸 왜쓸까...? 일것이다.

굳이 hasOwnProperty() 메서드를 사용하지 않아도 특정 키값이 있는지 없는지 정도는 확인이 가능하기 때문이다.

우선 첫번째 이유는 아무래도 코드의 가독성 향상이다.

hasOwnProperty() 메서드는 메서드명에서부터 모르는 사람이 보더라도 이게 무슨 기능을 하는지 알 수 있다.

▷ 예제2) hasOwnProperty()를 사용하고 안하고의 차이

var obj = {};
obj.mine = 42;

//hasOwnProperty() 사용
if(obj.hasOwnProperty('mine')){
	...
}

//hasOenProperty() 미사용
if(obj.mine != undefined){
	...
}

그리고 두번째 이유는 프로토타입 체인 문제 때문이다.

스크립트에는 프로토타입이 존재하는데 객체에 프로토타입 체인을 통해 추가적으로 프로퍼티를 삽입할 수 있다.

흔히들 인터넷에 hasOwnProperty() 메서드를 검색해보면 for ~ in 객체 반복문과 같이 나오는데

for ~ in 문법은 열거가능한 프로퍼티를 반복하기 때문에 프로토타입 체인으로 추가한 프로퍼티 역시 반복 대상이다.

예제를 통해 자세히 알아보자.

▷ 예제3) for ~ in 문법과 hasOwnProperty() 메서드

var obj = {};
obj.mine = 42;
Object.prototype.toRecord = function() {
	console.log('hi')
};

obj.mine // 42
obj.toRecord // f() {console.log('hi')}

for(mine in obj){
	console.log('obj property : ' + mine); 
	console.log('hasOwnProperty : ' + obj.hasOwnProperty(mine));
}

이런식으로 프로토타입 체인을 통해 추가한 프로퍼티에 대해 hasOwnProperty()는 어떻게 반응할까?

▷ 결과

obj property : mine
hasOwnProperty : true
obj property : toRecord
hasOwnProperty : false

이런식으로 프로토타입 체인을 사용하게 되면 직접적으로 obj.toRecord 라고 선언해도 접근이 되며, for ~ in 문법에서도 접근하게 된다.

그래서 이러한 프로토타입 체인을 통해 생성된 프로퍼티에 대해 접근하지 않으려 hasOwnProperty() 메서드를 사용하는 것이다.

위에 저렇게 설명을 해도 일반적인 상황에서는 굳이 사용할 필요는 없다.

단지 예상하지 못한 에러 방지나 가독성 향상을 위해서 사용해주면 좋을것 같다.

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty

스크립트를 사용하는 중에 배열 또는 문자열을 잘라서 사용하는 경우가 많은데

배열 과 문자열을 자르는데 사용하는 동일한 메서드 slice()에 대해 알아보자.

내부적으로는 각각 String.prototype.slice() 와 Array.prototype.slice()로 서로 다르지만

직접 사용을 함에는 같은 방식을 사용한다.

▷ 구문

.slice(beginIndex [, endIndex])

문자열과 배열 둘다 인덱스를 가지는데 그 인덱스를 가지고 잘라서 사용이 가능하다.

예제를 통해 알아보도록 하자.

▷ 예제1) String.prototype.slice()

var str = 'it is mine-it-record tistory blog';

console.log(str.slice(21));
// "tistory blog"

console.log(str.slice(6, 20));
// "mine-it-record"

console.log(str.slice(-4));
// "blog"

console.log(str.slice(-12, -5));
// "tistory"

예제를 보면 알겠지만 endIndex는 생략이 가능하며 생략할 경우 시작점 이후의 문자열을 반환한다.

그리고 특이하게 음수가 사용이 가능한데 음수의 경우 뒤에서 부터 시작한다.

그래서 문자열이 길 경우 양수 음수의 조합으로도 많이 사용하긴 한다.

▷ 예제2) Array.prototype.slice()

var cars = ['Avante', 'Volvo', 'Tesla', 'Sonata', 'Grandeur'];

console.log(cars.slice(2));
// ["Tesla", "Sonata", "Grandeur"]

console.log(cars.slice(2, 4));
// ["Tesla", "Sonata"]

console.log(cars.slice(1, 5));
// ["Volvo", "Tesla", "Sonata", "Grandeur"]

console.log(cars.slice(-2));
// ["Sonata", "Grandeur"]

console.log(cars.slice(2, -1));
// ["Tesla", "Sonata"]

array.slice()의 경우도 string.slice()와 동일하게 인덱스 기준으로 자르며 양수와 음수의 의미도 동일하다.

Array.prototype.slice()의 경우 단순하게 자르기만을 위해 사용한다기보다는 얕은복사를 위해 많이들 사용한다.

배열과 객체의 경우 원본과 항상 이어져있는데 그 연결을 잘라 원본에 영향을 주지않는 새로운 배열을 만들기 위해 사용하는 것이다.

말로 설명이 어렵다면 아래 예제를 통해 알아보자.

▷ 예제3) array.slice()의 얕은복사

var cars = ['Avante', 'Volvo', 'Tesla', 'Sonata', 'Grandeur'];

var arr1 = cars;
arr1[0] = 'spark'

console.log(cars);
// ["spark", "Volvo", "Tesla", "Sonata", "Grandeur"]

console.log(arr1);
// ["spark", "Volvo", "Tesla", "Sonata", "Grandeur"]

var arr2 = cars.sllce(0);
arr2[0] = 'Avante'

console.log(cars);
// ["spark", "Volvo", "Tesla", "Sonata", "Grandeur"]

console.log(arr1);
// ["Avante", "Volvo", "Tesla", "Sonata", "Grandeur"]

slice()를 통해 원본 배열을 다른 변수에 집어넣었다면 아무리 바꿔도 원본에 영향을 주지 않지만

그냥 주입만 했다면 원본과 복사본 둘다 동시에 변하게된다.

javascript에서 사용하는 객체를 문자열로 변환하는 방법에 대해 알아보자.

사실 객체를 문자열로 변환하고자 할때 toString()이라는 메서드에 대해 많이 들어왔을텐데

script에서 객체를 대상으로 toString()을 사용한다면 전혀 생각지도 못한 결과가 나온다.

아래 예제를 통해 결과를 확인해보자.

▷예제1) obj.toString()

var it = {a: 'mine', b : 'it', c : 'record'}

it.toString(); // "[object Object]"

이렇게 되면 "[object Object]"라는 반환값을 얻게 되는데 이게 도통 뭔지 모르겠다...

(아래 잘 정리된 게시글이 있으니 확인해보자. 좀 어려울 수 있다.)

▶ 자바스크립트에서 [object Object] 가 대체 뭘까?

이제 이렇게 되면 우리는 어떻게 객체를 문자열로 변환시켜야할까?

바로 JSON 메서드를 사용하는 것이다.

이것도 바로 예제를 통해 알아보자.

▷예제2) JSON.stringify()

var it = {a: 'mine', b : 'it', c : 'record'}

JSON.stringify(it);
// "{\"a\":\"mine\",\"b\":\"it\",\"c\":\"record\"}"

JSON.stringify()를 사용했을때 위 결과 처럼 역슬래시(\)가 갑자기 붙은걸 확인할 수 있는데

이는 JSON DATA 인식문제로 따음표를 역슬래시 + 따음표로 인식하기때문에 저렇게 변환된것이다.

이는 그냥 JSON.parse()를 사용하게되면 해결이 된다.

(다른곳에서 사용한다면 거기서 해결을 하거나 해야하는거같다.)

▷예제3) JSON.parse()

var it = {a: 'mine', b : 'it', c : 'record'}

var jsonStr = JSON.stringify(it);
// "{\"a\":\"mine\",\"b\":\"it\",\"c\":\"record\"}"

var jsonParse = JSON.parse(jsonStr);
// {a: 'mine', b : 'it', c : 'record'}