코드스테이츠-부트캠프 (JavaScript - 배열/객체)

김희목·2024년 2월 26일

JavaScript 코드스테이츠

코드스테이츠

목록 보기

7/56

배열

배열은 순서가 있는 값을 의미합니다.

배열에서 값은 요소(element)라고 부릅니다.

순서는 인덱스(index)라고 부르며, 1이 아닌 0부터 번호를 매깁니다.

대괄호를 이용해서 배열을 만들고, 각각의 요소는 쉼표로 구분해줍니다.

let myNumber = [73, 98, 86, 61, 96];

존재하지 않는 요소는 undefined로 나옵니다.

반복문과 배열

반복문을 이용해 배열의 요소를 한번씩 출력하려면?

let myNum = [73, 98, 86, 61];

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

값이 배열인지 확인하는 방법

let words = ['피', '땀', '눈물'];
typeof '문자열' // string
typeof '123 // number
typeof words // object
typeof [1,2,3] // object

// 배열인지 확인하는 방법

Array.isArray(words) // true
Array.isArray(123) // false
Array.isArray([1,2,3]) // true

배열의 값 추가 및 삭제

let arr = ['code' , 'states'];
// 추가하는 법
arr.push('pre');
console.log(arr); // ['code', 'states', 'pre']

// 삭제하는 법
arr.pop()
console.log(arr); // ['code', 'states']

지금처럼 push 와 pop을 이용하여 배열의 값을 추가하거나 삭제하는 것이 가능한데 여기서 요소가 가장 뒤에 추가되거나 삭제되는데 앞에 추가하거나 삭제하고 싶을경우
shift , unshift를 사용하면 됩니다.

arr.shift()
console.log(arr) // ['states']

arr.unshift('abc')
console.log(arr) // ['abc' , 'states']

뒤에 element 추가 : push
뒤에 element 삭제 : pop
앞에 element 추가 : unshift
앞에 element 삭제 : shift

배열의 특정 값이 포함되어 있는지 확인하는 방법

indexOf 사용하여 확인

let words = ['abc' ,'abc2', 'abc3'];

words.indexOf('abc2') // 1
words.indexOf('abc') // 0
words.indexOf('bbc') // -1 (없는단어)

words.indexOf('abc') === -1 // false
words.indexOf('abc') !== -1 // true

includes 사용하여 확인

let words = ['abc' , 'abc2' ,'abc3'];

words.includes('abc') // true
words.includes('bbc') // false

includes보다 indexOf를 사용해야 하는 이유
= includes는 브라우저 호환성에서 internet Explorer에서 호환되지 않기 때문에

둘의 차이점

문자열.indexOf('문자')

indexOf() 메서드는 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다. 일치하는 값이 없으면 -1을 반환합니다

배열.includes('문자 or 문자열')

includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별합니다. ( T / F )

indexOf / includes 차이점

indexOf는 해당 index 자체를 찾아 splice를 이용한 제거에 유리하나
includes는 return으로 T/F 처리에 유

객체

만약 나를소개하는 프로그램을 만들어야 할떄

let userName = 'Steve';
let userLastName = 'KIM';
let userEmail = 'steve@naver.com';

이런식으로 하나하나 입력한다면 불편하지 않을까요?
더군다나 여러사람의 인적사항을 받는 프로그램을 만든다면 더욱 불편하게 될텐데 객체를 이용하면 좀 더 편리하고 간편하게 작업할 수 있습니다.

let user = {
	firseName : 'Steve',
    lastName : 'KIM',
    email : 'steve@naver.com'
    };

이런식으로 객체는 키와 값 쌍으로 이루어져 있고
위의 방식보다 훨씬 편리하게 작업할 수 있습니다.

객체의 값을 사용하는 방법 2가지

Dot notation

let user = {
	firstName: 'Steve',
    lastName: 'KIM',
    email: 'steve@naver.com',
    city: 'Seoul'
  };
  
  user.firstName; // 'Steve'
  user.city; // 'Seoul'

Bracket notation

let user = {
	firstName: 'Steve',
    lastName: 'KIM',
    email: 'steve@naver.com',
    city: 'Seoul'
  };
  
  user['firstName']; // 'Steve'
  user['email']; // 'steve@naver.com'