Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

어리바리 신입 개발자의 얼렁뚱땅 개발 기록 ✨

23.04.09 / 배열, 객체, 함수, 생성자 함수가 헷갈린다... 본문

Front - end/JS

23.04.09 / 배열, 객체, 함수, 생성자 함수가 헷갈린다...

낫쏘링 2023. 4. 9. 00:38
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