JavaScript/JavaScript_지식_정리 (13) 썸네일형 리스트형 Javascript의 함수를 짧게 표현하는 화살표 함수(Array Function) 화살표 함수 자바스크립트에서 함수를 선언하는 방법인 함수 선언문, 익명 함수 이 두개의 방법 외에도 함수를 표현할 수 있는 방법이 있다. 그것이 바로 화살표 함수이다. 화살표 함수는 함수 선언문, 익명 함수와는 다르게 function구문을 사용하지 않고 화살표를 사용하기 때문에 코드의 길이가 줄어든다는 장점은 있으나, 눈에 익숙하지 않다면 가독성이 조금 떨어진다. 화살표 함수 사용법 자바스크립트에서 화살표 함수 선언법은 아래와 같다. 화살표 함수 let noPara = () => expression // 매개변수가 필요없을 시 let onePara = Parameter => expression // 매개변수가 하나일 시 let multiPara = (Parameter1, Parameter2) => exp.. Javascript 함수 선언, 익명함수 함수? 프로그래밍 언어에서의 함수는 어떠한 값을 도출해내기 위해 수행하는 코드들의 집합이다. 함수를 사용하는 이유는, 코드의 단순 반복을 줄임으로써 가독성을 높이고 유지보수하기 쉬워지려고 사용한다. Javascript에서 함수 자바스크립트에서의 함수 선언법은 아래와 같다. 함수 선언문 방식 function Study(){ console.log('Javascript!'); } Study(); // Javascript! 익명 함수 let Study = function(){ console.log('Javascript!'); }; Study(); // Javascript! 함수 선언문 방식은 여타 프로그래밍 언어처럼 function 함수명(){...}으로 선언되었다. 익명 함수를 보면 변수를 생성하고 함수를 변.. 배열, 객체의 속성을 해체하여 그 값을 여러 변수에 할당하는 Destructuring(구조 분해 할당) 표현식 Destructuring Destructuring(구조 분해 할당)은 배열의 요소나 객체의 속성을 해채하여 그 값을 여려 변수에 할당 할 수 있는 자바스크립트의 표현식이다. 배열에 있는 요소 전체를 개별의 변수에 할당하고 싶거나, 요소의 일부분을 개별의 변수에 할당할때 더 간편하게 담기 위해서 사용한다. Destructuring 사용법 Destructuring을 할 데이터의 형식에 따라 사용법이 다르다. 배열일 경우 요소를 할당할 개별의 변수명을 [ ] (대괄호)로 감싸고 배열을 할당해준다 let [변수명1, 변수명2] = 배열명 객체일 경우 속성을 할당할 개별의 변수명을 { } (중괄호)로 감싸고 객체를 할당해준다 let {변수명1, 변수명2} = 객체명 배열 Destructuring 사용 전 let .. 배열의 요소, 객체를 나열해주는 전개 연산자(Spread Operator) 전개 연산자 전개 연산자는 배열의 요소나 객체를 나열해주는 연산자이다. 배열이나 객체의 복사본(원본에 영향을 미치지 않는)을 만들 수 있으며, 여러개의 배열이나 객체를 손쉽게 병합할 수도 있다. 또한, 함수의 매개변수나 인자 값으로도 사용이 가능한 연산자이다. 사용법은 객체나 배열을 담은 변수 앞에 '...'을 붙이면 된다. ex) 배열일 경우 변수 = [...변수명] 객체일 경우 변수 = {...변수명} 전개 연산자 사용법 배열에서 전개 연산자 사용 배열 복사 let numArr = [1, 2, 3, 4, 5, 6]; let copyNumArr = [...numArr]; console.log(numArr, copyNumArr); console.log(numArr === copyNumArr); (실행결과.. 배열의 값을 추가 및 제거 배열에 값을 추가 인덱스 값을 지정하여 값 추가 Javascript는 C처럼 배열의 공간을 할당하고 사용하는게 아니라 동적으로 공간이 할당되기 때문에 원하는 인덱스를 주고 값을 추가할 수 있다. 하지만 마지막 요소에 추가하는게 아니라 마지막 요소에서 조금 멀리 떨어진 곳의 인덱스에 값을 추가하게 되면 마지막 요소부터 새로 추가한 요소까지는 빈 인덱스로 남게된다. selectIndex.html (실행결과) HTML,CSS,,,,JavaScript 6 push 메소드 사용 push 메소드를 사용하여 배열에다가 값을 추가할 수 있다. 그러나 이 메소드를 사용시에는 배열의 마지막 요소 뒤에만 추가할 수 있다. push.html (실행결과) HTML,CSS,Javascript 3 splice 메소드 사용 push.. 이전 1 2 다음
