프로그래밍 이야기/JavaScript 공부
-
[Javascript] 자바스크립트 Object.keys 메서드 이해하기프로그래밍 이야기/JavaScript 공부 2020. 7. 26. 02:37
Object.keys() 메서드란? 객체를 만들다 보면 상황에 따라서는 객체의 key값만 가지고 오고 싶을 때도 있다. Object.keys() 메서드는 객체(typeof 연산자로 확인했을 때 object가 반환되는)의 프로퍼티들 중에서 key값, 다른 말로 프로퍼티 네임들만 묶어서 배열로 반환하는 메서드이다. 문법 Object.keys(obj); Object.keys 메서드의 기본 문법은 그냥 메서드 그대로 Object 객체에 keys 메서드를 호출하고 파라미터로 Key값을 알아내고자 하는 객체를 전달해주면 된다. const myObject = { name: '싹쓰리', enName: 'SSAK3', members: ['유두래곤', '린다G', '비룡'], genre: 'Dance & pop', age..
-
[JavaScript] 자바스크립트 for...of 반복문 이해하기프로그래밍 이야기/JavaScript 공부 2020. 7. 24. 00:14
for.. of 반복문이란? for.. of 반복문은 일반적으로 배열에 많이 사용되는데, 배열의 요소 개수만큼 반복하고, 반복 때마다 각 요소들을 사용할 수 있는 변수가 주어지는 독특한 반복문이라고 할 수 있다. map메서드와 forEach메서드의 콜백 함수 내에 있는 element를 사용하는 것과 비슷하다고 생각하면 좋을 것 같다. 문법 for (변수 of 배열) { 반복동작부분 } 기본적으로 for 문과 비슷한 모양을 하고 있지만 소괄호 내부에 세미콜론으로 구분되는 구간이 없고, 변수 하나와 of 키워드, 그리고 반복 할 배열을 입력해주고, 매 반복 때마다 동작할 구문은 중괄호 안에 넣어주면 된다. 그래서 map이나 forEach의 콜백 함수 내에 있는 element 파라미터처럼, 소괄호 안에 선언한..
-
[JavaScript] 자바스크립트 forEach 메서드 이해하기프로그래밍 이야기/JavaScript 공부 2020. 7. 22. 23:54
ForEach 메서드란? forEach() 메서드는 배열에 활용이 가능한 메서드로, 파라미터로 주어진 함수를 배열 요소 각각에 대해 실행하는 메서드이다. map() 메서드와 거의 비슷하지만 차이점은 따로 return 하는 값이 없다는 점이다. 문법 const myArr = [1, 2, 3, 4, 5]; const newMyArr = myArr.forEach((currentElement, index, array) => { console.log(`요소: ${currentElement}`); console.log(`index: ${index}`); console.log(array); }); console.log(newMyArr); // undefined forEach 메서드도 map메서드와 동일하게 파라미터로..
-
[JavaScript] 자바스크립트 map 메서드 이해하기프로그래밍 이야기/JavaScript 공부 2020. 7. 22. 00:23
map 메서드란? map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 메서드이다. for of 문이나 forEach처럼 배열 내 요소들을 반복하는 반복문의 한 종류인데, 조금 독특한 부분은 매 반복마다 return 되는 결과에 따라 새로운 배열을 만들어낸다는 것이다. 문법 const myArr = [1, 2, 3, 4, 5]; const newMyArr = myArr.map((currentElement, index, array) => { return currentElement * 2 }); console.log(newMyArr); // [2, 4, 6, 8, 10] map메서드는 파라미터로 콜백함수를 받는데, 그 콜백 함수의 파라미터는 요소, ..
-
[JavaScript] 자바스크립트 concat 메서드 이해하기프로그래밍 이야기/JavaScript 공부 2020. 7. 20. 02:33
conat 메서드란? concat 메서드는 파라미터로 전달되는 값들을 기존 배열에 합쳐서 새로운 배열을 반환해주는 배열의 메서드들 중 하나이다. 한 가지 특별한 점은, 만약 파라미터로 전달되는 인자 값이 배열일 경우에는 해당 배열이 펼쳐지면서 기존 배열에 합쳐진다. 참고로, concat은 concatenation이라는 단어의 줄임말이라고 한다. 문법 concat 메서드는 배열에 사용되고, 파라미터로 어떤 값이든 전달할 수 있다. const myArr = [1, 2, 3]; // arr.concat(value1, value2, ...) console.log(myArr.concat(4, 5)); // [1, 2, 3, 4, 5] console.log(myArr.concat('육', '칠')); // [1, ..
-
[JavaScript] 자바스크립트 slice 메서드 이해하기프로그래밍 이야기/JavaScript 공부 2020. 7. 19. 00:41
slice 메서드란? slice 메서드는 배열의 일부 요소를 제거한 새로운 배열을 반환한다. 그래서 slice 메서드는 splice 메서드와 다르게 원래의(기존의) 배열 값을 수정하지 않는다. 다른 면에서 생각하면, 결과적으로 slice메서드는 부분 요소에 접근하는 것이라고 할 수 있다. 문법 slice는 시작 index와 마지막 index, 두 개의 파라미터를 가지고 있다. 첫 번째 파라미터로 들어가는 파라미터는 말 그대로 시작 index인데, 독특하게 음수 값이 들어갈 수도 있다. 그래서 만약 첫번째 파라미터로 음수 값이 전달될 경우 이 값에 배열의 길이를 더한 값을 시작 위치로 평가된다. 두 번째 파라미터는 마지막 index인데, 해당 값의 바로 직전까지의 요소를 잘라낸다. 여기서도 당연히 음수가 ..
-
[JavaScript] 자바스크립트 DOM (Document Obejct Model) 가볍게 이해하기 - 2프로그래밍 이야기/JavaScript 공부 2020. 7. 3. 00:09
[JavaScript] 자바스크립트 DOM (Document Obejct Model) 가볍게 이해하기 - 1에 이어서 DOM과 관련된 내용들을 좀 더 살펴보자. 문서 객체 모델(The Document Object Model)은 웹페이지를 자유롭게 다루기 위해 웹페이지를 객체회 한 개념이고, 웹 페이지를 객체화한 각 요소요소들을 Node라고 부르고, 노드들 중에서 가장 상위 노드가 document 객체였다. 그래서 document 객체의 메소드를 활용하면 웹페이지의 상태나, 혹은 웹페이지 내의 다양한 노드에 접근할 수 있었는데 이번 포스트에서는 실제로 웹 페이지의 HTML을 자유롭게 다루는 메서드와 프로퍼티에 대해서 좀 더 정리해보고자 한다. 노드 생성하기 1. Html tag 노드 생성하기 (create..
-
[JavaScript] 자바스크립트 DOM (Document Obejct Model) 가볍게 이해하기 - 1프로그래밍 이야기/JavaScript 공부 2020. 6. 27. 17:54
자바스크립트로 웹 페이지 좀 더 자유롭게 다루려면 DOM에 대한 이해가 필요하다. 문서 객체 모델 (DOM) 문서 객체 모델(Document Object Model, DOM)은 말 그대로 웹 페이지 내의 모든 콘텐츠를 객체로 나타내 주는 것이다. 그래서 간단하게 생각하면 웹 페이지를 document라고 부르고, document를 자유롭게 다루기 위해서 객체화 하고자 구현된 개념이 결국이 DOM이라고 생각할 수 있겠다. 그리고 HTML 태그와 글자, 속성 등 document의 담겨있는 모든 요소들을 하나하나를 객체화 한 단위를 가리켜 노드(Node)라고 부른다. 아무튼, 결국 DOM은 웹 페이지를 객체화 한 개념이고, 이 웹페이지의 가장 상단 진입점이 바로 document 객체이다. document 객체는..