📅 TIL #16

👉 arr.indexOf()

indexOf() 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다.

let arr = ["welcome", "to", "My", "blog"];

console.log(arr.indexOf("to")); //  1
console.log(arr.indexOf("blog")); //  3
console.log(arr.indexOf("useong")); // -1

값은 인덱스 값을 반환하고, 찾고자 하는 문자가 없으면 -1 을 반환한다!

👉 mutable(참조타입)과 immutable(원시타입)

1. mutable

• 변할 수 있다는 뜻

• 해당 데이터 주소를 찾아서 값을 변경함

• 대표적인 메서드 : pop(), push(), shift(), unshift(), splice(), reverse(), sort()

• 문제 예시 :

push()를 이용해서 주소값이 동일한 배열에 가장 마지막요소에 인자값을 넣고 싶다고 가정하자.

let arr = ["welcome", "to", "My", "blog"];

//1번째 함수
function newArr1(arr, el) {
    return arr.push(el);
}

//2번째 함수
function newArr2(arr, el) {
    arr.push(el);

    return arr;

    console.log(newArr1, "useong"); // 5
    console.log(newArr2, "useong"); // ["welcome","to","My","blog","useong"]
}

이러한 차이를 보이는 이유는 mutable(참조타입)은 직접 변경을 해야 하기 때문이다. push 메서드는 주어진 값으로 입력하는 것을 어디에서 시작할 것인지를 결정하기 위해 length 속성에 의존한다.

그렇기때문에, 2번째 함수처럼 직접 변경을 해주고 반환을 하게 되면 원하는 값을 얻을 수 있다.

1. immutable

• 불변, 변할 수 없다는 뜻

• 해당 데이터 주소와 다른 새로운 주소(새로운 배열)에 값이 할당

• 대표적인 메서드 : slice(), concat(), join(), reduce(), map(), includes()

• 문제 예시 :

slice()를 사용해서 배열과 인덱스를 입력받아 주어진 인덱스 이후의 요소들을 갖는 새로운 배열을 가져오자.

let arr = ["hello", "welcome", "to", "My", "blog"];

//1번째 함수
function newArr1(arr, n) {
    return arr.slice(n);
}

//2번째 함수
function newArr2(arr, n) {
    arr.slice(n);

    return arr;

    console.log(newArr1, 1); // ["welcome", "to", "My", "blog"]
    console.log(newArr2, 1); // ["hello", "welcome", "to", "My", "blog"]
}

이 둘의 차이는 뭘까 ?

첫번째 함수는 slice가 immutable 하기 때문에 원본 배열은 따로 있고, 새로운 배열에 새로운 요소를 담아서 리턴을 한 것이기 때문에 원하는 값을 얻을 수 있었다.

원본배열은 따로 있고, 주소값도 다른 새로운 배열을 리턴한 것이다. (얕은 복사의 개념)

그렇다면, 두번째는 변함없이 그대로 리턴이 되었을까?

두번째는 그냥 arr 을 반환한 것이나 다름이 없다. arr.slice(n) 와 arr 는 다른 배열이기 때문이다.

👉 객체 지향 프로그래밍

자바스크립트는 객체 지향 프로그래밍이다. 내일은 객체에 대해서 다뤄볼 예정인데, 오늘 알게 된 지식이 있어서 잠깐 블로깅을 하려고 한다.

자바스크립트에서 배열(Array)은 객체(Object)의 일종이라고 보면 된다.

더 쉽게 말해, 넘버링이되어 순차적으로 구성되어있는 객체(Object)를 배열(Array)이라 한다.

객체에는 모든 속성을 지닌 원형 객체(Object.prototype) 가 있는데,

자바스크립트는 이 원형 객체의 속성을 가져와서(참조하여) 배열을 만들기 위해 필요한 속성을 이리저리 바꾼 배열 원형 객체(Array.prototype)를 따로 가지고 있다.

그러면 배열 원형 객체가, 새로운 배열을 만들 수 있게 되는 것 이다.

이런 과정을 돌이켜보면, 결국 “배열의 많은 속성은 객체와 다를바가 없고, Object.prototype을 최종 종착지로 가지기 때문에, object, array, function은 사실 객체 라는 말을 하고는 한다.

다만, 실질적으로 객체와 배열은 다른 자료 형태로 사용된다. 그러나 코딩 시에 이런 미묘한 점까지 구분하고 찾아서 해야 하는 일은 많지 않다.

이 부분에 대해서 더 공부하기 위해서 OOP도 따로 검색해봐야겠다!

👊 내일의 TIW(today I Will)

객체(Object), 스코프(Scope), 클로저(Closure)