UX·UI - FrontEnd Dev. Story

프론트엔드/Javascript 37

배열전용 내장함수 반복문 forEach() / map() 자바스크립트 JS 공부

자바스크립트에 미리 포함 된 함수를 내장함수라 한다. 배열에 사용하는 반복문 내장함수에는 forEach() / map() 이 있는데 알아보자. forEach() / map() 에는 파라미터(인자)값이 3가지가 들어간다. ex) forEach( el, idx, arr ) el : 반복 돌고있는 대상 idx : 순서값 arr : 배열자체 1. forEach() const colors = ["red", "green", "blue"]; colors.forEach((el, idx, arr) => { //파라미터에는 3가지가 default.(반복도는 대상, 순서값, 배열자체 ) console.log(el); //red green blue console.log(idx); // 0 1 2 console.log(arr)..

자바스크립트 for / for of / for in 반복문 사용법 - JS

1. for() 반복문 1-1) 배열에서 for() 이용하기 // 배열에서 사용법 const colors = ["red","green","blue","aqua"]; for( let i=0; i < colors.length; i++ ){ console.log(colors[i]); //red green blue aqua } 1-2) 객체에서 for() 이용하기 // 객체에서 사용법 const classA = [ {name: "Chloe", age: 20, address: "Seoul"}, {name: "Andy", age: 25, address: "Busan"}, {name: "Jane", age: 18, address: "Daegu"}, ]; for(let num=0; num < classA.length;..

자바스크립트 대입연산자 ( = , += ) 사용법

자바스크립트에서 연산자 공부할 때 +, -, /, * 등등 이해가 잘 가는데.. +=는 매번 헷갈렸다. 그래서 정리를 해보았다..! let num1 = 2; num1 = num1 + 2; console.log(num1); //num1은 2 + 2가 되어서 4가 나온다. //// 이것을 함축형으로 바꾸면 num1 += 2; // 자기자신 num1(초기값)에다가 2를 더한다는 의미 console.log(num1); //4 결국은 num1 + 2 라는 의미.. easy하네

자바스크립트 getter, setter (게터 세터) 분석하기

※ 게터와 세터가 너무 이해가 안돼서 개인적으로 알아보기 쉽게 작성한 코드이니 정답이 아닐 수 있습니다. 혹시 더 좋은 설명 있으시면 코멘트 부탁드려요~ class User{ constructor(firstName, lastName, age){ this.firstName = firstName; this.lastName = lastName; this.data = age; } get data(){ console.log('게터getter'); return this._newInstance; } set data(value){ console.log('세터setter'); this._newInstance = value; } } const chloe = new User( 'Chloe', 'Kim', 20 ) conso..

자바스크립트 싱글쿼터[''] 이용 시 특수기호 사용법

싱글쿼터[ '...' ] 이용 시 특수기호 사용해서 구분하기 1. 기본 - 백틱[ `...` ]을 이용해서 콘솔로그찍기 console.log(`Welcome To Chloe's Blog`); 2. 싱글쿼터[ '...' ] 사용 시, \[백슬래시 or 역슬래시] 사용하여 특수기호 싱글쿼터 구분 방법 console.log('Welcome To Chloe\'s Blog'); 3. \s [백슬래시 + s] - 엔터(enter)효과 console.log('Welcome To Chloe\'s \nBlog'); 4. \t [백슬래시 + t] - 탭(tab) 효과 console.log('Welcome To Chloe\'s \n\tBlog');

자바스크립트 함수 사용해서 rest 파라미터 / for of 배열 만들기

1. Rest Parameters [파라미터] : (...args) - 인자를 모두 배열 형태로 전달하는 파라미터 // * Rest 파라미터 사용하기 function printAll(...args) { //...args는 -> printAll('A', 'B', 'C')의 값이 담겨있는 배열 for (let i = 0; i < args.length; i++) { // printAll의 값이 length를 통해 3개의 배열이 i에 담긴다. console.log(args[i]); // 'A' // 'B' // 'C' } } printAll('A', 'B', 'C'); 2. for ( arg of args ) 사용한 더 간단한 작업방법 function printAll(...args) { // for ( arg ..

자바스크립트 반복문 while문, do while문, for문

1. while 반복문 let i = 3; while (i > 0) { // false가 나올때까지 무한대로 계속 반복하는것. console.log(`while: ${i}`); i--; } // while: 3 // while: 2 // while: 1 while 반복문은 조건문이 만족하면 {} 블럭을 실행시킨다. 만약 블럭을 먼저 실행하고 조건문을 진행하고싶으면 do - while을 사용하면된다. 2. do-while 반복문 let i = 3; do { // 블럭을 먼저 실행하고 console.log(`do while: ${i}`); i--; } while (i > 0) // 조건문을 반복하는 방법 // do while: 3 // do while: 2 // do while: 1 3. for loop 문..

자바스크립트 부모, 자식, 형제 노드 찾는 방법

자바스크립트를 연습하다보면 생각보다 자주 사용되는 스크립트 중 하나인것 같다. 매번 찾았다가 이번에는 이해한것을 정리해서 올려놓으려고 한다. 01_ 자바스크립을 이용한 자식요소 찾기(childNodes) HTML aaa bbb ccc JS let parent = document.querySelector('#list-wrap') // 변수에 parent 요소를 저장 let allChildren = parent.childNodes; // 모든 자식들 찾아 변수에 담기 let first = parent.firstChild; // 첫번째 자식들 찾아 변수에 담기 let last = parent.lastChild; // 마지막 자식 찾아 변수에 담기 console.log(allChildren); console.l..

함수 표현식 VS 함수 선언식 구분하기

1. 함수 선언식이란 변수 선언을 let / const 등으로 시작해야하는 것 처럼 함수 선언은 function으로 시작한다. 선언 된 함수는 나중에 사용될 것을 위해 저장되며 call 될 때마다 실행된다. function a() { return "이것은 함수입니다."; } 이 a 함수를 사용하려면 함수의 이름을 호출하면 된다. a();// "이것은 함수입니다." 2. 함수 표현식이란 함수 표현식은 변수로 저장 될 수 있다. let x = function (a, b) {return a * b}; 함수 표현식이 변수에 저장이 되면, 변수는 함수처럼 사용이 가능하다. 변수에 저장된 함수는 함수명이 따로 필요 없으며, 변수 이름을 통해서 호출한다. 함수 표현식 VS 함수 선언식 함수 표현식 alert(hell..

반응형