(Javascript) 자바스크립트 기초실습 (4) 배열, 객체를 활용한 Contact List

ㅁ안녕하세요 영감을 주는 개발자 방민방민입니다.

오늘은 자바스크립트에서 객체에 대해서 실습을 해보고자 합니다.

본 포스팅은 코드카데미 자바스크립트 코스의 "Contack List" 를 바탕으로 쓰였습니다.

(참조:https://www.codecademy.com/en/tracks/javascript)

그럼 바로 시작하겠습니다!

1.Object 생성

friends 라는 오브젝트 내부에 June , Bill, Steve 라는 오브젝트를 생성합니다. 

var friends = {
    june: {
        
    },
    
    bill:{
       
    },
    
    steve:{
       
    }
};

그리고 각각의 june, bill, Steve 가 firstName, lastName, number, array 값으로 address 를 갖도록 하고 각각의 값을 아래와 같이 초기화합니다.

var friends = {
    june: {
        firstName:"June",
        lastName: "Kim",
        number: "010-0000-0000",
        address: ["Dobongu","Dobong-ro","117-gil"]
    },
    
    bill:{
        firstName:"Bill",
        lastName: "Yun",
        number: "010-0000-0000",
        address: ["Dobongu","Dobong-ro","117-gil"]
    },
    
    steve:{
        firstName:"Steve",
        lastName: "Kim",
        number: "010-0000-0000",
        address: ["Dobongu","Dobong-ro","117-gil"]
    }
};

위에서 보시는 바와 같이 Object 내부에는 array 값이 그 프로퍼티(key)로써 존재가 가능합니다.

반대로 array 내부에도 Object 가 원소로 존재할 수 있습니다.

2. list Function 생성

friends 라는 객체 내부에서 각각의 key 값에 접근하여 내부 모든 정보를 콘솔에 출력하는 함수를 만들어 보겠습니다.

for(var key in object) 문을 홀용하여, for 문이 object 내부에 있는 키값들을 돌며 그 내용을 출력할 수 있도록 아래와 같은 함수를 만들어 보겠습니다.

var list = function(){
    for(var key in friends){
        console.log(friends[key].firstName);
    }
};

위와같은 함수를 만들면, list 라는 함수는 friends 라는 오브젝트 내부의 키값인 june, bill, steve 를 돌며 그 내무에 있는 firstName 의 값들인 June, Bill, Steve 값을 출력합니다.

3. Search Function 생성

특정 이름을 갖는 오브젝트 내부의 키값에 접근하여 그 정보를 출력하고 싶을때는 아래와 같이 특정 문자열을 name 으로 받아 내부에서 검색하는 방법을 취합니다.

var search = function(name){
    for(var key in friends)
    {
        if(friends[key].firstName===name)
        {
            console.log(friends[key].firstName);
            return friends[key];
        }
    }
};

이 경우 함수 search(name) 에서 name 에 위치에 적절한 이름을 입력해 주면 해당하는 오브젝트 정보를 찾아 그 내부에 firstName 을 출력합니다. 출력하고자 하는 정보는 contact 나 address 가 될 수도 있습니다.

이렇게 오늘은 간단하게 배열,객체 추가적으로 반복문을 활용하여 그 내부 정보에 접근하는 방법에 대하여 실습해 보았습니다.

점점 어려워지는 것 같습니다. 그래도 포기하지 말고 함께 화이팅!!!!!

여기까지 영감을 주는 개발자 방민방민 이었습니다. 감사합니다 :)