본문 바로가기

전체 글

숫자 prototype에 메소드 추가하기 [혼공자 6-2-1] prototype에 메소드를 추가하는 방식을 쓰면 객체가 아니라 기본 자료형인 숫자나 문자열에도 메소드를 넣을 수 있다. 기존에 객체에다가는 아래와 같은 형태로 eat 메소드를 추가했었다. 그러나 숫자나 문자열에는 메소드를 넣는다는 게 상상이 안되었었다. const pet = { name: '구름', eat (food) { alert(this.name + '은/는 ' + food + '을/를 먹습니다.') } } // 메소드를 호출합니다. pet.eat('밥') 하지만 숫자든 문자든 그 prototype에 메소드를 추가하면 해당 prototype에 속하는 모든 자료에 대해서 메소드를 사용할 수 있다. 일단 숫자에다가 넣어보자. 그 숫자를 제곱해주는 메소드다. (마지막 두 줄은 valueOf() 를 알아보.. 더보기
객체 내부의 메소드를 실행하는 명령어 [혼공자 확인문제 6-1-4] 객체의 메소드를 싱행하는 명령어는 다음과 같다. 객체명.메소드명('파라미터') 코드 안에서 보면 이렇다. 파라미터로 'es' 라고 쓴 것은 언제든 다른 언어로 바꾸면 된다. const object = { ko: '빵', en: 'bread', ja: 'パン', fr: 'pain', es: 'pan', lang: { ko: '한국어', en: '영어', ja: '일본어', fr: '프랑스어', es: '스페인어', }, print: function (lang) { console.log(`${this.ko}는 ${this.lang[lang]}로 ${this[lang]}입니다.`) } } object.print('es') 더보기
객체의 속성으로 함수를 쓸때, 화살표 함수는 쓰지 않는다. [혼공자6-1-5] const test = { a: function () { console.log(this) }, b: () => { console.log(this) } } // 메소드를 호출합니다. test.a() test.b() 객체 내에서 속성으로써 함수가 올 때, this 키워드가 뜻하는바가 많이 달라진다. 속성 a의 this는 test 객체 자체를 뜻하고, 속성b의 this는 여기서는 window 객체를 뜻한다. window객체는 쓸 필요가 별로 없는 것 같다. 객체의 속성으로 함수를 쓸때는, 축약형 화살표함수가 아니라 function(){} 형태의 온전한 형태로 사용한다. 메소드 호출결과, 콘솔창은 아래와 같이 된다. 더보기
동적으로 객체 속성 추가하기 / 제거하기 [혼공자 6-1-2 ~ 3] 빈 객체 하나를 만들고 속성과 값을 나중에 동적으로 추가할 수 있다. 맨 처음에 객체를 정의할때 속성을 정의하는게 아니라 나중에 속성을 집어넣는 '행위' 를 한다는 의미에서 동적이다. 코드를 보자. // 객체를 선언합니다. const student = { } student.이름 = '윤인성' student.취미 = '악기' student.장래희망 = '생명공학자' // 출력합니다. console.log(student) 콘솔창 입력결과는 생략한다. 속성을 동적으로 제거할 수도 있다. delete 키워드를 쓴다. 코드를 보자. // 객체를 선언합니다. const student = {} student.이름 = '윤인성' student.취미 = '악기' student.장래희망 = '생명공학자' // 객체의 속성.. 더보기
JSON.stringify() 메소드 [혼공자 6-2-3] JSON.stringify() 메소드는 객체를 JSON 문자열로 변환한다. 코드를 보자. // 자료를 생성합니다. const data = [{ name: '혼자 공부하는 파이썬', price: 18000, publisher: '한빛미디어' },{ name: 'HTML5 웹 프로그래밍 입문', price: 26000, publisher: '한빛아카데미' }] // 자료를 JSON으로 변환합니다. console.log(JSON.stringify(data)) console.log(JSON.stringify(data, null, 2)) console.log(JSON.stringify(data)) 에서처럼 파라미터를 하나만 넣으면 한줄로 쭉 이어서 출력된다. console.log(JSON.stringify(dat.. 더보기
객체에 함수를 속성으로 넣은 것을 메소드라고 부른다.[혼공자 6-1-1] 제목 그대로다. 코드부터 보자. // 변수를 선언합니다. const pet = { name: '구름', eat: function (food) { alert(this.name + '은/는 ' + food + '을/를 먹습니다.') } } // 메소드를 호출합니다. pet.eat('밥') eat이 pet 객체의 속성이다. 동시에 메소드이기도 하다. 호출하는 방법도 코드에 나와있다. 더보기
코딩테스트 풀이 [항해99 자바스크립트 1주차 숙제] 코딩테스트를 풀어봤다. 문제는 아래 링크에 있다. https://school.programmers.co.kr/learn/courses/30/lessons/12916 내가 느낀 점은 매우 어렵다는 것이다. 이 문제의 답이나 실마리가 머릿속에서 나올 이유가 없어 보였기 때문에 답안을 살짝 봐서 머릿속에 반쯤만 남아있는 상태로 코드를 작성해 보았다. 나름의 학습방법이다. 그렇게 해서 맞는 답안을 제출할 수 있었다. 다음에 더 잘하게 될 방향을 찾기 위해서, 왜 내가 풀기위해 답안을 보아야만 했는지를 생각해 보았다. 두가지 이유였다. 첫째, 한마디로 '개념이 머릿속에 없어서' 둘째, 오랜 시간을 들여 고민하지 않고 효율을 위해 바로 답안을 보기로 선택해서. 이건 앞으로 시간을 들여 문제를 풀어 보면 해결될 것이.. 더보기
num++ 과 ++num 의 차이 [항해99 자바스크립트 강의 1주차 숙제 풀이중 내용] 항해99 자바스크립트 1주차 숙제 풀이 중 나온 내용이다. num++ 과 ++num 의 차이이다. 알아보려면 앞뒤 코드 안에서 보아야 한다. num++의 경우 let num = 1; let newNum = num++ console.log(num); console.log(newNum); 위 코드를 돌려보면 콘솔창에 2,1이 뜬다. 위 아래 코드가 서로 같기 때문일 것으로 생각된다.(80% 추정) let num = 1; let newNum = num; num = num + 1 console.log(num); console.log(newNum); ++num의 경우 let num = 1; let newNum = ++num console.log(num); console.log(newNum); 위 코드를 돌리면 콘.. 더보기

티스토리툴바