Mo's Develog

class 라는 문법이 있습니다. constructor, prototype 을 이용한 상속기능을 간지나게 만들 수 있게 도와주는 문법입니다. 기존 function부터 시작하던 문법과 기능상 차이는 크게 없고 약간 더 보기쉽게 표현해줄 뿐입니다. 어떻게 하는지 자세히 알아봅시다. ES6 class 키워드로 구현하는 constructor 기계만들기 constructor 라는건 앞선 포스팅에서 했기 때문에 다들 아시죠? 오브젝트 뽑는 기계였습니다. ES6 class라는 신문법으로 constructor를 만드시려면 이렇게 따라치시면 됩니다. 끝입니다. 예전 function 부모(){} 어쩌구 이렇게 기계를 만드는 문법과 똑같은 문법입니다. 이제 new 키워드를 이용해서 방금 만든 부모라는 기계에서 오브젝트를 새..

prototype이니 this니 class니 뭐니 어렵다면 그냥 ES5 방식으로 하셔도 됩니다. ES5 출시 때 나온 Object.create()라는 신기한 문법이 하나 있는데 내가 상속을 이용해서 오브젝트를 만들고 싶다면 이거보다 더 쉬운 문법이 없습니다. 하지만 class문법에 밀려 인지도는 낮습니다. Object.create() 사용하기 Object.create(부모object); 이렇게 사용하시면 이 자리에 오브젝트 자료형 하나가 남습니다. 그리고 소괄호 안에 적은 부모object가 유전자(prototype)가 되는 것이고요. 한번 예를 들어봅시다. 이렇게 쓴다는 소리입니다. 그럼 자식이라는 object는 부모를 prototype으로 두게 됩니다. 그럼 자식.name 해도 'Kim'이 출력되고요,..

1. 다음 코드의 출력 결과는 무엇일까요 'Kim' 입니다. 첫 4줄에 의해서 a = { name : 'Kim' } 이 되고 a.__proto__.name = 'Park'; 이건 부모 prototype에 { name : 'Park' } 이걸 추가하라는 뜻입니다. 그럼 이제 a.name 이라고 사용했을 때 내가 직접 가지고 있는 { name : 'Kim' } 이걸 우선 출력해줍니다. 2. 함수가 안들어가요 위에 0번 문제에서 Student라는 부모에 sayHi라는 함수를 하나 추가하라고 했죠? 그래서 sayHi()라고 사용하면 "안녕 나는 ~~이야" 라고 내 이름을 출력해주는 함수를 prototype에 추가했습니다. 하단처럼 만들었는데 의도한 대로 이름이 출력되지 않고 있습니다. 원인은 무엇일까요? say..

이거보고 prototype 이해 못하면 자바스크립트 접으셈 이전포스팅에서 봤던 내용은 멋진 객체지향 용어로 상속(inheritance)이라고 합니다. 기계라는 constructor가 가진 name, age 속성들을 그대로 물려받아서 오브젝트를 하나 뽑아주는게 뭐 재산 물려주는 상속과 비슷하다고 해서 상속이라고 부릅니다. (그래서 상속해주는 것은 부모, 상속받는 오브젝트들은 자식이라고 많이 비유해서 불러요) 근데 자바스크립트엔 constructor 말고도 상속기능을 구현할 수 있는 장치가 하나 더 있습니다. prototype이라는 것인데 알아보도록 합시다. 기계를 만들면 prototype이라는 항목이 기계 안에 몰래 생성됩니다. ▲ 위의 사실이 진짜인지 확인해보고 싶으면 출력해보시면 됩니다. 여러분이 만든..

그래서 저번시간에 object 그냥 복사하면 큰일난다고 배워봤는데 이번시간엔 object를 안전하게 많이 복사해 만들 수 있는 constructor라는 문법을 배워봅시다. 자바스크립트로 학생 출석부 만들기 자바스크립트로 학생 리스트를 만들어야합니다. 이렇게 쭉 30명을 만들어야합니다. 어떻게 하는게 가장 빠른 방법일까요? 당연히 오브젝트를 직접 중괄호쳐서 하드코딩 30개 하는 것 보다는 비슷한 오브젝트들이니 복사를 하는게 좋을 것 같습니다. 근데 = 등호를 이용해서 var 학생2 = 학생1 복사하면 큰일나니 오브젝트를 복사해서 찍어낼 수 있는 새로운 문법을 이용해보도록 합시다. object 자료 복사 기계만들 땐 function이라는 함수만드는 키워드를 빌려서 이용하시면 됩니다. function을 하나 ..

오늘은 객체지향 문법 시작 전 반드시 알아야할 reference, primitive data type을 알아봅시다. Primitive data type 자바스크립트의 자료형 (문자, 숫자, array, object 등)은 자료형을 크게 2개로 분류합니다. Primitive & reference라고 분류하는데 Primitive data type들은 그냥 별건 없고 자료 자체가 변수에 저장되는 자료들입니다. 문자, 숫자 자료형들이 대표적인 primitive data type들입니다. 이렇게 문자나 숫자 자료형은 문자나 숫자가 변수에 직접 저장된다는 소리입니다. 뭐 그런 당연한 소리를 하냐고요? 아닌 것들도 있기 때문입니다. Reference data type Array, Object 자료형은 referenc..

1. spread 문제 1 답은 you 2.array를 만들어주는 함수를 제작하고 싶습니다. 실용성은 0이지만 일단 해보도록 합시다. 파라미터로 자료들을 입력하면 그걸 그대로 array를 만들어주는 함수를 만들고 싶습니다. 이렇게 작성하면 [1,2,3,4,5]가 출력되어야합니다. 함수에 숫자를 100개 집어넣으면 Array안에 숫자100개가 들어가야하고요. 어레이라는 함수를 어떻게 만들면 될까요? (new 키워드 사용금지) 이렇게 작성하면 [1,2,3,4,5]가 출력됩니다. 또한 파라미터를 몇개 집어넣든 간에 그대로 array를 만들어서 출력해주네요. 옛날방식으로는 arguments 라는 변수를 이용하시면 비슷하게 기능개발이 가능합니다. 3. 최대값 구하기 자바스크립트에서 최댓값을 구하고 싶으면.. Ma..

앞선 포스팅에서는 arguments라는 문법을 배워봤는데 ES6부터는 약간 더 쉬운 문법을 제공합니다. Rest Parameter가 그것입니다. Rest Parameter 함수를 만들 때 ...이라는 기호를 파라미터 왼쪽에 추가가능합니다. 그러면 신기한 일이 일어납니다. 위 코드를 실행해보면 파라미터들이라는 변수를 출력해줍니다. 파라미터들이라는 변수는 모든 파라미터를 [] array 안에 담고 있습니다. 이게 바로 ES6 환경에서 쓸 수 있는 rest 파라미터입니다. 원하는 파라미터 왼쪽에 ... 기호를 붙여주시면 "이 자리에 오는 모든 파라미터를 [] 중괄호로 감싸준 파라미터" 라는 뜻입니다. 그래서 출력해보면 저렇게 [1,2,3,4,5,6,7]이 나오는 것이고요. 그 자리에 입력한 모든 파라미터(1,..

ES6부터 업그레이드된 함수의 default 파라미터 기능과 ES5 문법 arguments에 대해 알아봅시다. 함수의 default 파라미터 넣기 함수를 만들 때 파라미터값을 실수로 안적거나 했을 경우 파라미터에 기본값(default 값)을 줄 수 있습니다. 이렇게 사용하시면 됩니다. 위 코드를 실행하면 콘솔창에 뭐가 뜨냐면 11이 뜹니다. 지금 더하기() 함수는 파라미터를 두개 입력할 수 있습니다. 하지만 실수인지 일부러인지 1이라는 파라미터 하나밖에 쓰지 않았습니다. 그럴 때 저렇게 b = 10 선언해뒀던 default 파라미터값인 10이 b에 할당되게 됩니다. 그래서 콘솔창에 a + b가 11이 출력되게 되는 것입니다. default 파라미터를 주고 싶으면 저렇게 파라미터 선언하실 때 등호로 입력해..

이걸 어디에 쓰냐면 3. array를 파라미터형태로 집어넣고 싶을 때 씁니다. 뭔소리냐면 일단 예시를 들기 위해 함수를 하나 만들어봅시다. 파라미터를 3개 받아와서 전부 더해주는 더하기라는 함수를 만들어봤습니다. 그런데 여기 파라미터를 집어넣을 때 직접 1,2,3이라고 작성해서 넣는게 아니라 이미 존재하는 array에 있던 내부 자료들을 쏙 집어넣고 싶으면 어떻게하나요? 그니까 예를 들면... 어레이라는 자료 안에 있는 모든 숫자 10,20,30을 더하기() 함수의 파라미터로 집어넣으려면 어떻게 해야합니까. 이렇게 직접 손으로 적거나 이렇게 하거나 해야겠죠? 근데 그게 귀찮으시면 spread 연산자를 쓰시면 됩니다. 그러면 출력했을 때 10, 20, 30을 더해준 결과가 잘 출력됩니다. ▼ spread ..