목록개발 Web/JS (37)
음악, 삶, 개발
array 의 indexOf 함수는 인자로 요소를 받아, index 를 return 하고, includes 는 요소를 받아 해당 요소가 존재하는지 boolean 을 return 한다. const arr = ['kim', 'park'] console.log(arr.indexOf('park')) // 1 console.log(arr.indexOf('choi')) // -1 : 존재하지않음! console.log(arr.includes('kim')) // true console.log(arr.includes('choi')) // false 이 둘을 상황에 따라 적재적소에 활용하자. 내가 index 를 알필요없고, 해당 요소가 있는지만 확인하는거라면 includes 가 더 적절하다. 굳이 indexOf === ..
splice 를 사용할때 항상 2번째 인자의 의미가 헷갈려서 코드와 코멘트로 정리해놓았다. const arr = ['one', 'two', 'three', 'four'] arr.splice(1) // index 1 부터 끝까지 다 지워주삼! arr.splice(1, 1) // index 1 부터 1개를 지워주삼! arr.splice(1, 1, 'other', 'another') // index 1 부터 1개를 지우고, index 1 자리에 'other', 'another' 를 넣어주삼!
shift 나 unshift 는 배열의 가장 앞부분에 요소를 삽입 또는 제거 하고, push 나 pop 는 배열의 가장 뒷부분에 요소를 삽입 또는 제거한다. 가장 앞부분에서 이렇게 요소가 움직일 경우, 뒤에 요소들은 다 뒤로 밀려서 빈칸을 만들어낸후 삽입되기에 매우 느리다고한다. 반면에 push 나 pop 는 가장 뒷부분에 넣었다 빼기때문에 훨씬 빠르다. 이런 시작과 끝에 관련된것은 C++ 에서도 있었던 이야기.
JS 에서 객체를 다루다보면, 대입을 했을때 reference 만 복사되어, 한 객체를 변경하면, 초기 객체 또한 변경이 되는 상황을 늘 겪는다. const o1 = { name : 'kim', age : 30 } const o2 = o1 // 이거는 reference 를 복사하는것일뿐... o2.age = 40 console.log(o1.age) // 40 console.log(o2.age) // 40 이 부분은 대부분 편리하지만, 진정으로 복사를 원할 경우에는 그렇지않다. 이럴때 사용하는것이 Object.assign 이다. c..
for 루프를 사용할때마다 항상 헷깔리는것이 for-in 과 for-of 이다. 객체는 in 만 사용할수있으며, 배열은 in 과 of 둘다 사용 가능하다. // 객체는 in 만 사용 가능. const obj = { name : 'kim', age : 30 } for (const key in obj) console.log(key) // name, age // 배멸은 in 과 of 를 둘다 사용 가능. const arr = ['one', 'two'] for (const index in arr) console.log(index) // 0, 1 for (const item of arr) console.log(item) // one, two
Object 에는 특정 property 가 존재하는지 확인해주는 in 연산자가있다. const o = { a : [], b : [] } console.log('a' in o) // true console.log('b' in o) // true console.log('c' in o) // false 사실 for loop 에만 사용되는것이 in 인줄 알았는데, 저런것도 할수는줄 몰랐다.
아래는 Constructor function 의 예이다. function Person(name, age) { // this = {}
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference JavaScript reference - JavaScript | MDN This part of the JavaScript section on MDN serves as a repository of facts about the JavaScript language. Read more about this reference. developer.mozilla.org 내가 모든것을 만들 필요없다. JS 가 built-in 으로 제공하는 여러 Object 들이 있고, 이들을 적절히 활용하는것이 매우 중요하다. ( 에르 들어 JSON) Juce 처럼 JS 도 기본적으로 프레임워크처럼 여러 클래스들을 제공한다.
instanceof 를 통해, 특정 인스턴스가 해당 클래스의 인스턴스인지 boolean 으로 확인해주는 방법이다. class Shape {} class Rectangle extends Shape {} class Triangle extends Shape {} const r = new Rectangle const t = new Triangle console.log(r instanceof Rectangle) // true console.log(t instanceof Triangle) // true console.log(r instanceof Shape) // true console.log(t instanceof Shape) // true ..
왜 클래스를 상속해야하는지에 관해 위의 강좌를 반드시 시청하도록 한다. 일분도 안되는 시간에 완벽하게 개념을 설명해주는것같다. 클래스 상속의 꽃은 함수의 override 를 적절히 하는것이다. Juce 환경에서는 사실 대부분 클래스들이 다 만들어져있어서, 내가 직접 상속해야할일이 그렇게 많지는 않았던거같다. 그래서 어찌보면 상속의 개념을 잘 몰랐던거같기도하고.. 무엇보다 override 한 함수안에 super 로 부모 클래스의 함수를 호출하면서, 추가적인 나의 액션을 추가할수있다는것을 처음 알았다. 원래의 기능도 실행하면서, 나의 것들을 추가하는것이다. class Shape { draw() { console.log('shape!')}..