네이버 부스트코스 JS Javascript 객체

 

 

 

 

 

객체

 

객체는 함수 위에서 존재한다.

서로 연관된 함수와 변수의 수가 많아지고 복잡해지면

객체를 통해서 정리할 수 있는 것이다.

 

 

객체는 폴더라고 생각하면 쉬운데

비슷한 것들끼리 그룹으로 묶어주는 것이다.

document.querySelector('body');

여기서 document가 객체의 역할을 한다.

함수인 querySelector를 한 그룹에 묶어주는 것이다.

이때 객체 안에 들어가는 함수를 메소드라 부른다.

 

 

 

 

객체의 쓰기와 읽기

 

배열의 경우 순서대로 가져오는 특징이 있었다.

하지만 객체의 경우 순서 없이 저장한다.

대신 각각의 이름이 붙어있어

이를 이용해 값을 꺼낼 수 있다.

 

 

var animals = {
"dog":"웰시코기",
"bird":"까치"
};

대괄호를 사용했던 배열과 달리

객체의 경우 중괄호를 사용한다.

웰시코기에 dog라는 이름표를 붙이고

까치에 bird라는 이름표를 붙이는 것이다.

 

 

따라서 이를 출력하고 싶으면

document.write(animals.dog+'<br>')
document.write(animals.bird)
( document.write(animals["bird"])의 형태도 가능하다)

 

객체를 추가해보자.

animals.cat = "러시안블루";

이때 이름안에 공백이 있다면

animals["cat"] = "러시안블루";

형태로 쓰는 것이 바람직하다.

 

 

 

 

순회

 

 

이제 객체에 넣어둔 모든 값을 꺼내보자.

for과 in을 사용하면 된다.

for(var key in animals){
document.write(key+'<br>');
}

이름표로 붙었던 내용이 출력됐다.

그러면 웰시코기, 까치, 러시안블루 같은 이름을 출력하려면?

 

for(var key in animals){
document.write(animals[key]+'<br>');
}

 

 

응용을 하면

이렇게도 가능하다.

 

 

 

 

프로퍼티와 메소드

 

객체는 함수도 담을 수 있다.

animals.showAll = function(){
for(var key in animals){
document.write(key+':'+animals[key]+'<br>');
}
}

 

위에 모든 것을 출력하는 객체를 

showAll이라는 함수로 묶어본다.

그리고 animals.showAll(); 을 출력하면

 

 

밑의 문장이 추가되기는 했지만 

그 위까지는 결과가 같이 출력됨을 볼 수 있다.

 

하지만 여기서 animals이 다른 이름으로 수정되면

또 일일이 바꿔줘야 하는 수고가 있다.

따라서 animals보다는 자기 자신을 가리키는 this를 이용하면

조금 더 좋은 코드로 바꿀 수 있다.

 

animals.showAll = function(){
for(var key in this){
document.write(key+':'+this[key]+'<br>');
}
}

 

결과는 역시 같다.

 

 

 

 

파일로 쪼개서 정리 정돈하기

 

만약 웹페이지가 여러 개라고 생각해보자.

그리고 그 웹페이지마다 버튼을 만들어주어야 한다.

이때 input 태그뿐 아니라 js까지 모두 복-붙해야 한다.

이때, 파일로 쪼개서 설정해줄 수 있다.

 

 

js파일을 따로 만든다.

그리고 script 태그 뒤에 적어주는 것이다.

만약 파일 이름이 jscolor,js 라면

<script src='jscolor.js'>

이렇게 연결이 된다.

따로 js파일을 관리하기에 

수정사항도 좀 더 쉽게 변경 가능하고

코드가 명확해져 가독성도 좋아진다.

 

 

 

라이브러리와 프레임워크

 

라이브러리는 프로그램에 필요한 소프트웨어가 정리된 것이고

프레임워크는 만들고자 하는 프로그램의 종류에 따라

공통적인 부분을 미리 만들어놓는 것이다.

 

 

즉, 라이브러리는 우리가 필요한 부분을 가져와서 사용하는 것이고

프레임워크는 우리가 직접 들어가 수정해서 사용하는 것이다.

 

 

js의 가장 대표적인 라이브러리에는 jquery가 있다.

다운로드하는 방법도 있지만 CDN을 사용하면

조금 더 손쉽게 사용할 수 있다.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

이 태그만 복-붙하면 제이쿼리를 사용 가능하다.

제이쿼리를 사용하면 반복문을 쓸 필요 없이

코드 한 줄로 해결할 수 있다.

 

 

 

UI와 API

 

UI는 User Interface의 약자로 사용자들이 시스템을 제어하기 위해

조작하는 장치를 말한다. 

반면, API는 Application Programming Interface의 약자로

프로그래머들이 사용하는 장치를 말한다.

 

 

만약 버튼이 있다고 치자.

그리고 그 버튼을 누르면 경고창이 뜬다.

이때 버튼이 UI의 역할을 하고

경고창을 띄우는 함수가 API 역할을 하는 것이다.

 

 

우리는 함수를 이용해 경고창을 띄울 수 있다.

이것은 초기에 경고창을 alert라고 하자는 약속이 있었고

그에 따라 프로그래밍했기에 alert 함수를 사용하면 경고창이 뜨는 것이다.

그렇기에 우리는 경고창을 직접 만들었지만 만든 것은 아니다.

js를 통해 UI와 API를 연결했다고 보는 것이 옳을 것이다.