자바스크립트 (8) 썸네일형 리스트형 메소드에서 자신이 포함된 객체를 불러오는 'this' this 메소드 내부에서 this를 이용해 자신이 포함된 객체를 불러 올 수 있다. 메소드에서 자신이 포함된 객체의 어떤 값을 필요로 할 떄 유용하게 사용할 수 있다. this 사용법 메소드에서 자신이 포함된 객체를 호출 let Person = { name: "Carl", age: 25, Obj: function(){ console.log(this) } } Person.Obj(); // { name: 'Carl', age: 25, Obj: [Function: Obj] } 메소드 내부에서 this를 이용해 자신의 객체에 접근할 수 있다. 위의 코드에서 Person 객체에 Obj 메소드가 this를 이용해 자신이 포함되어 있는 객체를 출력하고 있다. 메소드에서 자신이 포함된 객체의 값 접근 let Perso.. 객체의 프로퍼티 값으로 함수가 들어가는 '메소드(Method)' 메소드 (Method) 메소드는 객체의 프로퍼티 값으로 함수가 들어가있는 것을 말한다. 예를 들어, 사람을 나타내는 객체가 특정한 값만을 가지고 있는것이 아니라 어떠한 행동도 하게 되는데, 그 행동이 함수인 것이다. ex) 인사하기, 달리기, 밥먹기 등등.. 이렇듯 객체도 객체에 따라 각각 수행할 수 있는 일들이 있으며, 그 수행하는 행동을 함수로 표현하는 것이다. 메소드 선언법 객체에 메소드 선언법 let Person = { Greeting: function(){ console.log('Hi'); } } /* 점 표기법으로 함수 값 넣기 Person.Greeting = function(){ console.log('Hi'); } */ 위의 코드와 같이 프로퍼티 값으로 함수를 선언하면 메소드가 만들어지는 .. Javascript의 자료형 중 하나인 '객체(Object)' 객체 (Object) 객체는 자바스크립트에 존재하는 자료형 중 하나이다. 이 객체는 여러 데이터를 담을 수 있다는 점에서 배열과 비슷하나, 배열보다 담을 수 있는 데이터의 종류가 더 다양하다. { } (중괄호) 를 이용하여 객체를 생성할 수 있으며, 이 중괄호 내부에 값을 넣게 되는데 이 때 값을 넣는 방식이 특이하다. 바로 키(Key): 값(Value) 으로 구성해서 이 값을 여러개를 넣을 수 있다. 저 데이터 쌍 하나를 프로퍼티(property)라고 부르며 여기서 키(Key) 는 '값이 가지는 이름'이다. 그리고 값(Value)는 '키 라는 이름을 가진 값'이다. : (콜론) 을 이용하여 구분하며 키가 : (콜론) 을 기준으로 왼쪽에 값이 오른쪽에 위치해 있다. 키는 부를 때 키, 식별자, 프로퍼티 .. 함수의 인자값으로 들어가는 함수인 콜백 함수(CallBack Function) 콜백 함수 자바스크립트에서 함수는 값 처럼 취급을 한다고 했다. 값으로 취급을 하기에 값이 할 수 있는 작업을 함수에게도 할 수있는데. 그것이 바로 콜백 함수이다. 콜백 함수는 어떠한 함수의 인자 값으로 또 다른 함수가 들어가는 것이다. 그 인자 값을 콜백 또는 콜백 함수라고 부른다. 콜백 함수 사용법 콜백 함수 function call(funcPara){ for(let i = 1; i value * value ); */ console.log(numary2); // [ 10000, 40000, 90000, 160000, 250000 ] 메소드 사용법을 살펴보자면 변수 하나를 선언하고 그 변수에 대한 값으로 numary 배열에서 map 메소드를 사용한다. map 메소드도 콜백 함수에서의 매개변수는 순서대로.. 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); (실행결과.. 이전 1 다음
