전체 글 (18) 썸네일형 리스트형 JS의 꽃 객체(2) 점표기법과 대괄호법 객체에서 데이터접근은 어떻게할까? let gnoc = { name : '그노', age : 134, face : 'handsome', height : 193210 }; 위 객체에서 name의 '그노'에 접근하고싶으면 점표기법을 써라. 점 표기법은 객체 프로퍼티에 바로접근한다. 점 표기법은 아래와 같다. let gnoc = { name : '그노', age : 134, face : 'handsome', height : 193210 }; console.log(gnoc.name); // name의 그노가 출력된다. 다음은 대괄호 표기법. 대괄호 표기법은 프로퍼티 이름이 변수에 포함된 경우, 프로퍼티 이름이 식별자에 허용되지 않는 문자(띄어쓰기, 하이픈)가 포함되어 있는경우 사용한다잉. let apple = '.. JS의 꽃 객체(1) 객체 Object 여러가지 값을 한번에 저장하고싶으면 객체를 써라~ { name : '그노', age : 134, face : 'handsome', height : 193210 } 객체는 다음과 같이 프로퍼티들로 이루어져있고 각 프로퍼티는 Key값과 Value값으로 이루어져 있다. 프로퍼티간 서로 ','로 구분한다. Key값은 문자열타입을 가지고있다. 원래 따옴표를 넣어야하지만 JS가 알아서 문자열로 형변환한다. 단, 프로퍼티 네임(Key값)은 첫글자는 반드시 문자,밑줄,달러기호 중 하나로 시작한다. 띄어쓰기 금지다. 하이픈 금지다. 만약 숫자가 들어가면 따옴표로 감싸면 된다. 반면 프로퍼티의 Value값은 모든 자료형 사용 가능하다. 문자열 숫자 불린 null도 가능하고, 심지어 객체 안에 객체도 넣을.. ES6 /인스턴스란? 명확하게 머리속에서 정리가 되지 않아서 글로 남겨본다. 인스턴스와 오브젝트는 어떤 관계인가? 오브젝트가 인스턴스고 인스턴스가 오브젝트 아닌가? 라는 의문이 들지만 쉽게 말하자면 오브젝트를 사용하여 오브젝트를 생성하면 반환된 오브젝트가 인스턴스(instance)이다. 변수에 할당, 반환된 오브젝트가 인스턴스인 것이다. 그렇다면 인스턴스를 생성하는 이유는 무엇일까? function Object() { this.name = 'Kim' }; var obj1 = new Object(); obj1.name = 'Choi'; console.log(obj.name); // Choi var obj2 = new Object(); console.log(obj2.name); // Kim 위 코드처럼 원본 Object에 nam.. ES6 / 헷갈리는 그 이름 this 3편 / 생성자 함수 호출 생성자 함수 호출 JS에서 생성자함수는 객체를 생성하는 역할을 함. 기존함수에 new 연산자를 붙이면 해당함수는 생성자 함수로 동작함. 여기서 잠깐~! new연산자란 ? "개발을 하다보면 유사한 객체를 여러개 만들어야할 상황이 온다. new연산자와 생성자 함수를 사용하면 유사한 객체를 여러개 만들수 있다."라고 모질라 센세가 말했다. {...}과 같은 객체 리터럴 문법을 사용해도 무방하지만, 일일이 객체를 만드는 것 보다 훨씬 간단하고 읽기 쉽게 객체를 만들 수 있다. new연산자의 의의는 여기에 있다. 재사용할 수 있는 객체 생성 코드를 구현하는 것. 맨위에서 기존함수에 new 연산자를 붙이면 해당함수는 생성자 함수로 동작한다고 했는데, 반대로 생각해서 일반함수에 new연산자를 붙여 호출하면 생성자 함.. ES6 / 헷갈리는 그 이름 this 2편 / 메서드호출 아아 누가 나 몰래 뇌주름을 다림질해놨는지 머리가 안굴러간다. 암튼 오늘은 메서드 호출 함수의 객체가 프로퍼티값이면 메서드로서 호출된다. 이 때 메서드 내부의 this는 해당 메서드를 소유한 객체, 즉 해당 메서드를 호출한 객체에 바인딩된다. var obj1 = { name: 'Lee', sayName: function() { console.log(this.name); } } var obj2 = { name: 'Kim' } obj2.sayName = obj1.sayName; obj1.sayName(); obj2.sayName(); 프로토타입 객체도 메서드를 가질 수 있음. 프로토타입 객체 메서드 내부에서 사용된 this도 일반 메서드 사용방식과 마찬가지로 해당 메서드를 호출한 객체에 바인딩 됨. func.. ES6 / 헷갈리는 그 이름 this 1편 / 함수호출 일단 HTML5 CSS3로 코드를 접한 나는 JS배우기 시작하고나서 하루하루가 쥰내빡치는 일들의 연속이었다. 그 중 지금도 헷갈리는 this를 지금 이 시간에 정리해보자. Js에서함수는 호출될 때 매개변수로 전달되는 인자값 이외에 arguments 객체와 this를 암묵적으로 전달받는다. Js의 경우 함수호출방식에 따라 this에 바인딩할 객체가 동적으로 결정됨. 함수가 어떻게 호출되었는가에 따라 this에 바인딩할 객체가 결정된다는 뜻임. ( 함수의 상위 스코프를 결정하는 방식인 렉시컬 스코프(Lexical Scope)는 함수를 선언할 때 결정됨. this 바인딩과 헷갈리지 않도록 주의해야함. ) 함수를 호출하는 방식은 아래와 같이 다양함. 함수호출 메소드 호출 생성자 함수 호출 apply/call/b.. ES6 / 화살표함수 Arrow Funciton은 코드량 줄여주는 고마운녀석. 일부 함수패턴에서 코드를 비교적 깔끔하게 정리해준다. 화살표함수는 자신의 this가 없다. 대신, 화살표 함수를 둘러싸는 lexical scope의 this가 사용됨. 때문에 현재 범위에서 존재하지 않는 this를 찾을 때 화살표함수는 바로 바깥 범위에서 this를 찾는것으로 검색을 끝냄. 아래 예시코드를 보며 이해해보자. function Person() { this.age = 0; setInterval(() => { this.age++; // 여기서 this는 Person 객체를 참조함. }, 1000); } var P = new Person(); 엄격모드(strict mode)와의 관계도 약간 복잡한데 당장에 이해하기엔 나으 능력 부조크...🤣.. ES6 / 클래스 / 3편 / 프로토타입 및 정적 메소드를 사용한 this 바인딩 시부레 말이 왜케 어려운건지🔥🔥 일단 Class내부에 있는 모든 내용은 Strict 모드로 실행됨. 때문에 Strict 모드에서는 자동으로 바인딩이 안됨. 따라서 Strict 모드에서 사용하는 this는 Undefined 됨. this는 호출방식에 따라 동적으로 this가 결정됨. 함수 호출시 this : window 메소드 호출시 this : 메소드 객체 내부함수 호출시 this : window 엄격모드에서의 this : undefined 이벤트 리스너 호출시 this : 이벤트 객체 생성자 함수 호출시 this : 생성된 새 객체 Arrow 함수는 일반적인 this 바인딩과 다르게 Lexical this를 가진다. (Arrow 함수 호출시 this : 함수 선언시의 상위 스코프의 this) 위 상황 .. 이전 1 2 3 다음
