코드스테이츠 프리코스 1주차 후기(2)

*코드스테이츠 프리코스 33기를 수강하면서 2019년 5월 2일(목)에 학습한 내용을 정리한 포스팅입니다.

*https://soldonii.github.io에서 작성한 글을 티스토리로 옮겨온 포스팅입니다.

*자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :)

---

1. 배열(Array)

코드 스테이츠 Pre course 33기 1주차 목요일(2019-05-02)에는 배열, 반복문, 객체에 대해서 배웠다.

 

• 배열은 자료형 데이터 타입 중 하나로, 여러 개의 값을 배열이라는 하나의 그릇에 담을 때 사용한다.
• 기본적인 형식은 let fruits = ['apple', 'banana', 'grape', 'strawberry'];와 같이 []을 이용한다.
• 즉, 배열의 순서에 따라 index가 자동적으로 부여되며, index는 0부터 시작된다.(ex. fruits[2];는 'grape'가 조회된다.)
• 4번째 index의 값을 변경하고 싶으면, fruits[3] = 'pineapple';으로 선언하면, 'strawberry'가 'pinapple'로 변경된다.
• 배열 안의 값이 또 배열이 될 수도 있다. let myNumber = [[13, 20], [22, 8], [44, 17]];과 같은 형태를 띈다.
  • myNumber의 두번째 index의 첫번째 index를 불러오고 싶다면? ➙ myNumber[1][0]로 불러오고, 결과는 22이다.
• 온점(.)을 이용하여 변수가 가지고 있는 속성(property)에 접근할 수 있다. 아주 기초적인 method 3개로 예시를 든다.
  • .length : 배열의 길이(배열이 가지고 있는 element의 개수)를 return
  • .push : 배열의 끝에 원하는 element를 추가
  • .pop : 배열의 가장 끝에 있는 1개의 element를 삭제
  • 이 외에도 배열과 관련된 method는 수 없이 많으며, 나중에 따로 정리할 예정이다.
  • 배열 관련 method는 다음 링크에서 찾아볼 수 있다.
  • Array MDN 문서

let myNumber = [73, 98, 86, 61]; 
myNumber.length; // 4가 출력
myNumber.push(102); // myNumber = [73, 98, 86, 61, 102] (배열 맨 끝에 102라는 값이 추가)
myNumber.pop(); // myNumber = [73, 98, 86, 61] (맨 끝에 추가됐던 102가 다시 삭제됨)

2. 반복문(Iteration)

• 같거나 비슷한 코드를 여러번 실행시켜야 할 때, 코드를 복붙하는게 아니라 반복문을 활용한다.
• for 구문 : 반복할 조건을 초기화, 조건식, 증감문 순으로 넣어준다.
• while 구문 : 반복할 조건 중 초기화, 증감문은 따로, 조건식만 괄호에 넣어준다.

// 1. for문을 이용할 경우
let sum = 1; for (let n = 2; n <= 4, n++) {
  sum = sum + n;
}

// 2. while문을 이용할 경우
let sum = 1; 
let n = 2; 
while (n <= 4;) {
  sum = sum + n; n++;
}

3. 객체(Object)

객체도 마찬가지로 자료형 데이터 타입 중 하나이다. 배열과 다른 점은, 데이터가 key-value(키-값) 쌍으로 이루어져 있다는 점이다.

let user = {
  firstName : 'Hyunsol',
  lastName : 'Do',
  email : 'dhs0113@gmail.com',
  city : 'Seoul'
};

• (중요) 객체의 값을 사용하는 방법에는 Dot notation, Bracket notation이 있다.

// 1. Dot notation
user.firstname; // 결과값은 'Hyunsol' 
user.city; // 결과값은 'Seoul'

// 2. Bracket notation 
user["firstName"]; // 결과값은 'Hyunsol' 
user["city"]; // 결과값은 'Seoul'

• Bracket notation 사용 시 주의사항이 있다. 어떤 객체의 특정 key값을 통해 해당 key의 value를 알고 싶을 때, []안에 반드시 ""를 사용해야 한다.
• user[lastName]이라고 할 경우, lastName을 객체의 key가 아니라 하나의 변수로 인식하기 때문에 'Do'라는 결과값을 얻을 수 없다.
• user["lastName"]과 같이 ""를 사용하여 호출해야 원하는 결과값 'Do'를 얻을 수 있다.
• Dot/Bracket notation을 이용하여 값을 추가할 수도 있다.

let tweet = { 
  writer : 'hyunsol', 
  createdAt : '2019-09-10 12:03:33', 
  content : '프리코스 재밌당!'
}; 
tweet.isPublic = true; 
twet.tags = ['#코드스테이츠', '#프리코스']; 
tweet['category'] = '잡담'; 
// 위와 같이 dot notation, bracket notation을 활용하여 tweet이라는 객체의 값을 추가할 수 있다. 

 

• delete 키워드로 값을 삭제하는 것도 가능하다.
• delete tweet.createdAt;을 입력하면, tweet의 결과물은 {writer : 'hyunsol', content : '프리코스 재밌당!'}이다.
• in 연산자로 특정 키가 객체 안에 포함되어 있는지 확인할 수 있다.
  • 'content' in tweet;은 true를 return하고, 'updatedAt' in tweet;은 false를 return한다.