어리바리 신입 개발자의 얼렁뚱땅 개발 기록 ✨
23.04.09 / 배열, 객체, 함수, 생성자 함수가 헷갈린다... 본문
728x90
[ 배열 ]
const arr = [1,2,3,4];
[ 객체 ]
const obj = { name : '홍길동', arr : [1,2,3,4], // 객체 안 메소드 형태 다 쓸 수 있다. getName1 : function getName1(){}, getName2 : function(){}, getName3(){} }
[ 함수 ]
1. 일반함수function fn(){ let name = '홍길동'; console.log(name); // 내부함수 가능 function fn2(){} } ※ 일반함수 호출시 객체 리턴하기 ※ function objFn(name,age){ return{name,age}; } const obj = objFn('홍길동',20); console.log({obj}); //console.lot(obj);로 출력하면 object(객체)가 출력된다. //({obj}) 하면 객체 내용 출력됨 위 코드의 실제 상태 const obj = { name : '홍길동', age : 20 }
2. 익명함수let fn = fuction(){};
3. 화살표함수(익명함수)let arrow1 = () => {} ; let arrow2 = name => {} ; //매개변수가 하나일 때 소괄호 생략 가능 let arrow3 = (name,age) => console.log(name,age); //표현식이 한 줄일 때 중괄호 생략 가능,return 자동 let arrow4 = (num) => { //표현식이 두 줄 이상일 때 중괄호 필수 , return 사용해줘야 리턴 됨 let sum = 0; sum += num; return sum; } ※ 화살표 함수 호출 시 객체 리턴하기 ※ 두 방법은 결과는 차이 없음 ({})는 {return{}}의 축약된 형태 const arrowObj = () => ({}) const arrowObj = () => ( { nArr : [], addN(num){ this.nArr.push(num); return this; } } ) const arrowObj = () => {return{}} const arrowObj = () => { return{ nArr : [], addN(num){ this.nArr.push(num); return this; } }
[ 생성자 함수 ]
객체 ( const 객체이름 = {} )를 사용하면 객체를 쉽게 만들 수 있다.
하지만 유사한 객체를 여러 개 만들어야 할 때가 생긴다. (다수의 사용자 정보)
이 때 new 연산자와 생성자 함수를 사용하면 된다.
생성자 함수의 이름은 첫 글자는 대문자 / 반드시 new 연산자 필요
생성자 함수에서는 return을 굳이 쓰지 않는다.
생성자 함수 내의 메소드는 무조건 this.메소드이름(변수명) = function () {} 의 형태를 사용한다.
생성자 함수 내에 선언한 모든 속성, 메소드는 this.를 붙인다.
function fn (name,id) { // this = {}; 코드는 없지만 빈 객체가 만들어져 있는 상태 this.name = name; this.id = id; this.getName = function () {} //return this; 코드는 없지만 this가 반환 값인 상태 } const objFn = new fn('홍길동','id001'); 사실상 아래와 같은 코드가 된다. const objFn = { name : '홍길동', id : 'id001', getName : function () {} }
728x90
'Front - end > JS' 카테고리의 다른 글
23.04.16 / 객체를 생성하는 방법과 콘솔 출력 & 프로토타입 (0) | 2023.04.16 |
---|---|
23.04.13 / 내장객체 (0) | 2023.04.13 |
23.04.07 / 콜백(callback) & 클로저(closure) & 기타 함수 (0) | 2023.04.07 |
23.03.30 / 함수 function (0) | 2023.03.30 |
23.03.24 / 객체 타입, this, 매개변수와 인자 (0) | 2023.03.24 |