프로그래밍/JavaScript (11) 썸네일형 리스트형 프토토타입 & 클래스 프로토타입 같은 객체 생성자 함수를 사용할 경우에 특정 함수 또는 값을 재사용할 수 있도록 만들어주는 역할을 한다. 자바에서의 클래스와 비슷한 역할을 한다고 생각해도 되겠다. 상속이나 생성자 등을 활용할 수 있기 때문에 어느 정도유사한 기능을 한다고 생각할 수 있다. function Person(name, age, score) { this.name = name; this.age = age; this.score = score; } Person.prototype.checkScore = function () { console.log(this.score); } Person.prototype.greetings = '안녕'; const person1 = new Person('철수', 20, 40); const pe.. 배열의 내장함수 JavaScript에서 유용하게 쓸 수 있는 내장함수 forEach forEach는 기존에 여러 언어에서 두루 쓰이는 for문을 대체할 수 있는 가장 간편한 내장함수다. const list = [1, 2, 3, 4, 5, 6]; for (let i = 0; i console.log(value)); 내장함수인 forEach를 사용했을 때의 코드 위 두 코드와 같이 forEach를 사용하게 되면 기존의 코드를 더 간략하게 축약할 수 있게 된다. map map함수는 매개변수로 함수를 받을 수 있으며 이.. 자바스크립트 문제 풀이 (2) 자바스크립트 헷갈리는 개념 정리 (Beginner) 17) 아래 코드의 결과값은? ★ const list = [1, 2, 3]; const result = list.join(); 정답 = 1,2,3 join() 메소드를 잘 알고 있지 않아 세 요소를 전부 합한 값인 6인지 1,2,3인지 헷갈리는 문제였다. join() 메소드는 기준이 되는 배열의 모든 요소를 구분자를 기준으로 나누도록 만드는 역할을 하며 별다른 값을 입력하지 않는다면 ,이 기준이 된다. 가령 위 코드에서 join(' | ')으로 명령을 넣었다면 결과값은 1 | 2 | 3으로 달랐을 것이다. 18) 아래 코드의 결과값은? const array = [1, 2, 3]; const result = array instanceof Array; 내가.. 자바스크립트 문제 풀이 (1) 자바 스크립트 헷갈리는 개념 정리 (Beginner) 1) 아래 코드의 결과값은? const list = [1, 2, 3]; const result = list[3]; 내가 생각한 값 = thriow a Syntax Error => 정답 = undefined 지정된 배열의 인덱스를 넘어가는 인덱스를 참조하고자 한다면 에러가 발생한다고 생각했지만 자바스크립트에서는 이 대신에 undefined를 반환해준다는 것을 알 수 있었다. 2) 아래 코드의 결과값은? const object = Object.assign({ name: 'JavaScript' }, { name: 'ECMAScript' }, { name: 'LiveScript' }); const result = object.name; 정답 = LiveScr.. var과 let, const var var은 스코프 범위가 함수 단위(function scoped)다. function func() { { var a = 1; } console.log(a); } func(); 중괄호로 변수 a가 감싸져 있지만 var는 중괄호로 구별한 것은 무시하고 함수 단위로 스코프가 형성된다. 그렇기 때문에 console.log(a)의 결과가 1이 나오게 된다. 또한 var은 변수가 이미 선언되어 있더라도 밑에서 다시 선언될 경우 이전 내용이 지워지고 새 내용이 들어가게 된다. var을 사용하게 되면 Hoisting문제가 발생할 수 있다. //var가 hoisting되어 정상적으로 j의 값이 불러와진다. for (var j = 0; j < 10; j++) console.log('j :', j); console.l.. this This 자바스크립트의 this 키워드는 다른 언어들과는 조금 다르게 동작한다. 대부분은 함수를 호출하는 방법에 따라 this의 값이 결정된다. 실행하는 동안의 할당에 의해서나 함수가 호출될 때마다 다를 수 있다. ES5에서는 this의 값이 함수가 어떻게 호출되었든지 상관하지 않고 설정이 가능한 bind 메소드를 새로 정의했다. 쉽게 말하자면 호출하는 객체 === this와 같다고 할 수 있다. This의 예 - this는 호출하는 객체에 따라 결과가 달라질 수 있다. var person = { name: "lee", info: function() { console.log(this); } } person.info(); var myInfo = person.info; myInfo(); 단순히 생각한다면 p.. 클로저와 스코프 체인 클로저 클로저는 내부 함수가 외부 함수의 context에 접근할 수 있도록 하는 것이다. 이렇게 되면 외부 함수의 실행이 끝나 외부 함수가 소멸한 이후에도 내부 함수가 외부 함수의 변수에 접근할 수 있다. 다음 4가지는 클로저의 특징이다. - 클로저는 객체의 메소드에서도 사용할 수 있다. - 동일한 외부 함수 안에서 만들어진 내부 함수나 메소드는 외부 함수의 지역 변수를 공유한다. - 똑같은 외부 함수를 공유하고 있는 내부 함수나 메소드의 결과는 서로 다를 수 있는데, 외부 함수가 실행될 때마다 새로운 지역변수를 포함하는 클로저가 생성되어 각각 완전히 독립적인 객체가 되기 때문이다. - 클로저 내부의 변수들은 클로저 내부에서 생성된 함수나 메소드만 접근할 수 있다. 이를 이용하면 자바스크립트가 기본적으로.. 화살표 함수 5Arrow Function Expression 일반적인 function에 비해 구문이 더 짧고 스스로의 this, arguments, super, new.target을 바인딩하지 않는다는 특징이 있다. 화살표 함수는 항상 익명 함수라는 특징을 가지고 있다. 위 특징들때문에 화살표 함수 표현은 메소드 함수가 아닌 부분에 유용하게 쓰일 수 있지만 생성자로는 사용할 수 없다. var materials = [ 'Apple', 'Banana', 'Peach', 'Orange' ]; console.log(materials.map(material => material.length); //위 코드를 실행하면 Array [5, 6, 5, 6]이 결과로 나오게 된다. 화살표 함수로 변환 예 - 화살표 함수는 항상 익명함.. 이전 1 2 다음