[JavaScript] 기초문법5 (+ 객체, for in 반복문, method, this, array )

객체

객체는 { }로 둘러싸여 있고, key : value 형태로 데이터를 갖는다.  

객체명 다음에 .을 찍어서 접근할 수 있고, 마찬가지로 .을 찍어서 새로운 키:밸류 를 추가하거나 삭제할 수도 있다.

 

const superman={
    name:'clark',
    age:30,
}

superman.age
superman['name']

 

객체에서 단축 프로퍼티를 쓰면, 다음과 같이 줄여서 쓸 수 있다. 예를 들면, name이라는 키에 name이라는 변수를 밸류로 담은 것이다. 그리고 그 name 밸류에 'yong'이라는 문자열이 들어있다. 

const name='yong';
const age=28;

const breadman={
    name, //name:name
    age, //age:age
    gender:man,
}

 

객체에서 존재하지 않는 프로퍼티에 접근하려고 하면 에러가 아니라, undefined를 리턴해준다. 객체 안에 특정 프로퍼티가 존재하는지 알아보기 위해서는 in 을 쓰면 존재 여부를 boolean 타입으로 리턴해준다. 사전에 어떤 값이 넘어오는지 모르는 상황에서 쓰면 용이하다.

function makeObject(name, age){
    return{
        name:name,
        age, // age:age 를 이렇게 축약해서 쓸 수도 있다.
        hobby:'football',
    }
}

const Mike=makeObject('Mike',30);
console.log(Mike);
// { name: 'Mike', age: 30, hobby: 'football' }

console.log("age" in Mike); //true

 

for ... in 반복문을 사용하면, 객체를 순회하면서 모든 프로퍼티에 대해 원하는 동작을 할 수 있다.

const Mike={
    name:'Mike',
    age:30
};

for(x in Mike){
    console.log(x); // 키 값 출력
    console.log(Mike[x]); // 밸류 값 출력
};
/**
name
Mike
age
30
 */

 

method(메소드) : 객체 프로퍼티로 할당된 함수를 의미한다. 즉, 함수 자체를 객체 안에 프로퍼티로 가질 수 있다. 객체 안에 있으면 '메소드', 객체 밖에 있으면 '함수'이다.

 

this 는 해당 객체의 참조값을 갖는다. 따라서 객체를 대응시켜준 변수가 null이 되더라도, 객체 자체는 남아있기 때문에 객체 내부의 값을 참조할 때는 객체명을 쓰는 것보다 this 를 쓰는 것이 안전하다. 

let boy={
    name:'Mike',
    showName: function(){
        // console.log(boy.name); 에러
        console.log(this.name); // 정상 작동
    }
}
boy.showName(); //Mike

let man=boy;
boy=null;
man.showName(); //Mike

 

반면 화살표 함수는 this를 갖지 않는다. 따라서 화살표 함수 내에서 this를 쓰면, 자신이 속한 객체의 변수가 아닌 전역변수를 참조하여 값을 가져오게 된다. 전역변수는 브라우저 환경에서는 window, node.js 환경에서는 global을 가리킨다. 그렇기 때문에, 객체의 메소드를 작성할 때는 화살표 함수로 작성하지 않는 것이 좋다. 일반 함수 선언문으로 작성하자.

 

 

배열

배열(Array)은 순서가 있는 리스트이다. 0부터 시작하는 인덱스 번호로 배열 안의 값들을 관리할 수 있다. 배열 안에는 숫자, 문자열, 객체, 함수, boolean 등의 다양한 타입의 데이터를 넣을 수 있다. 배열명.length 를 하면 배열의 길이를 구할 수 있다.

 

배열의 함수

for ... of : 배열이 가진 값들을 하나씩 돌면서 동작을 할 수 있다. 일반적인 for 문과 다르게 인덱스를 얻을 수 없다. '객체'에서의 for ... in 과 비슷하지만 혼용해서 사용하는 것은 단점이 많기 때문에 분리해서 사용하자.

let days=['mon', 'tue', 'wed'];
console.log(days.length); //3

days.push('thu'); //배열 맨 뒤에 추가
days.unshift('sun'); //배열 맨 앞에 추가

console.log(days); 
//[ 'sun', 'mon', 'tue', 'wed', 'thu' ]

for(let i=0;i<days.length;i++){
    console.log(days[i]);
}

for (let j of days){
    console.log(j);
}
/**
sun
mon
tue
wed
thu
 */

 

 

외부 참조 링크

https://www.youtube.com/watch?v=KF6t61yuPCY&t=2851s